<template>
    <el-dropdown trigger="click" :teleported="false">
        <el-button size="small" type="primary">
            更多
            <el-icon class="el-icon--right"> <i-ep-arrow-down /> </el-icon>
        </el-button>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="refresh">
                    <el-icon> <i-ep-refresh /> </el-icon>数据同步
                </el-dropdown-item>
                <el-dropdown-item @click="maximize">
                    <el-icon><i-ep-full-screen /></el-icon>最大化
                </el-dropdown-item>
                <el-dropdown-item divided @click="closeCurrentTab">
                    <el-icon><i-ep-remove /> </el-icon>关闭当前
                </el-dropdown-item>
                <el-dropdown-item @click="closeOtherTab">
                    <el-icon><i-ep-circle-close /></el-icon>关闭其他
                </el-dropdown-item>
                <el-dropdown-item @click="closeAllTab">
                    <el-icon><i-ep-folder-delete /></el-icon>关闭所有
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang="ts">
//全局状态
import { inject, nextTick } from "vue";
import { HOME_URL } from "@/config";
import { useTabsStore } from "@/stores/modules/tabs";
import { useGlobalStore } from "@/stores/modules/global";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { useRoute, useRouter } from "vue-router";
// import { initCache } from "./init/init";

// import { useMsg } from "@/hooks/useMsg";
const route = useRoute();
const router = useRouter();
const tabStore = useTabsStore();
const globalStore = useGlobalStore();
const keepAliveStore = useKeepAliveStore();

// refresh current page
const refreshCurrentPage: Function = inject("refresh") as Function;

const refresh = async () => {
    // initCache(data);
    setTimeout(() => {
        keepAliveStore.removeKeepAliveName(route.name as string);
        refreshCurrentPage(false);
        nextTick(() => {
            keepAliveStore.addKeepAliveName(route.name as string);
            refreshCurrentPage(true);
        });
    }, 300);
    // if (result.status === 200) {
    //     const { data } = result;
    //     useMsg("success", "数据同步成功 ！");
    //     initCache(data);
    //     setTimeout(() => {
    //         keepAliveStore.removeKeepAliveName(route.name as string);
    //         refreshCurrentPage(false);
    //         nextTick(() => {
    //             keepAliveStore.addKeepAliveName(route.name as string);
    //             refreshCurrentPage(true);
    //         });
    //     }, 300);
    // } else {
    //     useMsg("error", "数据同步失败 ！");
    // }
};

// maximize current page
const maximize = () => {
    globalStore.setGlobalState("maximize", true);
};

// Close Current
const closeCurrentTab = () => {
    if (route.meta.isAffix) return;
    tabStore.removeTabs(route.fullPath);
    keepAliveStore.removeKeepAliveName(route.name as string);
};

// Close Other
const closeOtherTab = () => {
    tabStore.closeMultipleTab(route.fullPath);
    keepAliveStore.setKeepAliveName([route.name] as string[]);
};

// Close All
const closeAllTab = () => {
    tabStore.closeMultipleTab();
    keepAliveStore.setKeepAliveName();
    router.push(HOME_URL);
};
</script>

<style scoped lang="scss">
@import "../index.scss";
</style>
