<template>
  <div class="sub-tabs-wrap">
    <ul class="sub-tabs-list">
      <li v-if="item.num" v-for="(item, index) in tabList" :key="index" @click="changeType(index, true)">
        <div class="sub-tabs-item" :class="{'active': active === index}">
          {{item.name}}·{{item.num}}
        </div>
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  props: {
    tabsNum: Array,
    activeSubIndex: Number
  },
  data() {
    return {
      tabList: [
        {name: '全部', type: 1},
        {name: '视频', type: 2},
      ],
      active: ''
    };
  },
  created() {
    this.changeType(this.activeSubIndex);
    this.computetabsNum();
  },
  methods: {
    changeType(index) {
      if (!this.tabList[index]) {
        index = 0;
      }

      this.active = index;

      this.$emit('changeSubTab', index);
    },
    computetabsNum() {
      let tabList = this.tabList;

      for (let i = this.tabList.length - 1; i >= 0; i--) {
        let num = '';

        if (this.tabsNum[i] > 0) {
          num = this.tabsNum[i];
        }

        tabList[i].num = num;
      }

      this.tabList = [...tabList];
    },
    computeCurrentTab() {
      this.changeType(this.activeSubIndex || 0);
    }
  },
  watch: {
    tabsNum: 'computetabsNum',
    activeSubIndex: 'computeCurrentTab'
  }
};
</script>


<style>
.sub-tabs-wrap {
  padding: 0 30px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .sub-tabs-list {
    display: flex;

    li {
      font-size: 24px;
      color: #b0b0b0;
      padding: 20px 40px 20px 0;
    }

    .sub-tabs-item {
      padding: 10px 20px 10px 20px;
      border-radius: 8px;
      box-sizing: border-box;
    }

    .active {
      color: #444;
      font-weight: 500;
      position: relative;
      background-color: #f0f0f0;
      border-radius: 30px;
      box-sizing: border-box;
    }
  }
}
</style>