<template>
  <div>
    <div class="jl-tabs" ref="body">
      <span
        v-for="(value, index) in data"
        ref="tab"
        :key="index"
        :class="{ 'jl-tab': true, active: active === index }"
        @click="change(index, $event)"
        >{{ value }}</span
      >
      <div :class="lineClass" :style="lineStyle"></div>
    </div>
    <div class="jl-tabs float" v-show="fixedShow">
      <span
        v-for="(value, index) in data"
        :key="index"
        class="jl-tab"
        :class="{ 'jl-tab': true, active: active === index }"
        @click="change(index, $event)"
        ref="tab"
        >{{ value }}</span
      >
      <div :class="lineClass" :style="lineStyle"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    fixedShow: {
      type: Boolean,
      default: false,
    },
    maxFixed: { type: Number },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      active: 0,
      lineWidth: 0,
      lineLeft: 0,
      mounted: false,
      activeStatus: false
    };
  },
  mounted() {
    this.initLine();
  },
  computed: {
    lineStyle() {
      return { width: `${this.lineWidth}px`, left: `${this.lineLeft}px` };
    },
    lineClass() {
      return {
        line: true,
        mounted: this.mounted,
      };
    },
  },
  methods: {
    initLine() {
      if (this.data.length > 0) {
        this.$nextTick(() => {
          this.lineWidth = this.$refs.tab[0].clientWidth;
          this.lineLeft = this.$refs.tab[0].offsetLeft;
          setTimeout(() => {
            this.mounted = true;
          }, 20);
        });
      }
    },
    change(val) {
      if (val === this.active) {
        return;
      }
      this.active = val;
      this.activeStatus = true
      setTimeout(() => {
        this.activeStatus = false
      }, 500)
      this.$emit("change", this.data[val]);
      if (this.fixed && this.fixedShow) {
        this.$refs.body.scrollIntoView(true);
      }
    },
    tabNum(index){
      if(this.active === index)return
      this.active = index;
    }
  },
  watch: {
    data() {
      this.initLine();
    },
    active(val){
      const tab = this.$refs.tab[val]
      this.lineWidth = tab.clientWidth;
      this.lineLeft = tab.offsetLeft;
    }
  },
};
</script>

<style scoped>
.jl-tabs {
  width: 1000px;
  background-color: #fff;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}
.jl-tab {
  padding: 20px 21px 18px 21px;
  display: inline-block;
  font-size: 18px;
  letter-spacing: 0;
  text-align: center;
  color: #333333;
  margin-right: 45px;
  cursor: pointer;
}
.jl-tab.active {
  color: #5aa0fa;
}
.jl-tabs .jl-tab:last-of-type {
  margin-right: 0px;
}
.jl-tabs .line {
  height: 4px;
  background: #5aa0fa;
  position: absolute;
  bottom: 0;
}
.jl-tabs .line.mounted {
  transition: left 0.5s;
}
.jl-tabs.float {
  position: fixed;
  top: 0;
  z-index: 2000;
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
</style>
