<template>
  <div class="card content-box">
    <span class="text"> 标签页操作 🍓🍇🍈🍉</span>
    <div class="mb30">
      <el-input v-model="tabsTitle" placeholder="请输入内容" style="width: 500px">
        <template #append>
          <el-button type="primary" @click="editTabsTitle"> 设置 Tab 标题 </el-button>
        </template>
      </el-input>
    </div>
    <el-space class="mb30">
      <el-button type="primary" :icon="Refresh" @click="refresh"> 刷新当前页 </el-button>
      <el-button type="primary" :icon="FullScreen" @click="maximize"> 当前页全屏切换 </el-button>
      <el-button type="primary" :icon="FullScreen" @click="closeOnSide('left')"> 关闭左侧标签页 </el-button>
      <el-button type="primary" :icon="FullScreen" @click="closeOnSide('right')"> 关闭右侧标签页 </el-button>
      <el-button type="primary" :icon="Remove" @click="closeCurrentTab"> 关闭当前页 </el-button>
      <el-button type="primary" :icon="CircleClose" @click="closeOtherTab"> 关闭其他 </el-button>
      <el-button type="primary" :icon="FolderDelete" @click="closeAllTab"> 全部关闭 </el-button>
    </el-space>
    <el-space class="mb30">
      <el-button type="info" :icon="Promotion" @click="handleToDetail('1')"> 打开详情页1 </el-button>
      <el-button type="info" :icon="Promotion" @click="handleToDetail('2')"> 打开详情页2 </el-button>
      <el-button type="info" :icon="Promotion" @click="handleToDetail('3')"> 打开详情页3 </el-button>
      <el-button type="info" :icon="Promotion" @click="handleToDetail('4')"> 打开详情页4 </el-button>
      <el-button type="info" :icon="Promotion" @click="handleToDetail('5')"> 打开详情页5 </el-button>
    </el-space>
  </div>
</template>

<script setup lang="ts" name="tabs">
import { inject, nextTick, ref } from "vue";
import { HOME_URL } from "@/config";
import { useRoute, useRouter } from "vue-router";
import { useTabsStore } from "@/stores/modules/tabs";
import { useGlobalStore } from "@/stores/modules/global";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { Refresh, FullScreen, Remove, CircleClose, FolderDelete, Promotion } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();
const tabStore = useTabsStore();
const globalStore = useGlobalStore();
const keepAliveStore = useKeepAliveStore();

// 刷新当前页
const refreshCurrentPage: Function = inject("refresh") as Function;
const refresh = () => {
  setTimeout(() => {
    route.meta.isKeepAlive && keepAliveStore.removeKeepAliveName(route.fullPath as string);
    refreshCurrentPage(false);
    nextTick(() => {
      route.meta.isKeepAlive && keepAliveStore.addKeepAliveName(route.fullPath as string);
      refreshCurrentPage(true);
    });
  }, 0);
};

// 设置 Tab 标题
const tabsTitle = ref("");
const editTabsTitle = () => {
  if (!tabsTitle.value) return ElMessage.warning("请输入标题");
  tabStore.setTabsTitle(tabsTitle.value);
};

// 当前页全屏
const maximize = () => {
  globalStore.setGlobalState("maximize", !globalStore.maximize);
};

// 关闭当前页
const closeCurrentTab = () => {
  if (route.meta.isAffix) return;
  tabStore.removeTabs(route.fullPath);
};

// 关闭其他
const closeOtherTab = () => {
  tabStore.closeMultipleTab(route.fullPath);
};

// 关闭两侧
const closeOnSide = (direction: "left" | "right") => {
  tabStore.closeTabsOnSide(route.fullPath, direction);
};

// 全部关闭
const closeAllTab = () => {
  tabStore.closeMultipleTab();
  router.push(HOME_URL);
};

// 打开详情页
const handleToDetail = (id: string) => {
  router.push(`/assembly/tabs/detail/${id}`);
};
</script>
