<template>
  <div>
    <slot name="dialog"></slot>
    <div class="m-t">
      <el-tabs v-model="activeTab">
        <el-tab-pane :label="item.name" :name="item.tabName" v-for="item in currentOobj.tabArr" :key="item.tabName">
          <transition name="fade">
            <sta-tab-content :my-header="tableHeader" :get-table-list="getTableList" ref="statContent" @addOp="$emit('addOp')" :table-attrs="tableAttrs"  v-if="activeTab ===item.tabName"   :type="item.tabName">
              <template v-for="item in tableHeader" #[item.prop]="{data}">
                <slot :name="item.prop" :data="data">{{data[item.prop]}}</slot>
              </template>
              <template #operation="{data}">
                <slot name="operation" :data="data"></slot>
              </template>
            </sta-tab-content>
          </transition>

        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script>
import {computed, onBeforeMount, ref, watch} from "vue";
import StaTabContent from "@/components/common/StaTabContent.vue";
import {staTabReflectArr} from "@/data/all-reflect";
import {useRoute} from "vue-router";
import {useRootStore} from "@/stores/useStore";
import {userManageHomeTableZwHeader2} from "@/data/all-table-header";

export default {
  name: "CommonStaLayout",
  components: {StaTabContent},
  props:{
    tabArr:[],
    tableAttrs:{

    },
    parentActiveTab:{

    },
    getTableList:{

    }
  },
  setup(props,{emit}){

    const activeTab = ref(props.parentActiveTab || 'kj')
    const currentOobj =computed(() => {
      return staTabReflectArr.find(i=>i.id===route.name)
    })
    const route = useRoute()
    const tableHeader = ref([...currentOobj.value.tabArr.find(i=>i.tabName === activeTab.value).tableHeader])
    const statContent = ref(null)


   onBeforeMount(() => {
     console.log('miuhns')
     tableHeader.value = [...currentOobj.value.tabArr.find(i=>i.tabName === activeTab.value).tableHeader]

     if (route.name === 'user-manage'){

       if (activeTab.value === 'zw' && +useRootStore().userInfo.ptjk_role === 0){
         tableHeader.value = userManageHomeTableZwHeader2
       }

     }
   })

    watch(activeTab,(val) => {
      emit('update:parentActiveTab',val)
      console.log('activeTab变化',val)
      tableHeader.value = [...currentOobj.value.tabArr.find(i=>i.tabName === activeTab.value).tableHeader]
      if (route.name === 'user-manage'){

        if (activeTab.value === 'zw' && +useRootStore().userInfo.ptjk_role === 0){
          tableHeader.value = userManageHomeTableZwHeader2
        }

      }
    },{
      immediate:true
    })

    return {
      activeTab,
      currentOobj,
      tableHeader,
      statContent
    }
  }
}
</script>

<style scoped lang="scss">
.m-t{
  padding-top:15px;
  padding-left: 15px;
}
</style>
