<template>
    <div class="flex">
        <div class="menu flex-1 flex flex-wrap px-4 mt-3">
            <div v-for="(item, index) in tabsLists" class="flex py-1 px-5 cursor-pointer mb-2 items-center"
                :class="{ act: (currentRoute == item.fullPath) }">
                <span v-show="currentRoute == item.fullPath" class="w-1.5 h-1.5 mr-1 bg-primary rounded"></span>
                <span @click="handleChanges(item.fullPath)">{{ item.title }}</span>
                <el-icon @click="delTab(item.fullPath)">
                    <Close />
                </el-icon>
            </div>
        </div>
        <el-dropdown @command="handleCommand">
            <span class="flex items-center px-3">
                <icon :size="16" name="el-icon-arrow-down" />
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="closeCurrent">关闭当前</el-dropdown-item>
                    <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="closeAll">关闭全部</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import useMultipleTabs from "@/hooks/useMultipleTabs";
import { useWatchRoute } from "@/hooks/useWatchRoute";
import useTabsStore, { getRouteParams } from "@/stores/modules/multipleTabs";

const currentRoute = ref("");
const router = useRouter();
const route = useRoute();
const tabsStore = useTabsStore();
const {
    removeOtherTab,
    addTab,
    removeAllTab,
    removeTab,
    tabsLists,
    currentTab,
} = useMultipleTabs();


useWatchRoute((route) => {
    currentRoute.value = route.fullPath;
    addTab();
});



const handleChanges = (fullPath: any) => {
    const tabItem = tabsStore.tasMap[fullPath];
    router.push(getRouteParams(tabItem));
};

const delTab = (fullPath: String) => {
    removeTab(fullPath);
};


const handleCommand = (command: any) => {
    switch (command) {
        case "closeCurrent":
            removeTab();
            break;
        case "closeOther":
            removeOtherTab();
            break;
        case "closeAll":
            removeAllTab();
            break;
    }
};

</script>
<style lang="scss" scoped>
.act {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary)
}
</style>