<template>
  <div class="my-coupon-con bg-grey flex-default">
    <m-tabs v-model="tabIndex" :tabs="tabList" class="tab-list" />
    <van-swipe
      ref="couponSwipe"
      @change="swipeChange"
      class="assets-swiper"
      :loop="false"
      :show-indicators="false"
    >
      <van-swipe-item
        v-for="(item, i) of tabList"
        :key="`swiper-item-${i}-${item.value}`"
        :ref="`swiper-item-${item.value}`"
      >
        <scroll-item :i="i" :tab="item" :index="tabIndex" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import ScrollItem from "./scroll-item.vue";
export default {
  components: { ScrollItem },
  data() {
    return {
      tabIndex: 0,
      tabList: [
        { name: "未使用", value: "1" },
        { name: "已使用", value: "2" },
        { name: "已过期", value: "3" },
      ],
      hasInit: false,
    };
  },
  watch: {
    tabIndex(val) {
      this.$refs.couponSwipe.swipeTo(val);
    },
  },
  methods: {
    swipeChange(index) {
      this.tabIndex = index;
    },
  },
};
</script>

<style lang="less">
.my-coupon-con {
  height: 100%;
  flex-direction: column;
  > div {
    width: 100%;
  }
  .m-tabs-con {
    flex-shrink: 0;
  }
  .assets-swiper {
    height: 100%;
    flex-shrink: 1;
  }
  .mescroll-uni-warp {
    flex-shrink: 1;
    ::v-deep.mescroll-uni-fixed {
      top: 20rpx !important;
    }
  }
}
</style>
