<template>
  <div class="ai-sidebar">
    <div class="ai-sidebar__tab">
      <span
        :class="[currIndex === index ? 'ai-sidebar__tab--active' : '']"
        v-for="(item, index) in tabTitle"
        :key="index"
        @click="changeTab(index)">
        {{ item }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AiSidebar',

  model: {
    prop: 'value',
    event: 'change'
  },

  props: {
    value: {
      type: Number,
      require: true,
      default: 0
    },
    tabTitle: {
      type: Array,
      default: () => [],
      required: true
    }
  },

  watch: {
    value (v) {
      if (v >= 0 && this.currIndex !== v) {
        this.currIndex = v
      }
    }
  },

  data() {
    return {
      currIndex: 0
    }
  },

  mounted () {
    if (this.value > 0) {
      this.currIndex = this.value
    }
  },

  methods: {
    changeTab(index) {
      this.currIndex = index
      this.$emit('change', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.ai-sidebar {
  position: fixed;
  margin-left: -20px;
  font-size: 14px;
  transform: translateX(-100%);

  .ai-sidebar__tab {
    min-width: 88px;
    overflow: hidden;

    span {
      display: block;
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      text-align: center;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0;
      color: #666666;
      cursor: pointer;
      border-right: 3px solid #D8DCE3;
    }

    .ai-sidebar__tab--active {
      border-right: 3px solid #1FBAD6;
      color: #1FBAD6;
    }
  }
}
</style>
