<template>
  <div class="top_tag">
    <el-tabs
      v-model="active"
      :closable="tagList.length !== 1"
      type="card"
      @contextmenu="handleContextmenu"
      @tab-click="openTag"
      @tab-remove="removeTag"
    >
      <el-tab-pane v-for="item in tagList" :key="item.value" :label="item.label" :name="item.value" />
    </el-tabs>
    <el-dropdown class="top_tag__menu">
      <el-button>
        更多
        <el-icon><ArrowDown /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="closeOthersTags">关闭其他</el-dropdown-item>
          <el-dropdown-item @click="closeAllTags">关闭全部</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { useGetters } from "@/hooks/storeHooks";
import { ArrowDown } from "@element-plus/icons-vue";

const router = useRouter();
const store = useStore();
const { tagWel, tagList, tag, website } = useGetters(["tagWel", "tagList", "tag", "website"]);
const active = computed(() => tag.value.value);

// 右键点击事件
const handleContextmenu = () => {
  console.log(1);
};

// 点击事件
const openTag = (item: any) => {
  router.push(item.props.name);
};

// 删除事件
const removeTag = (name: string) => {
  const { foundTag, key } = findTag(name);
  store.commit("DEL_TAG", foundTag);
  if (foundTag.value === tag.value.value) {
    router.push(tagList.value[key === 0 ? key : key - 1].value);
  }
};

// 关闭其他
const closeOthersTags = () => {
  store.commit("DEL_TAG_OTHER");
};

// 关闭所有
const closeAllTags = () => {
  store.commit("DEL_ALL_TAG");
  nextTick(() => {
    router.push(tagWel.value.value);
  });
};

const findTag = (value: string) => {
  let foundTag: any, key: any;
  tagList.value.map((item: any, index: number) => {
    if (item.value === value) {
      foundTag = item;
      key = index;
    }
  });
  return { foundTag, key };
};
</script>

<style lang="scss" scoped>
.top_tag {
  user-select: none;
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  margin-left: 200px;
  height: 40px;
  padding-right: 106px;
  :deep(.el-tabs--card) {
    .el-tabs__header {
      border: none;
    }
    .el-tabs__header {
      .el-tabs__item {
        border: none;
        margin: 0 3px;
        height: 40px;
        font-size: 14px;
        line-height: 40px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #000000;
        &.is-active {
          color: #4069f2;
          border-bottom: 4px solid #4069f2;
        }
      }
      .el-tabs__nav {
        border: none;
      }
    }
  }
  &__menu {
    position: absolute !important;
    top: 3px;
    right: 0;
    padding: 1px 0 0 15px;
    box-sizing: border-box;

    .el-button {
      background: rgba(52, 112, 255, 0.1);
      border: 1px solid #3470ff;
      color: #4069f2;
      margin-right: 17px;
    }
  }
}
</style>
