<template>
  <ul class="tab-content">
    <li
      v-for="(item, index) in data"
      :class="indexActive === index && 'active'"
      :key="index"
      @click="tabChanges(item, index)"
      v-html="item.name"
    ></li>
  </ul>
</template>
<script>
export default {
  props: {
    data: {
      type: Array
    },
    defaultActive: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      indexActive: 0
    }
  },
  created() {
    this.indexActive = this.defaultActive
  },
  methods: {
    tabChanges(item, index) {
      if (item.disabled) {
        return
      }
      this.indexActive = index
      this.$emit('tabChangeIndex', index)
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-content {
  width: 180px;
  height: fit-content;
  background: #fff;
  padding-top: 35px;
  padding-bottom: 43px;
  li {
    position: relative;
    width: 100%;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    color: #777777;
    margin-bottom: 60px;
    cursor: pointer;
    &:last-child {
      margin: 0;
    }
    &.active {
      color: rgba(170, 25, 65, 1);
      &::after {
        content: '';
        width: 8px;
        height: 40px;
        background: rgba(170, 25, 65, 1);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}
</style>
