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


<script>
export default {
  props: {
    tabsNum: Array,
    activeIndex: Number
  },
  data() {
    return {
      tabList: [
        {name: '内容', type: 1},
        {name: '收藏', type: 2},
      ],
      active: ''
    };
  },
  created() {
    this.changeType(this.activeIndex);
    this.computetabsNum();
  },
  methods: {
    changeType(index, isClick) {
      if (!this.tabList[index]) {
        index = 0;
      }

      this.active = index;

      this.$emit('change', index);
    },
    computetabsNum(a) {
      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.activeIndex || 0);
    }
  },
  watch: {
    tabsNum: 'computetabsNum',
    activeIndex: 'computeCurrentTab'
  }
};
</script>


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

    .tabs-list {
      display: flex;

      li {
        font-size: 32px;
        color: #b0b0b0;
        font-weight: 300;
        margin-right: 40px;
      }

      .active {
        color: #222;
        font-weight: 500;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          left: 0;
          bottom: -10px;
          width: 100%;
          height: 8px;
          background-color: #d90025;
          box-shadow: 0 2px 4px 0 rgba(210, 0, 13, 0.34);
        }
      }

      .t-num {
        color: #b0b0b0;
        font-size: 24px;
        zoom: 0.9;
        margin-left: -8px;
      }
    }
  }
</style>