<template>
    <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tab-click="tabsClick">
        <template #tab-pricetype>
            <HcTabPriceType v-if="tabsKey === 'pricetype'" :cur="tabsKey" :type="1" />
        </template>
        <template #tab-tasktype>
            <HcTabTaskType v-if="tabsKey === 'tasktype'" :cur="tabsKey" :type="2" />
        </template>
        <template #tab-price>
            <HcTabPrice v-if="tabsKey === 'price'" :cur="tabsKey" :type="3" />
        </template>
        <template #tab-reimbursement>
            <HcTabReimbursement v-if="tabsKey === 'reimbursement'" :cur="tabsKey" :type="4" />
        </template>
        <template #tab-cost>
            <HcTabCost v-if="tabsKey === 'cost'" :cur="tabsKey" :type="5" />
        </template>
        <template #tab-approve>
            <HcTabApprove v-if="tabsKey === 'approve'" :cur="tabsKey" :type="6" />
        </template>
        <template #tab-invoice>
            <HcTabInvoice v-if="tabsKey === 'invoice'" :cur="tabsKey" :type="7" />
        </template>
        <template #tab-other>
            <HcTabOther v-if="tabsKey === 'other'" :cur="tabsKey" :type="11" />
        </template>
    </HcTabsSimple>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import HcTabPriceType from './components/tab-price-type.vue'
import HcTabTaskType from './components/tab-task-type.vue'
import HcTabPrice from './components/tab-price.vue'
import HcTabReimbursement from './components/tab-reimbursement.vue'
import HcTabCost from './components/tab-cost.vue'
import HcTabApprove from './components/tab-approve.vue'
import HcTabInvoice from './components/tab-invoice.vue'
import HcTabOther from './components/tab-other.vue'


//类型处理
const tabsKey = ref('pricetype')
const tabsData = ref([
    { icon: 'bar-chart-box', label: '财务费用字典', key: 'pricetype' },
    { icon: 'tools', label: '任务类型字典', key: 'tasktype' },
    { icon: 'sun-cloudy', label: '岗位类型字典', key: 'price' },
    { icon: 'sun-cloudy', label: '报销类型字典', key: 'reimbursement' },
    { icon: 'sun-cloudy', label: '成本测算类型', key: 'cost' },
    { icon: 'sun-cloudy', label: '审批流程', key: 'approve' },
    { icon: 'sun-cloudy', label: '发票字典', key: 'invoice' },
    { icon: 'sun-cloudy', label: '其他', key: 'other' },

])
//渲染完成
onMounted(() => {

})
const tabsClick = (key) => {
    tabsKey.value = key
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">

</style>
