<template>
  <div class="navigation-box">
    <el-tabs
      type="card"
      v-model="activeIndex"
      closable
      @tab-click="tabClick"
      @tab-remove="tabRemove"
    >
      <el-tab-pane
        :key="index"
        v-for="(item, index) in openTab"
        :label="item.name"
        :name="item.route"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
    // 刷新时以当前路由做为tab加入tabs
    // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
    // 当当前路由是首页时，添加首页到store，并设置激活状态
    if (this.$route.path !== "/" && this.$route.path !== "/panel") {
      this.$store.dispatch("setTabs/add_tabs", { route: "/panel", name: "首页" })
      this.$store.dispatch("setTabs/add_tabs", {
        route: this.$route.path,
        name: this.$route.name,
      });
      this.$store.dispatch("setTabs/set_active_index", this.$route.path)
    } else {
      this.$store.dispatch("setTabs/add_tabs", { route: "/panel", name: "首页" })
      this.$store.dispatch("setTabs/set_active_index", "/panel")
    }
  },
  computed: {
    openTab() {
      return this.$store.state.setTabs.openTab;
    },
    activeIndex: {
      get() {
        return this.$store.state.setTabs.activeIndex;
      },
      set(val) {
        this.$store.dispatch("setTabs/set_active_index", val);
      },
    },
  },
  watch: {
    $route(to, from) {
      //判断路由是否已经打开
      //已经打开的 ，将其置为active
      //未打开的，将其放入队列里
      let flag = false;
      for (let item of this.openTab) {
        if (item.name === to.name) {
          this.$store.dispatch("setTabs/set_active_index", to.path);
          flag = true;
          break;
        }
      }

      if (!flag) {
        console.log("to.path", to.path);
        this.$store.dispatch("setTabs/add_tabs", { route: to.path, name: to.name });
        this.$store.dispatch("setTabs/set_active_index", to.path);
      }
    },
  },
  methods: {
    //tab标签点击时，切换相应的路由
    tabClick(tab) {
      this.$router.push({ path: this.activeIndex });
    },
    //移除tab标签
    tabRemove(targetName) {
      //首页不删
      if (targetName == "/" || targetName == "/panel") {
        return;
      }
      this.$store.dispatch("setTabs/delete_tabs", targetName);
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.openTab && this.openTab.length >= 1) {
          this.$store.dispatch(
            "setTabs/set_active_index",
            this.openTab[this.openTab.length - 1].route
          );
          this.$router.push({ path: this.activeIndex });
        } else {
          this.$router.push({ path: "/" });
        }
      }
    },
  },
};
</script>
<style lang="less">
.navigation-box {
  .el-tabs__nav .el-tabs__item:nth-child(1) span {
    display: none;
  }
}
</style>