<template>
  <div class="flex pl-4 app-tabs bg-body">
    <div class="flex-1 min-w-0 menu">
      <div v-for="(item, index) in tabsLists" class="tab-pan" :class="{ act: (currentRoute == item.path) }">
        <span v-show="currentRoute == item.path" class="dot"></span>
        <span @click="handleChanges(item.fullPath)">{{ item.title }}</span>
        <el-icon @click="delTab(item.fullPath)">
          <Close />
        </el-icon>
      </div>
    </div>
    <el-dropdown @command="handleCommand">
      <span class="flex items-center px-3">
        <icon :size="16" name="el-icon-arrow-down" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="closeCurrent">关闭当前</el-dropdown-item>
          <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
          <el-dropdown-item command="closeAll">关闭全部</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
  
<script setup lang="ts">
import useMultipleTabs from "@/hooks/useMultipleTabs";
import { useWatchRoute } from "@/hooks/useWatchRoute";
import useTabsStore, { getRouteParams } from "@/stores/modules/multipleTabs";
const router = useRouter();
const route = useRoute();
const tabsStore = useTabsStore();
const {
  removeOtherTab,
  addTab,
  removeAllTab,
  removeTab,
  tabsLists,
  currentTab,
} = useMultipleTabs();
useWatchRoute(() => {
  addTab();
});

const handleChange = (fullPath: any) => {
  const tabItem = tabsStore.tasMap[fullPath];
  router.push(getRouteParams(tabItem));
};
const handleChanges = (fullPath: any) => {
  const tabItem = tabsStore.tasMap[fullPath];
  router.push(getRouteParams(tabItem));
};

const delTab = (fullPath, index) => {
  removeTab(fullPath);
  if (fullPath.includes(route.path)) {
    handleChanges(tabsLists.value[index].fullPath);
  }

};
const currentRoute = ref("");
watch(
  () => route.path,
  (newCount, oldCount) => {
    currentRoute.value = newCount;
  },
  {
    immediate: true,
    deep: true,
  }
);
const handleCommand = (command: any) => {
  switch (command) {
    case "closeCurrent":
      removeTab();
      break;
    case "closeOther":
      removeOtherTab();
      break;
    case "closeAll":
      removeAllTab();
      break;
  }
};
</script>
<style lang="scss" scoped>
.menu {
  display: flex;
  flex-wrap: wrap;
}

.tab-pan {
  padding: 5px 20px;
  cursor: pointer;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.act {
  background-color: #edefff;
  color: rgb(128, 142, 255);
}

.dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #4a5dff;
  border-radius: 5px;
  margin-right: 5px;
  // font-size: 30px;
}
</style>
  