<template>
  <div class="tab-box">
    <ul class="list">
      <li
        class="item"
        :class="{ 'z-active': activeIndex == index }"
        v-for="(item, index) in menuListPc"
        :key="index"
      >
        <div class="title" @click="_tabSwitch(index)">{{ item.menuName }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'pv-menu-tab',
  props: {
    value: {}
  },
  computed: {
    ...mapGetters({
      menuListPc: 'menuListPc'
    }),
    activeIndex: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    }
  },
  methods: {
    _tabSwitch(num) {
      this.activeIndex = num;
    }
  }
};
</script>
<style lang="less" scoped>
.tab-box {
  max-width: 80%;
  margin: 16px auto;
  .list {
    display: flex;
    align-items: center;
    font-size: 18px;
    .item {
      flex: 1;
      text-align: center;
      .title {
        position: relative;
        display: inline-block;
        min-width: 100px;
        height: 45px;
        line-height: 35px;
        cursor: pointer;
      }
      &.z-active {
        .title {
          &:after {
            content: '';
            display: block;
            position: absolute;
            left: calc(50% - 20px);
            bottom: 0;
            width: 40px;
            height: 4px;
            background: var(--main-color);
            border-radius: 4px;
          }
        }
      }
    }
  }
}
</style>
