<template>
  <van-tabs class="tabs" v-model="active" sticky lazy-render color="#01C1B5">
    <van-tab title="可使用">
      <coupon-list @setDot="setDot" ref="uselist" v-if="active === 0" key="0" :status="0"/>
    </van-tab>
    <van-tab title="已使用">
      <coupon-list v-if="active === 1" key="1" :status="1"/>
    </van-tab>
    <van-tab title="已失效">
      <coupon-list v-if="active === 2" key="2" :status="2"/>
    </van-tab>
  </van-tabs>
</template>

<script>
import list from './list.vue'
export default {
  components: {
    'coupon-list': list
  },
  data() {
    return {
      active: '',
      hasDot: false,
    }
  },
  mounted() {
    document.title = '优惠券'
  },
  methods: {
    setDot(has) {
      this.hasDot = has
    }
  }
}
</script>

<style scoped lang="less">
  .tabs{
    // background-color: #fff;
    padding-bottom: .15rem;
    /deep/.van-tabs__wrap{
      height: .58rem!important;
    }
    /deep/.van-tab {
      height: .58rem;
      line-height: .58rem;
      &__text{
        color: #808080;
        font-size: .15rem;
        position: relative;
        .van-info--dot{
          display: inline-block;
          right: -.06rem;
          position: absolute;
          top: .01rem;
          background-color: #F85043;
        }
      }
    }
    /deep/.van-tabs__content{
      padding-top: .15rem;
      min-height: calc(100vh - .58rem);
    }
    /deep/.van-tab--active{
      .van-tab__text{
        color: #000;
      }
    }
  }
</style>
