<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="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,toRaw } from 'vue';  
import { allTpls } 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');
const tabList = [
  {
    key: 'tab1',
    tab: '年报',
  },
  {
    key: 'tab2',
    tab: '季报',
  },
  {
    key: 'tab3',
    tab: '月报',
  },
  {
    key: 'tab4',
    tab: '年度报告',
  },
];


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) => {
  let code  = item.code;
  queryParam.value.tplName = item.nm
  queryParam.value.tplCode = item.code
  queryParam.value.tplId = item.id
  
  if(code === 'T-B-1') {
    ruterToPage('/baosong/report/components/Tb1')
  } else if(code === 'T-B-2') {
    ruterToPage('/baosong/report/components/Tb2')
  } else if(code === 'T-B-3') {
    ruterToPage('/baosong/report/components/Tb3')
  } else if(code === 'T-B-4') {
    ruterToPage('/baosong/report/components/Tb4')
  } else if(code === 'T-B-5') {
    ruterToPage('/baosong/report/components/Tb5')
  } else if(code === 'T-B-6') {
    ruterToPage('/baosong/report/components/Tb6')
  } else if(code === 'T-B-7') {
    ruterToPage('/baosong/report/components/Tb7')
  } else if(code === 'T-B-8') {
    ruterToPage('/baosong/report/components/Tb8')
  } else if(code === 'T-B-9') {
    ruterToPage('/baosong/report/components/Tb9')
  } else if(code === 'T-B-10') {
    ruterToPage('/baosong/report/components/Tb10')
  } else if(code === 'T-B-11') {
    ruterToPage('/baosong/report/components/Tb11')
  } else if(code === 'R-R-1') {
    ruterToPage('/baosong/report/components/Rr1')
  } else if(code === 'R-R-2') {
    ruterToPage('/baosong/report/components/Rr2')
  } else if(code === 'T-M-1') {
    ruterToPage('/baosong/report/components/Tm1')
  } else if(code === 'T-M-2') {
    ruterToPage('/baosong/report/components/Tm2')
  } else if(code === 'T-M-3') {
    ruterToPage('/baosong/report/components/Tm3')
  } else if(code === 'T-Q-1') {
    ruterToPage('/baosong/report/components/Tq1')
  } else if(code === 'T-Q-2') {
    ruterToPage('/baosong/report/components/Tq2')
  } else if(code === 'T-Q-3') {
    ruterToPage('/baosong/report/components/Tq3')
  } else if(code === 'T-Q-4') {
    ruterToPage('/baosong/report/components/Tq4')
  } else if(code === 'T-Q-5') {
    ruterToPage('/baosong/report/components/Tq5')
  }
}

const dataList = ref([])  
const dataAllList = ref([])  

async function iniData() {  
    dataAllList.value  = await allTpls({}); 
    dataList.value = await filteredData(1)
}  

const filteredData =  (async (tp) => {  
    return dataAllList.value.filter(item => item.tp === tp);  
});

const ruterToPage = ((url) => { 
  router.push({path:url,  query: {  
      ...queryParam.value
  }}) 
  return false 
}) 
    

</script>  

