<template>
  <div class="after-sale-list-con bg-grey flex-default">
    <m-tabs v-model="currentTab" :tabs="tabList" class="list-tab" />
    <van-swipe
      ref="redundSwipe"
      @change="swipeChange"
      class="list-swipe"
      :show-indicators="false"
      :loop="false"
    >
      <van-swipe-item
        v-for="(item, index) of tabList"
        :key="`swipe-item-${index}`"
      >
        <scroll-item
          :index="currentTab"
          :i="index"
          :tab="item"
          :ref="`scroll-item-${index}`"
        />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import ScrollItem from "./scroll-item";
import { OrderType } from "@/enums";
export default {
  components: {
    ScrollItem,
  },
  watch: {
    currentTab(val){
      this.$refs.redundSwipe.swipeTo(val);
    }
  },
  data() {
    return {
      currentTab: 0,
      tabList: [
        { name: "商品订单", val: OrderType.ORDER },
        // {
        //   name: "提货订单",
        //   val: OrderType.DELIVERY,
        // },
      ],
    };
  },
  methods: {
    swipeChange(index) {
      this.currentTab = index;
    },
  },
};
</script>

<style lang="less">
.after-sale-list-con {
  height: 100%;
  flex-direction: column;
  .list-tab {
    width: 100%;
  }
  .list-swipe {
    width: 100%;
    flex: 1;
    min-height: 0;
  }
}
</style>

