<template>
  <div class="tabbar-small">
    <ul>
      <li
        v-for="(item, index) in tabList"
        :key="item"
        :class="{
          active: index === activeTabIdx,
        }"
        @click="activeTabIdx = index"
      >
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tabList: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      activeTabIdx: 0,
    }
  },
  watch: {
    activeTabIdx: {
      handler(vNew) {
        this.$emit('change', vNew)
      },
      immediate: true,
    }
  },
}
</script>

<style lang="less" scoped>
.tabbar-small {
  margin-top: 3.1vw;
  margin-bottom: 3.6vw;
  > ul {
    display: flex;
    align-items: center;
    > li {
      margin-right: 12vw;
      position: relative;
      font-size: 3.2vw;
      font-weight: 600;
      color: #333333;
      &.active {
        font-weight: bold;
        &::after {
          content: '';
          display: absolute;
          top: calc(100% + 0.9vw);
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          width: 10.1vw;
          height: 1.3vw;
          background: linear-gradient(0deg, #FF615C 0%, #FF9877 100%);
          border-radius: 0.7vw;
        }
      }
    }
  }
}
</style>