<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>
