<template>
  <view class="wrap">
    <view class="scroll">
      <scroll-view scroll-x class="bg-white nav cu-list" scroll-with-animation :scroll-left="scrollLeft">
        <view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in status" :key="index"
          @tap="tabSelect(index,item.state)" :data-id="index">
          <view class="cu-tag badge" v-if="item.total!=0">
            <block v-if="item.total!=1">{{item.total>99?'99+':item.total}}</block>
          </view>
          <text>{{item.text}}</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      TabCur: 0,
      scrollLeft: 0
    }
  },
  props: {
    status: {
      type: Array,
      default () {
        return [{ state: 0, text: '全部', total: 0 }]
      }
    }
  },
  methods: {
    tabSelect (index, st) {
      this.TabCur = index
      this.scrollLeft = (index - 1) * 60
      this.$emit('query', st)
    }
  }
}
</script>

<style lang="scss">
.wrap {
  height: 90rpx;
  .scroll {
    position: fixed;
    width: 100%;
    z-index: 99;
  }
}
.cu-list {
  .cu-item {
    position: relative;
    .cu-tag.badge {
      top: 10px;
      font-size: 22rpx;
    }
  }
}
</style>
