<template>
  <div class="tags-list">
    <el-tabs v-model="cruuentTab" class="main-tabs" closable @tab-remove="closeTags" @tab-click="navTo">
      <el-tab-pane v-for="item in tagsList" :key="item.path" :label="item.title" :name="item.name">
        <template #label>
          <div class="custom-tabs-label">
            <el-icon @click="reload" :size="12">
              <refresh />
            </el-icon>
            <span class="lable-text">{{ item.title }}</span>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <el-dropdown class="action-btns" @command="handleTags">
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="other">关闭其他</el-dropdown-item>
          <el-dropdown-item command="all">关闭所有</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { inject, onMounted, ref } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
let tagsList = ref([]);
const cruuentTab = ref("");

const reload = inject("reload");
const $route = useRoute();
const $router = useRouter();
const $store = useStore();
onBeforeRouteUpdate((to) => {
  setTags(to);
});
onMounted(() => {
  setTags($route);
});

const closeTags = (name) => {
  let tags = tagsList.value;
  let index = -1;
  tags.map((item, idx) => {
    if (item.name == name) {
      index = idx;
    }
  });
  tagsList.value.splice(index, 1);
  $store.commit('outTagList', name)
  const item = tags[index] ? tags[index] : tags[index - 1];
  if (item) {
    $router.push(item.path);
  } else {
    $router.push("/");
  }
};
const setTags = (routeObj) => {
  let isExist = -1;
  tagsList.value.map((item, index) => {
    if (item.name === routeObj.name) {
      isExist = index;
    }
  });
  if (isExist == -1) {
    const sideList = $store.state.sideList;
    let title = sideList.get(routeObj.name);
    tagsList.value.push({
      title: title || routeObj.meta.title,
      path: routeObj.fullPath,
      name: routeObj.name,
      params: routeObj.query,
      route: routeObj.path,
    });
    cruuentTab.value = routeObj.name;
    $store.commit('inputTagList', routeObj.name)
  } else {
    tagsList.value[isExist].params = routeObj.query;
    cruuentTab.value = routeObj.name;
  }
};
const navTo = (to) => {
  let tags = tagsList.value;
  tags.map((item, idx) => {
    if (item.name == to.paneName) {
      $router.push({ path: item.route, query: item.params });
      cruuentTab.value = item.name;
    }
  });
};
const handleTags = (command) => {
  command === "other" ? closeOther() : closeAll();
};
const closeAll = () => {
  tagsList.value.map(item => {
    $store.commit('outTagList', item.name)
  })
  tagsList.value = [];
  $router.push("/");
};
const closeOther = () => {
  const curItem = tagsList.value.filter((item) => {
    return item.path === $route.fullPath;
  });
  tagsList.value.map(item => {
    if (item.name != $route.name) {
      $store.commit('outTagList', item.name)
    }
  })
  tagsList.value = curItem;
};
</script>

<style lang="scss" scoped>
.tags-list {
  align-items: center;
  padding: 0 var(--spacing-sm);
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  height: 100%;
}

.action-btns {
  flex-shrink: 0;
  margin-left: var(--spacing-xs);

  :deep(.el-icon--right) {
    width: 1.6em;
    height: 1.6em;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-left: 0;
    cursor: pointer;
  }
}

.main-tabs {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;

  :deep(.el-tabs__header) {
    margin-bottom: 0;
    border-bottom: none;

    .el-tabs__nav-prev,
    .el-tabs__nav-next {
      font-size: 12px;
      line-height: 26px;
    }

    .el-tabs__nav-wrap:after {
      background-color: transparent;
    }

    .el-tabs__item {
      background-color: var(--color-bg-card);
      border: 1px solid var(--color-border-light);
      margin-left: 0;
      margin-right: 6px;
      padding: 0 8px;
      height: 26px;
      line-height: 26px;
      font-size: var(--font-size-xs);
      border-radius: var(--radius-sm);
    }

    .el-tabs__item.is-active {
      color: var(--color-primary);
      border-color: var(--color-primary-bg);
      background: var(--color-primary-bg);
    }

    .el-tabs__active-bar {
      background-color: transparent;
    }

    .custom-tabs-label {
      display: inline-flex;
      align-items: center;

      .lable-text {
        margin-left: 3px;
      }
    }
  }
}
</style>
