<template>
  <div class="tabs" ref="tabs">
    <ul ref="list">
      <template v-for="(item, index) in items">
        <!-- " -->
        <li
          v-if="item.permission"
          :key="index + 'true'"
          v-show="index >= start || (index >= start && index < start + num)"
        >
          <a
            class="tab-span"
            :to="item.to"
            :class="{ active: current.indexOf(item.to) == 0 }"
            >{{ item.label }}</a
          >
        </li>
        <li
          v-else
          :key="index + 'false'"
          v-show="index >= start || (index >= start && index < start + num)"
        >
          <a
            class="tab-span"
            :to="item.to"
            :class="{ active: current.indexOf(item.to) == 0 }"
            >{{ item.label }}</a
          >
        </li>
      </template>
    </ul>
    <div class="buttons" v-if="showButton">
      <div class="button prev" @click="prev"></div>
      <div class="button next" @click="next"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sen-tabs",
  props: {
    items: {
      type: Array,
      required: true,
    },
    current: {
      type: String,
    },
  },
  data() {
    return {
      start: 0,
      num: this.items.length,
      showButton: false, // 是否显示按钮
      minStart: 2, // 最小开始位置
    };
  },
  mounted() {
    this.onResize();
    window.addEventListener("resize", this.onResize);
  },
  unmounted() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize() {
      const list = this.$refs.list;
      const width = this.$refs.tabs.offsetWidth - (16 + 48) * 2; // 最大可显示宽度
      let childrenWidth = 0; // 子元素宽度总和
      const padding = 16;
      //this.num = this.items.length
      //this.$nextTick(() => {
      const children = list.querySelectorAll("li");
      for (let i = 0; i < children.length; i++) {
        const rect = children[i].getBoundingClientRect();
        childrenWidth += rect.right - rect.left + padding;
      }
      this.showButton = childrenWidth > width; // 子元素宽度超出最大可见，显示按钮
      if (!this.showButton) {
        this.start = 0;
      }
      childrenWidth = 0;
      for (let i = children.length - 1; i >= 0; i--) {
        const rect = children[i].getBoundingClientRect();
        if (
          childrenWidth + (rect.right - rect.left) + padding <=
          width - (this.showButton ? (16 + 48) * 2 : 0)
        ) {
          childrenWidth += rect.right - rect.left + padding;
          this.minStart = i;
        }
      }
      childrenWidth = 0;
      for (let i = 0; i < children.length; i++) {
        const rect = children[i].getBoundingClientRect();
        if (childrenWidth + (rect.right - rect.left) + padding <= width) {
          childrenWidth += rect.right - rect.left + padding;
          this.num = i + 1;
        }
      }
      //})
    },
    showTab() {
      const list = this.$refs.list;
      const width = this.$refs.tabs.offsetWidth - (16 + 48) * 2;
      let childrenWidth = 0;
      const padding = 16;
      const children = list.querySelectorAll("li");
      for (let i = this.start; i < children.length; i++) {
        const rect = children[i].getBoundingClientRect();
        if (childrenWidth + (rect.right - rect.left) + padding <= width) {
          childrenWidth += rect.right - rect.left + padding;
          this.num = i + 1;
        }
      }
    },
    prev() {
      this.start = Math.max(0, this.start - 1);
      this.showTab();
    },
    next() {
      this.start = Math.min(
        this.minStart,
        Math.min(this.items.length - 1, this.start + 1)
      );
      this.showTab();
    },
  },
};
</script>
<style lang="scss" scoped>
@function px($px) {
  @return $px + px;
}

$padding-medium: 16;
$font-size-medium: 16;
$color-white: #ffffff;
$border-radius-base: 8;
$font-weight-primary: 500;
.tabs {
  display: flex;
  margin-bottom: px($padding-medium);
  ul {
    list-style: none;
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: px($padding-medium);
    //padding-right: px(14);
    li {
      //flex-basis: (100% / 7);
      display: inline;
      flex-shrink: 0;
      height: px(48);
      position: relative;
      //   margin-right: px($padding-medium);
      a {
        //position: absolute;
        //left: 0;
        //top: 0;
        //width: 100%;
        display: inline-block;
        padding: 0 px(8);
        min-width: px(145);
        box-sizing: border-box;
        //right: px(10);
        text-align: center;
        //height: px(44);
        height: px(48);
        line-height: px(48);
        font-size: px($font-size-medium);
        //background-color: #E5EAEE;
        //color: #464E5F;
        background-color: $color-white;
        border-radius: px($border-radius-base);
        color: #606266;
        transition: all 0.2s;
        //font-weight: $font-weight-secondary;
        font-weight: $font-weight-primary;
        //border-top-left-radius: px($border-radius-base);
        //border-top-right-radius: px($border-radius-base);
        &.active {
          //padding-top: px(4);
          //background-color: #FFFFFF;
          color: #5189fb;
          background-color: #dde8ff;
        }
      }
    }
  }
  .buttons {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    .button {
      position: relative;
      width: px(48);
      height: px(48);
      background-color: $color-white;
      border-radius: px($border-radius-base);
      margin-left: px($padding-medium);
      cursor: pointer;
      &:before,
      &:after {
        position: absolute;
        top: 0;
        bottom: 0;
        width: px(8);
        height: px(8);
        margin: auto;
        border-top: px(2) solid #d2d9e6;
        border-right: px(2) solid #d2d9e6;
        content: "";
      }
      &.prev {
        &:before,
        &:after {
          transform: rotate(-135deg);
        }
        &:before {
          left: px(16);
        }
        &:after {
          right: px(12);
        }
      }
      &.next {
        &:before,
        &:after {
          transform: rotate(45deg);
        }
        &:before {
          left: px(12);
        }
        &:after {
          right: px(16);
        }
      }
    }
  }
}
</style>