<template>
  <!--  <el-breadcrumb class="app-breadcrumb" separator="/">-->
  <!--    <transition-group name="breadcrumb">-->
  <!--      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">-->
  <!--        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>-->
  <!--        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>-->
  <!--      </el-breadcrumb-item>-->
  <!--    </transition-group>-->
  <!--  </el-breadcrumb>-->
  <div>
    <el-tag
      @click="toPath(tag)"
      @close="close(tag)"
      style="margin-top: 20px;margin-right: 10px;cursor: pointer"
      v-for="tag in keepList"
      :key="tag.name"
      closable
      :type="activeMenu(tag)"
    >
      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script>

export default {
  data() {
    return {
      levelList: null
    }
  },
  computed: {
    keepList() {
      return this.$store.state.user.keepList
    }

  },
  watch: {
    // 监听计算属性的变化
    keepList: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length >= 12) {
          this.$store.commit('user/REMOVE_TAB_BY_PATH', newVal[0].path)
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getBreadcrumb()
  },
  methods: {
    activeMenu(tag) {
      console.log(this.$route, tag, 'this.$route.name')
      return this.$route.name === tag.path ? 'danger' : ''
    },
    close(tag) {
      // 使用 mutation 直接删除
      this.$store.commit('user/REMOVE_TAB_BY_PATH', tag.path)
      if (this.$route.name === tag.path) {
        if (this.keepList.length > 0) this.toPath(this.keepList[this.keepList.length - 1])
      }
    },
    toPath(tag) {
      this.$router.push({
        name: tag.path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 72px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>
