<template>
  <ul>
    <li @click="refresh">
      <el-icon><Refresh /></el-icon>刷新
    </li>
    <li @click="maximize">
      <el-icon><FullScreen /></el-icon>最大化
    </li>
    <li divided @click="closeCurrentTab" v-if="props.selectedTag.close">
      <el-icon><Remove /></el-icon>关闭当前
    </li>
    <li @click="closeLeftTags">
      <el-icon><DArrowLeft /></el-icon>关闭左侧
    </li>
    <li @click="closeRightTags">
      <el-icon><DArrowRight /></el-icon>关闭右侧
    </li>
    <li divided @click="closeOthersTags">
      <el-icon><CircleClose /></el-icon>关闭其它
    </li>
    <li @click="closeAllTab">
      <el-icon><FolderDelete /></el-icon>关闭全部
    </li>
  </ul>
</template>

<script setup>
  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';

  const route = useRoute();
  const router = useRouter();
  const tabStore = useTabsStore();
  const globalStore = useGlobalStore();
  const keepAliveStore = useKeepAliveStore();
  const props = defineProps({
    selectedTag: {
      type: [Object],
      default: null,
    },
  });
  // refresh current page
  const refreshCurrentPage = inject('refresh');
  const refresh = () => {
    router.push(props.selectedTag.path).then((res) => {
      route.meta.isKeepAlive && keepAliveStore.removeKeepAliveName(props.selectedTag.path);
      refreshCurrentPage(false);
      nextTick(() => {
        route.meta.isKeepAlive && keepAliveStore.addKeepAliveName(props.selectedTag.path);
        refreshCurrentPage(true);
      });
    });
  };

  // maximize current page
  const maximize = () => {
    router.push(props.selectedTag.path).then((res) => {
      globalStore.setGlobalState('maximize', true);
    });
  };
  const closeLeftTags = () => {
    router.push(props.selectedTag.path).then((res) => {
      tabStore.closeTabsOnSide(props.selectedTag.path, 'left');
    });
  };
  const closeRightTags = () => {
    router.push(props.selectedTag.path).then((res) => {
      tabStore.closeTabsOnSide(props.selectedTag.path, 'right');
    });
  };
  const closeOthersTags = () => {
    router.push(props.selectedTag.path).then((res) => {
      tabStore.closeMultipleTab(props.selectedTag.path);
    });
  };
  // Close Current
  const closeCurrentTab = () => {
    if (!props.selectedTag.close) return;
    console.log('props.selectedTag.path', props.selectedTag.path);
    tabStore.removeTabs(props.selectedTag.path);
  };

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

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