<template>
  <div class="tabs-box">
    <div class="name">{{ data.title }}</div>
    <ul>
      <template v-for="(item, index) in data.options">
        <li
          :key="index"
          :class="tabsIndex == index && 'active'"
          @click="tabs(index)"
          >{{ item }}</li>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  components: {
  },
  data() {
    return {
      tabsIndex: this.activeIndex
    }
  },
  methods: {
    tabs(n) {
      this.tabsIndex = n
      this.$emit('update:activeIndex', n)
    }
  }
}
</script>
<style lang="scss" scoped>
.tabs-box{
  display: flex;
  justify-content: center;
  .name{
    font-size: 14px;
    color: #666666;
    line-height: 20px;
    margin-right: 24px;
  }
  ul{
    display: flex;
    li{
      position: relative;
      font-size: 14px;
      color: #666666;
      line-height: 20px;
      margin-right: 24px;
      cursor: pointer;
      &.active{
        &::after{
          content: '';
          position: absolute;
          bottom: -4px;
          left: 0;
          width: 100%;
          height: 2px;
          background: #AF1B40;
          border-radius: 1px;
        }
      }
    }
  }
}
</style>
