<template>
  <div class="btn-group">
    <ul class="group-item">
      <li :class="{active:value===item.key}" @click="click(item.key)" v-for="(item,index) in data" :key="item.key">
        <span v-if="itemCount&&itemCount.length>0">{{item.tab+'('}}<span>{{itemCount[index]}}</span>)</span>
        <span v-else>{{item.tab}}</span>
      </li>
    </ul>
  </div>
  <!-- <btn-group :data="data" v-model="activekey" @change="callback" /> -->
</template>
<script>
export default {
  name: "BtnGroup",
  components: {},
  data () {
    return {
      lastIndex: 0
    }
  },
  props: {
    data: {
      type: Array,
      default () {
        return null
      },
    },
    itemCount: {
      type: Array,
      default () {
        return null
      }
    },
    value: {
      type: String,
      default () {
        return null
      }
    }
  },
  created () {
    this.data
  },
  methods: {
    click (value) {
      this.$emit("input", value);
      this.$emit("change", value);
    },
  },
};
</script>