<template>
  <view class="cu-bar tabbar bg-white">
    <view
      :class="[index === 0 ? 'text-blue': 'text-gray']"
      @tap="handleClickButton(0)"
      class="action"
      hover-class="cc-active"
    >
      <view class="cuIcon-home"></view>首页
    </view>
    <view @tap="$emit('scan')" class="action text-gray add-action">
      <button class="cu-btn cuIcon-scan bg-blue shadow"></button>
      扫一扫
    </view>
    <view
      :class="[index === 1 ? 'text-blue': 'text-gray']"
      @tap="handleClickButton(1)"
      class="action"
      hover-class="cc-active"
    >
      <view class="cuIcon-my">
        <!-- <view class="cu-tag badge"></view> -->
      </view>我的
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
    };
  },
  methods: {
    handleClickButton(i) {
      this.index = i;
      this.$emit('change', i);
    },
  },
};
</script>
