<template>
    <div class="app-container" v-loading="loading">
        <el-tabs v-model="currentTab">
            <el-tab-pane v-for="t in tabs" :label="t.label" :name="t.name">
                <component :is="t.page" v-if="t.visited"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup name="PaperIndex">
import {useProvideGlobalLoading} from "@/views/hooks/useGlobalLoading.js";
import PaperExactIntelligent from "@/views/dz/papers/components/paper-exact-intelligent.vue";
import PaperFullIntelligent from "@/views/dz/papers/components/paper-full-intelligent.vue";
import PaperExactHand from "@/views/dz/papers/components/paper-exact-hand.vue";
import PaperFullHand from "@/views/dz/papers/components/paper-full-hand.vue";

const {loading} = useProvideGlobalLoading()

const tabs = ref([{
    name: 'ExactIntelligent',
    label: '定向智能',
    page: markRaw(PaperExactIntelligent) ,
    visited: true
}, {
    name: 'FullIntelligent',
    label: '全量智能',
    page: markRaw(PaperFullIntelligent),
    visited: false
}, {
    name: 'ExactHand',
    label: '定向手动',
    page: markRaw(PaperExactHand),
    visited: false
}, {
    name: 'FullHand',
    label: '全量手动',
    page: markRaw(PaperFullHand),
    visited: false
}])
const currentTab = ref('ExactIntelligent')

watch(currentTab, tabName => {
    // 通过visited=true 延迟渲染
    const tab = tabs.value.find(t => t.name == tabName)
    if (tab) tab.visited = true
})
</script>

<style scoped></style>
