<template>
  <div class="comp-content">
    <div class="tag-list">
      <div
        v-for="(item) in tagList"
        :key="item.path"
        :class="['tag-item', { index: item.path === '/', active: item.path === activePath }]"
        @click="goPageFun(item)"
      >
        <span>{{ $t(`菜单.${item.title}`) }}</span>
        <span v-if="item.path !== '/'" class="icon" @click.stop="closeFun(item)">
          <el-icon :size="16"><Close /></el-icon>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { CommonStore } from '@/stores/common';

const router = useRouter();
const store = CommonStore();
const activePath = ref(store.currentPagePath);
const tagList = ref(store.alivePages);

watch(() => store.currentPagePath, (path) => {
  activePath.value = path;
});

const goPageFun = (data: any) => {
  router.push({
    path: data.path,
  });
};

const closeFun = (data: any) => {
  store.removeAlivePage(data);
  if (data.path === activePath.value) {
    const newPathData = tagList.value[tagList.value.length - 1];
    if (newPathData) {
      goPageFun(newPathData);
    }
  }
};
</script>

<style lang="scss" scoped>
.comp-content {
  width: 100%;
  height: 100%;
  padding-top: 10px;
 .tag-list {
  display: flex;
  height: 34px;
  padding: 0 16px;
  overflow-x: auto;
  .tag-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: var(--font-size-text-normal);
    color: var(--el-text-color-primary);
    border-radius: var(--border-radius-normal) var(--border-radius-normal) 0 0;
    padding: 0 var(--padding-normal);
    margin: 0 var(--margin-tiny);
    background-color: var(--el-bg-color);
    transition: all 0.3s;
    cursor: pointer;
    &.active {
      color: var(--el-color-primary);
      background-color: var(--el-bg-color-page);
    }
    &:hover {
      &:not(.index) {
        padding-right: var(--padding-huge);
        .icon {
          display: flex;
        }
      }
    }
    .icon {
      position: absolute;
      top: 10px;
      right: 8px;
      display: none;
      align-items: center;
      justify-content: center;
      margin-left: var(--margin-small);
      cursor: pointer;
    }
  }
 }
}
</style>
