<script setup>
import {useGlobalTabs} from "src/store/globalTabs";
import {storeToRefs} from "pinia";
import {useRoute, useRouter} from "vue-router";
import {onBeforeMount, watch} from "vue";
const globalTabsState = useGlobalTabs()
const {tab, tabs} = storeToRefs(globalTabsState)
const router = useRouter()
const route = useRoute()
const props = defineProps({
    init: {
        required: true
    },
    initCanCloseable: {
        type: Boolean,
        default: false,
        required: false
    },
    rollBack: {
        default: "/",
        required: false
    },
    rollBackCanCloseable: {
        type: Boolean,
        default: false,
        required: false
    }
})

onBeforeMount(()=>{
    let initRoute = router.resolve(props.init)

    globalTabsState.addTab({
        name: initRoute.path,
        title: initRoute.meta.title,
        closable: props.initCanCloseable,
    })
    globalTabsState.tab = initRoute.path
    router.push(initRoute)
})


watch(route,()=>{
    if(route.path === tab.value) {
        return
    }

    console.log("route change", route.path)
    let index = tabs.value.findIndex(item => item.name === name)
    if(index === -1){
        globalTabsState.addTab({
            name: route.path,
            title: route.meta.title
        })
    }
    globalTabsState.tab = route.path
})

function tabChange(name){
    console.log("tabChange", name)
    globalTabsState.tab = name
    router.push({
        path: name
    })
}

function tabRemove(name){
    console.log("tabRemove", name)
    let index = tabs.value.findIndex(item => item.name === name)
    if(index >= tabs.value.length){
        tab.value = tabs.value[0].name
    } else {
        if(index === 0 && tabs.value.length === 1){
            tabs.value.splice(index,1)
            let r = router.resolve(props.rollBack)
            tabs.value.push({
                name: r.path,
                title: r.meta.title,
                closable: props.rollBackCanCloseable
            })
            tab.value = tabs.value[0].name
            router.push(r)
        } else {
            let nextIndex = index === tabs.value.length - 1? index - 1: index + 1
            tab.value = tabs.value[nextIndex].name
            tabs.value.splice(index,1)
        }
    }
}
</script>

<template>
    <el-tabs v-model="tab" @tab-change="tabChange" @tab-remove="tabRemove" style="height:100%" class="tab-scaffold">
            <el-tab-pane
                v-for="item in tabs"
                :key="item.name"
                :label="item.title"
                :closable="item.closable == null || item.closable"
                :name="item.name">
                <router-view v-slot="{ Component, route  }">
                    <transition name="fade" mode="out-in">
                        <el-scrollbar class="scroll-bar">
                            <div class="h-full mx-1.5">
                                <component v-if="route.meta.keepAlive != null && route.meta.keepAlive === false" :is="Component" :key="route.path"/>
                                <keep-alive v-else>
                                    <component :is="Component" :key="route.path"/>
                                </keep-alive>
                            </div>
                        </el-scrollbar>
                    </transition>
                </router-view>
            </el-tab-pane>
    </el-tabs>
</template>

<style scoped lang="scss">
.tab-scaffold {
    & > ::v-deep(.el-tabs__content) {
        height: calc(100% - 55px);

        & .el-tab-pane {
            height: 100%;
            overflow: auto;

            & .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
                height: 100%;
            }
        }
    }
}
</style>
