<template>
  <div class="dsk-tab-toggle">
    <!-- tab列表 -->
    <div class="dsk-tab-items-container">
      <div class="dsk-tab-items-container-inner">
        <div class="dsk-tab-item" v-for="item of tabs" :key="item.id"
          :class="{'tab-current' : item.value == currentValue,'tab-is-disabled' : item.disabled || comDisabled}">
          <div class="dsk-tab-item-name" @click="item.disabled || comDisabled ? '' : tabChoose(item)">{{item.name}}</div>
        </div>
        <!-- 下滑条 -->
        <div class="dsk-tab-sliding-bar" v-if="tabs.length && this.showTabsSlidingbar && !comDisabled"
          :style="{width : `${silidingBarWidth}px`,transform : `translateX(${silidingBarLeft}px)`}">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "dskTabToggle",
  props: {
    currentValue: {
      required: true,
      type: [String, Number]
    },
    tabs: {
      required: true,
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    currentValue: {
      handler(newValue) {
        this.initSlidingBar();
      }
    },
    // 全部禁用不显示滚动条
    disabled: {
      handler(newValue) {
        this.comDisabled = newValue ? true : false;
      }
    }
  },
  model: {
    prop: "currentValue",
    event: "currentTabChange"
  },
  data() {
    return {
      silidingBarLeft: 0,
      silidingBarWidth: 0,
      comDisabled: this.disabled ? true : false
    };
  },
  //可访问data属性
  created() {
    this.initSlidingBar();
  },
  //计算集
  computed: {
    showTabsSlidingbar() {
      const current = this.tabs.find(item => item.value == this.currentValue);
      if (current) {
        return current.disabled ? false : true;
      }
      return false;
    }
  },
  //方法集
  methods: {
    async initSlidingBar() {
      try {
        await this.$nextTick();
        const current = document.querySelector(".tab-current");
        if (current) {
          const text = current.querySelector(".dsk-tab-item-name");
          const width = text.offsetWidth;
          const boxOffsetLeft = current.offsetLeft;
          const textOffsetLeft = text.offsetLeft;
          this.silidingBarWidth = width;
          this.silidingBarLeft = boxOffsetLeft + textOffsetLeft;
        }
      } catch (error) {

      }
    },
    tabChoose(item) {
      if (item.value == this.currentValue) return;
      this.$emit("currentTabChange", item.value);
      this.$emit("tabToggle", item.value);
      this.initSlidingBar();
    }
  },
}
</script>
<style lang="scss" scoped>
.dsk-tab-toggle {
  width: 100%;
  height: 48px;
  border-bottom: 1px solid #eeeeee;
  background: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-sizing: border-box;

  .dsk-tab-items-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .dsk-tab-items-container-inner {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: auto;
      box-sizing: border-box;
      position: relative;

      .dsk-tab-item {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0px 16px;
        box-sizing: border-box;
        position: relative;
        .dsk-tab-item-name {
          cursor: pointer;
          color: #232323;
          font-size: 16px;
        }

        &.tab-current {
          .dsk-tab-item-name {
            color: #0081ff;
            font-weight: bold;
          }
        }

        &.tab-is-disabled {
          .dsk-tab-item-name {
            color: #eee;
            cursor: not-allowed;
          }
        }
      }

      .dsk-tab-sliding-bar {
        position: absolute;
        left: 0px;
        bottom: 0px;
        height: 2px;
        background: #0081ff;
        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
    }
  }
}
</style>
