<template>
  <div class="tab">
    <span
      v-for="(item, i) in Items"
      :key="`tab-${i}`"
      @click="index = i"
      :class="{ curr: index === i }"
      ref="tab"
    >
      {{ item }}
    </span>
    <div
      class="bar"
      :style="{
        transform: `translateX(${currTab.offsetLeft | 0}px)`,
        width: `${currTab.offsetWidth | 0}px`
      }"
    ></div>
  </div>
</template>
<script lang="ts">
import {
  Component,
  Vue,
  Prop,
  Emit,
  Model,
  Watch,
  PropSync
} from "vue-property-decorator";
@Component
export default class extends Vue {
  @PropSync("currIndex")
  private index!: number;
  @Prop()
  private titles!: any;
  private tabs: HTMLElement[] | null = null;
  mounted() {
    this.tabs = this.$refs.tab as HTMLElement[];
  }

  get currTab() {
    return this.tabs ? this.tabs[this.index] : {};
  }

  get Items() {
    if (this.titles instanceof Array) return this.titles;
    if (typeof this.titles === "string")
      return (this.titles as string).split(",");
    return [];
  }
}
</script>
<style lang="scss" scoped>
.tab {
  border-bottom: 1px solid #e4e7ed;
  padding: 1rem;
  position: relative;
  span {
    font-size: 1.6rem;
    font-weight: bolder;
    color: rgb(51, 51, 51);
    margin-right: 40px;
    cursor: pointer;
    &.hover,
    &.curr {
      color: #fd5522;
    }
  }
  .bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.2rem;
    background: #fd5522;
    transition: all 0.5s;
  }
}
</style>
