<template>
    <a-card
    style="width: 100%"
    :tab-list="tabList"
    :active-tab-key="key"
    @tabChange="key => onTabChange(key)"
    
  >
    <div style="background-color: #ececec; padding: 20px">
        <a-row :gutter="[16,16]">
            <a-col :span="8" v-for="item in dataList" :key="item.id">
                <a-card :bordered="false">
                    <template #title>
                        {{ item.code }} - {{ item.nm }}
                    </template>
                    <template #extra>
                      <a href="#" @click.prevent="gotoPage(item)">填报</a>
                    </template>
                    <span>年度：{{ item.vyear }} &nbsp;</span>
                    <span>版本：{{ item.version }} &nbsp;</span>
                    <span>节点数：{{ item.childNum }}</span><br>
                    <span>{{ item.xmlfilePath }}</span>
                </a-card>
            </a-col>
        </a-row>
    </div>
  </a-card>
</template>

<script lang="ts" setup>  
import { ref, onMounted, computed,nextTick } from 'vue';  
import { findUserRightForTpl } from '../tpl/BaosongTpl.api';  

import { useRoute,useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const queryParam = ref({
  taskId:0,
  taskName:'',
  tplId:'',
  tplName:'',
  tplCode:''
})

onMounted(()=>{

  if (route.query.taskId) {  
    queryParam.value.taskId = Number(route.query.taskId); // Convert to number  
  }  
  
  if (route.query.taskName) {  
    queryParam.value.taskName = String(route.query.taskName); // Ensure it's a string  
  } 

  iniData();  

})



const key = ref('tab1');

// 使用 computed 计算 tabList，根据 dataMap 中的记录数动态设置 disabled
const tabList = computed(() => {
  const tabs = [
    {
      key: 'tab1',
      tab: '年报',
      type: 1
    },
    {
      key: 'tab2',
      tab: '季报',
      type: 2
    },
    {
      key: 'tab3',
      tab: '月报',
      type: 3
    },
    {
      key: 'tab4',
      tab: '年度报告',
      type: 4
    },
  ];

  return tabs.map(tab => ({
    ...tab,
    disabled: !dataMap.value[tab.type] || dataMap.value[tab.type].length === 0
  }));
});


const onTabChange = async (value: string) => {
   key.value = value;
  if(value === 'tab1') {
    dataList.value = await filteredData(1)
  } else if(value === 'tab2') {
    dataList.value = await filteredData(2)
  } else if(value === 'tab3') {
    dataList.value = await filteredData(3)
  } else {
    dataList.value = await filteredData(4)
  }
}


const gotoPage = async (item) => {
  // 确保所有参数都设置完成后再跳转
  queryParam.value.tplName = item.nm || ''
  queryParam.value.tplCode = item.code || ''
  queryParam.value.tplId = item.id || ''
  
  let targetPath = ''
  const code = item.code || ''
  
  if(code === 'T-B-1') {
    targetPath = '/baosong/report/components/Tb1'
  } else if(code === 'T-B-2') {
    targetPath = '/baosong/report/components/Tb2'
  } else if(code === 'T-B-3') {
    targetPath = '/baosong/report/components/Tb3'
  } else if(code === 'T-B-4') {
    targetPath = '/baosong/report/components/Tb4'
  } else if(code === 'T-B-5') {
    targetPath = '/baosong/report/components/Tb5'
  } else if(code === 'T-B-6') {
    targetPath = '/baosong/report/components/Tb6'
  } else if(code === 'T-B-7') {
    targetPath = '/baosong/report/components/Tb7'
  } else if(code === 'T-B-8') {
    targetPath = '/baosong/report/components/Tb8'
  } else if(code === 'T-B-9') {
    targetPath = '/baosong/report/components/Tb9'
  } else if(code === 'T-B-10') {
    targetPath = '/baosong/report/components/Tb10'
  } else if(code === 'T-B-11') {
    targetPath = '/baosong/report/components/Tb11'
  } else if(code === 'R-R-1') {
    targetPath = '/baosong/report/components/Rr1'
  } else if(code === 'R-R-2') {
    targetPath = '/baosong/report/components/Rr2'
  } else if(code === 'T-M-1') {
    targetPath = '/baosong/report/components/Tm1'
  } else if(code === 'T-M-2') {
    targetPath = '/baosong/report/components/Tm2'
  } else if(code === 'T-M-3') {
    targetPath = '/baosong/report/components/Tm3'
  } else if(code === 'T-Q-1') {
    targetPath = '/baosong/report/components/Tq1'
  } else if(code === 'T-Q-2') {
    targetPath = '/baosong/report/components/Tq2'
  } else if(code === 'T-Q-3') {
    targetPath = '/baosong/report/components/Tq3'
  } else if(code === 'T-Q-4') {
    targetPath = '/baosong/report/components/Tq4'
  } else if(code === 'T-Q-5') {
    targetPath = '/baosong/report/components/Tq5'
  }
  
  if (targetPath) {
    console.log('跳转到页面:', targetPath, '参数:', queryParam.value);
    // 使用 Promise 确保数据更新完成后再跳转
    await nextTick();
    router.push({
      path: targetPath,
      query: {
        taskId: queryParam.value.taskId,
        taskName: queryParam.value.taskName,
        tplId: queryParam.value.tplId,
        tplName: queryParam.value.tplName,
        tplCode: queryParam.value.tplCode
      }
    });
  }
}

const dataList = ref([])
const dataMap = ref({})  
const dataAllList = ref([])  

async function iniData() {  
    dataAllList.value  = await findUserRightForTpl({}); 
    dataMap.value = dataAllList.value.reduce((result, item) => {
      const key = item.tp; 
      if (!result[key]) {
        result[key] = [];
      }
      result[key].push(item);
      return result;
    }, {});
    dataList.value = dataMap.value[1]
}  

const filteredData =  (async (tp) => {  
    return dataMap.value[tp]
});

// 简化跳转函数，直接集成到 gotoPage 中
const ruterToPage = ((url) => { 
  router.push({
    path: url,  
    query: {  
      ...queryParam.value
    }
  }) 
  return false 
}) 
    

</script>