<template>
  <div :class="`tabbar ${isMultiple ? 'tabbar-half' : ''}`">
    <Van-tabs
      v-model="headerNavActive"
      color="#1C9FFF"
      line-width="30px"
      :disabled="isMultiple"
      title-active-color="#000000"
      title-inactive-color="#C4C4C4"
      @change="onHeaderNavClick"
    >
      <div v-for="item in data" :key="item.value">
        <Van-tab
          :name="item.value"
          v-if="(isMultiple && headerNavActive === item.value) || !isMultiple"
        >
          <template #title>
            {{ item.name }}<span v-show="countVisible" class="count">({{ item.count }}) </span>
          </template>
        </Van-tab>
      </div>
    </Van-tabs>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:19:49
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-01-12 14:53:34
 */
export default {
  name: "MtTabs",
  props: {
    value: {
      type: String,
      default: "1",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //是否隐藏其它tab
    isMultiple: {
      type: Boolean,
      default: false,
    },
    countVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headerNavActive: "1",
    };
  },
  methods: {
    onHeaderNavClick(val) {
      this.$emit("onChange", val);
    },
  },
  watch: {
    value: {
      handler(val) {
        this.headerNavActive = val;
      },
      immediate: true,
    },
    headerNavActive: {
      handler(val) {
        this.$emit("input", val);
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-tabs__wrap {
  height: 50px !important;
}
::v-deep .van-tab__text {
  font-size: j(16);
  font-weight: 500;
}
.tabbar {
  width: j(180);
  &-half {
    width: j(90);
  }
  .count {
    font-size: j(13);
  }
}
</style>
