<template>
  <div>
    <i class="el-icon-back" v-show="showIcon" style="left: 0" @click="a(0)"></i>
    <div
      :style="{ 'margin-left': ml + 'px' }"
      :class="!showIcon ? 'p20 app-tag' : 'app-tag'"
    >
      <div style="white-space: nowrap" ref="tags">
        <el-tag
          closable
          size="medium"
          v-for="(tag, index) in tags"
          :key="tag.name"
          :disable-transitions="true"
          effect="plain"
          @close="handleClose(tag, index)"
          @click="handleClick(tag)"
          :class="$route.path === '/' + tag.name ? 'c' : 'o'"
        >
          {{ tag.meta.title }}
        </el-tag>
      </div>
    </div>
    <i
      class="el-icon-right"
      v-show="showIcon"
      @click="a(1)"
      style="right: .875rem"
    ></i>
    <div class="closeBtn">
      <el-link
        type="primary"
        :underline="false"
        @click="
          closeAll();
          tags = [];
        "
        v-show="tags.length != 0"
        >一键关闭</el-link
      >
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "app-tag",
  data() {
    return {
      leftNot: false,
      rightNot: false,
      ml: 0,
      showIcon: false,
      tags: [],
    };
  },
  created() {
    //stateTagsList是state.js中的存放tags数组的key，stateTagsList的值默认为空数组
    this.tags = this.stateTagsList;
  },

  computed: {
    ...mapState(["stateTagsList"]),
  },
  mounted() {
    this.rightNot = false;
    if (this.$refs.tags.clientWidth > window.innerWidth - 380) {
      this.control(1);
    } else {
      this.control(0);
    }
  },
  watch: {
    stateTagsList(newval, oldval) {
      this.$nextTick(() => {
        this.tags = newval;
        if (this.$refs.tags.clientWidth > window.innerWidth - 380) {
          this.control(1);
        } else {
          this.control(0);
        }
      });
    },
  },
  methods: {
    a(val) {
      if (val == 1) {
        if (this.rightNot) return;
        let dis = this.$refs.tags.clientWidth - (window.innerWidth - 380);
        this.leftNot = false;
        if (dis + this.ml < 240) {
          this.ml = -dis;
          this.rightNot = true;
          return;
        }
        this.ml -= 240;
      } else {
        if (this.leftNot) return;
        this.ml += 240;
        this.rightNot = false;
        if (this.ml > 0) {
          this.ml = 0;
          this.leftNot = true;
        }
      }
    },
    control(val) {
      this.showIcon = val;
    },
    ...mapMutations({
      closeAll: "mutationCloseAll",
      close: "mutationCloseTag",
    }),
    handleClose(tag, index) {
      if (this.tags.length === 1) {
        // 如果只有一个标签则不能关闭
        return;
      }
      if (this.ml < -239) {
        this.ml += 240;
      } else {
        this.ml = 0;
      }
      this.close(tag); // 删除当前tag
      if (this.$router.path === tag.name) {
        // 如果关闭的标签不是当前路由的话，不做路由跳转
        return;
      } else {
        if (index === this.tags.length - 1) {
          // 关闭最后一个标签,则路由跳转至最后一个
          this.$router.push(this.tags[index].name);
        } else {
          // 路由跳转至下一个标签页
          if (index === 0) {
            this.$router.push(this.tags[0].name);
          } else {
            this.$router.push(this.tags[index - 1].name);
          }
        }
      }
    },
    // 点击tags具体标签
    handleClick(tag) {
      this.$router.push(tag.name);
      let mk = tag.name.split("-")[0];
      switch (mk) {
        case "energy":
          this.$store.state.currentMenuIndex = 2;
          break;
             case "devices":
          this.$store.state.currentMenuIndex = 6;
          break;
        case "space":
          this.$store.state.currentMenuIndex = 3;
          break;
        case "oas":
          this.$store.state.currentMenuIndex = 4;
          break;
        case "payment":
          this.$store.state.currentMenuIndex = 4;
          break;
        case "sys":
          this.$store.state.currentMenuIndex = 5;
          break;
        case "carbon":
          this.$store.state.currentMenuIndex = 7;
          break;
      }
      this.$store.state.erjismenu =
        this.$store.state.sidebarMenuList[
          this.$store.state.currentMenuIndex
        ].children;
      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
        (item) => item.meta.title === tag.meta.title
      )[0];
      this.$store.state.currentMenuId = route.meta.menuId;
      localStorage.setItem("currentMenuId", route.meta.menuId);
    },
  },
};
</script>

<style lang="scss" scoped>
i {
  min-width: 0.625rem;
  font-size: 0.225rem;
  text-align: center;
  color: #5a5858;
  position: absolute;
  top: 0;
  background: #fff;
  z-index: 12;
  height: 48px;
  line-height: 48px;
}
.app-tag {
  display: flex;
  overflow: hidden;
  padding: 0 2rem 0 0.625rem;
  &.p20 {
    padding: 0 0.25rem;
  }

  .el-tag {
    height: 0.4rem;
    line-height: 0.375rem;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e6e7ea;
    padding: 0 0.15rem;
    cursor: pointer;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2e69eb;
    font-size: 0.175rem;
    margin: 0 2px;
    &.c {
      color: #000;
    }
  }
}
.closeBtn{
    position: absolute;
    width: 70px;
    height: 48px;
    right: 0;
    background: #ffffff;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
    display: flex;
  }
.el-tag--plain .el-tag__close {
  color: #2e69eb;
}
</style>
