<template>
  <div id="tabberList">
    <div
      class="btnMove"
      v-if="showBtn"
      @mousedown="leftMoveStart"
      @mouseup="leftMoveEnd"
    >
      <i class="el-icon-arrow-left"></i>
    </div>
    <div class="listBox" ref="barparent">
      <div
        class="listChildren"
        v-for="(item, index) in tabberLists"
        :key="index"
        :class="item.path === navActive ? 'activeListChildren' : ''"
        @click="changeActive(item)"
      >
        {{ item.title }}
        <i
          class="el-icon-close"
          v-if="item.path !== '/home'"
          @click.stop="close(item, index)"
        ></i>
      </div>
    </div>

    <div
      class="btnMove"
      v-if="showBtn"
      @mousedown="rightMoveStart"
      @mouseup="rightMoveEnd"
    >
      <i class="el-icon-arrow-right"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBtn: false,
      navActive: this.$store.getters.navActive,
    };
  },
  computed: {
    tabberLists: function () {
      return this.$store.state.tabberLists;
    },
  },
  watch: {
    "$store.getters.navActive"(newval, olval) {
      new Promise((resolve, reject) => {
        this.navActive = newval;
        resolve();
      }).then(() => {
        setTimeout(() => {
          this.watchChangeStatus();
        }, 100);
      });
    },
    "$store.getters.tabberLists"(newval, olval) {
      this.$nextTick(() => {
        this.changeLists();
      });
    },
  },
  mounted() {
    this.changeLists();
    setTimeout(() => {
      this.watchChangeStatus();
    }, 100);
  },
  methods: {
    changeLists() {
      if (this.$refs.barparent.offsetWidth < this.$refs.barparent.scrollWidth) {
        this.showBtn = true;
      } else {
        this.showBtn = false;
      }
    },
    // 选中状态变化触发
    watchChangeStatus() {
      if (
        document.querySelector(".activeListChildren") === null &&
        document.querySelector(".activeListChildren") === null
      ) {
      } else {
        var eOffsetLeft = document.querySelector(".activeListChildren")
          .offsetLeft;
        var eOffsetWidth = document.querySelector(".activeListChildren")
          .offsetWidth;
      }

      var pyl =
        this.$refs.barparent.scrollLeft + this.$refs.barparent.offsetWidth;
      var cyl = eOffsetLeft + eOffsetWidth;
      var syl = this.$refs.barparent.scrollLeft;
      if (cyl > pyl) {
        this.$refs.barparent.scrollLeft += cyl - pyl + eOffsetWidth / 2;
      }
      if (syl > eOffsetLeft) {
        this.$refs.barparent.scrollLeft -= syl - eOffsetLeft + eOffsetWidth / 2;
      }
    },
    // 左右标鼠标事件---start
    leftMoveStart() {
      var self = this;
      this.leftM = setInterval(() => {
        self.$refs.barparent.scrollLeft -= 4;
      }, 10);
    },
    leftMoveEnd() {
      clearInterval(this.leftM);
    },
    rightMoveStart() {
      var self = this;
      this.rightM = setInterval(() => {
        self.$refs.barparent.scrollLeft += 4;
      }, 10);
    },
    rightMoveEnd() {
      clearInterval(this.rightM);
    },
    leftMove() {
      if (this.$refs.barparent.scrollLeft === 0) {
      } else {
        this.$refs.barparent.scrollLeft -= 40;
      }
    },
    rightMove() {
      this.$refs.barparent.scrollLeft += 40;
    },
    // 左右标鼠标事件---end

    //点击跳转路由
    changeActive(v) {
      this.$router.push({
        path: v.path,
      });
    },
    //关闭
    close(i, v) {
      var data = {
        item: i,
        index: v,
        path: this.$route.path,
      };
      this.$store.commit("delTabberLists", data);
    },
  },
};
</script>

<style lang="less" scoped>
#tabberList {
  height: 40px;
  background-color: #fff;
  padding: 0px 16px;
  box-shadow: 0px 3px 5px 0px rgba(28, 41, 90, 0.05);
  display: flex;
  align-items: center;
  width: 100%;
  // overflow-x: auto;
  .btnMove {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #e3edfe;
    cursor: pointer;
    text-align: center;
    line-height: 28px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
  }
  .listBox {
    display: flex;
    align-items: center;
    width: 100%;
    overflow-x: auto;
    margin: 0px 10px;
    height: 100%;
    transition: all 0.4s;
    position: relative;
    &::-webkit-scrollbar {
      display: none;
    }
    .listChildren {
      display: flex;
      align-items: center;
      background-color: #fff;
      height: 100%;
      border-radius: 8px 8px 0px 0px;
      padding: 0px 14px;
      line-height: 100%;
      color: #999;
      font-size: 16px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.3s;
      i {
        font-size: 12px;
        margin-left: 16px;
        color: #999 !important;
      }
      &:hover{
      background-color: #e3edfe;

      }
    }
    .activeListChildren {
      background-color: #e3edfe;
      color: #2f4379;
    }
  }
}
</style>
