<template>
  <TabsPro
    :value="route.fullPath"
    :tab-list="ts"
    @update:value="onChange"
    @handler-close="handleTabClose"
  >
    <template #actions>
      <n-dropdown
        trigger="click"
        :options="suffixOptions"
        show-arrow
        @select="dropdownSelect"
      >
        <n-button
          class="margin-right"
          size="small"
        >
          更多
          <IcBaselineKeyboardArrowDown />
        </n-button>
      </n-dropdown>
    </template>
  </TabsPro>
</template>

<script setup lang="ts">
  import IcBaselineKeyboardArrowDown from "@/components/icon/src/icons/IcBaselineKeyboardArrowDown.vue";

  import CarbonSubtractAlt from "@/components/icon/src/icons/CarbonSubtractAlt.vue";
  import CodiconCloseAll from "@/components/icon/src/icons/CodiconCloseAll.vue";
  import IconamoonSynchronize from "@/components/icon/src/icons/IconamoonSynchronize.vue";
  import MaterialSymbolsCancelOutline from "@/components/icon/src/icons/MaterialSymbolsCancelOutline.vue";

  import { INDEX_ROUTER } from "@/config/constant";
  import { type TabsMenuProps, useTabsStore } from "@/stores/tabsStore";
  import { message } from "@/utils";
  import { storeToRefs } from "pinia";
  import { computed, inject, watch } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { TabsPro } from "@/components";

  const route = useRoute();
  const router = useRouter();
  const tabStore = useTabsStore();
  const { tabList } = storeToRefs(useTabsStore());

  const ts = computed(() =>
    tabList.value.map((e) => ({
      value: e.path,
      label: e.title,
      icon: e.icon,
      closable: e.closable,
    }))
  );

  const refreshCurrentPage = inject<Function>("refreshCurrentPage");

  //监听路由的变化防止浏览器后退/前进不变化
  watch(
    () => route.fullPath,
    () => {
      //如果是全屏，不进行添加tab
      if (route.meta.isFull) return;
      const tabItem: TabsMenuProps = {
        title: route.meta.title,
        name: route.name as string,
        path: route.fullPath,
        icon: route.meta.icon as string,
        isKeepAlive: route.meta.isKeepAlive,
        closable: !route.meta.isFixed,
      };
      //添加tab
      tabStore.addTab(tabItem);
    },
    {
      immediate: true,
    }
  );

  const onChange = (fullPath: string) => {
    router.push(fullPath);
  };

  const handleTabClose = (val: string) => {
    tabStore.closeTab(val);
  };

  const suffixOptions = [
    {
      key: "refreshCurrent",
      label: "刷新当前",

      icon: () => h(IconamoonSynchronize),
    },
    {
      key: "closeCurrent",
      label: "关闭当前",
      icon: () => h(CarbonSubtractAlt),
    },
    {
      key: "closeOther",
      label: "关闭其他",

      icon: () => h(MaterialSymbolsCancelOutline),
    },
    {
      key: "closeAll",
      label: "关闭所有",
      icon: () => h(CodiconCloseAll),
    },
  ];

  const dropdownSelect = (key: string) => {
    switch (key) {
      case "refreshCurrent":
        refreshCurrentPage?.();
        break;
      case "closeCurrent":
        if (route.meta.isFixed) {
          message.warning("当前为固定tab，不可关闭");
          return;
        }
        tabStore.closeTab(route.fullPath);
        break;
      case "closeOther":
        tabStore.closeMultipleTab(route.fullPath);
        break;
      case "closeAll":
        tabStore.closeMultipleTab();
        router.push(INDEX_ROUTER.path);
        break;
    }
  };
</script>
