
<template>
    <a-card
        style="width:100%;height:75vh;"
        :tab-list="leftTabs"
        :active-tab-key="curTabKey"
        @tabChange="key => tabChangeEvent(key)"
      >
      <div style="height:75vh;">
        <vxe-table
          keep-source
          ref="tableRef"
          size="small"
          show-overflow
          height="auto"
          :data="tableDtatas"
          :show-radio="true"
          :row-config="{ isCurrent: true, isHover: true }"
          @current-change="tableChangeEvent"
          :columnConfig="{ resizable: true }"
          :scroll-y="{ enabled: true, gt: 50 }"
          :radio-config="{ labelField: 'name', highlight: true }"
        >
          <vxe-column type="seq" width="50" />
          <vxe-column field="nm" type="html" title="名称">
            <template #default="{ row }">
              <span style="margin-right:10px;">{{ row.code }} </span>
              <span>{{ row.nm }} </span>
            </template>
          </vxe-column>
          <vxe-column field="childNum" sortable width="20%" type="html" title="节点数" />
          <vxe-column field="id" title="" :visible="false" />
        </vxe-table>
      </div>
    </a-card>
</template>

<script lang="ts" setup name="system-depart">
  import { ref } from 'vue';
  import { allTpls } from '../tpl/BaosongTpl.api';

  const emit = defineEmits(['callback']);
  const curTabKey = ref(1);
  
  const tableDtatas = ref([]);
  const allDatas = ref([])
  const leftTabs = [{
      key: 1,
      tab: '年度报表',
      disabled:true
    },{
      key: 2,
      tab: '季度报表',
      disabled:true
    },{
      key: 3,
      tab: '月度报表',
      disabled:true
    }
  ];

  const tabChangeEvent = (tp) => {
    curTabKey.value = tp;
    tableDtatas.value =  allDatas.value[tp];
  };

function tableChangeEvent({ rowIndex }) {
  let tplRow = tableDtatas.value[rowIndex];
  emit('callback', tplRow);
}

async function setData(tp) {
  let tplDatas = await allTpls({tp:tp})
  allDatas.value = await tplDatas.reduce((acc, item) => {  
      if (!acc[item.tp]) {  
          acc[item.tp] = [];  
      }  
      acc[item.tp].push(item);  
      return acc; 
  }, {}); 
  
  await tabChangeEvent(tp)
  await setTabSta(tp)
}

async function setTabSta(tp) {
  leftTabs[tp-1]["disabled"] = false
}

defineExpose({
  setData
});

</script>

<style lang="less">

</style>
