<template>
  <div class="order-list-con bg-grey">
    <list-header :list="tabList" v-model="currentTab" />
    <van-swipe
      ref="orderSwipe"
      @change="swipeChange"
      class="order-swipe"
      :show-indicators="false"
      :loop="false"
    >
      <template v-for="(tab, ti) of tabList">
        <van-swipe-item
          v-for="(sub, si) of tab.sub"
          :key="`swipe-item-${ti}-${si}`"
        >
          <scroll-item
            :i="sub.index"
            :index="tabIndex"
            :tab="tab"
            :sub="sub"
            :ref="`list-scroll-${ti}-${si}`"
          />
        </van-swipe-item>
      </template>
    </van-swipe>
  </div>
</template>


<script>
import ListHeader from "./list-header.vue";
import ScrollItem from "./scroll-item.vue";
import OrderListItem from "../components/order-list-item.vue";
import DeliveryListItem from "../components/delivery-list-item.vue";
import TransferListItem from "../components/transfer-list-item.vue"
import { OrderStatus, DeliveryStatus, OrderType } from "@/enums";

export default {
  components: { ListHeader, ScrollItem },
  watch: {
    currentTab: {
      handler(val) {
        this.tabIndex = this.tabList[val.tab].sub[val.sub].index;
      },
      deep: true,
    },
    tabIndex(val) {
      this.$refs.orderSwipe.swipeTo(val);
    },
  },
  data() {
    return {
      tabList: [
        {
          name: "商品订单",
          val: OrderType.ORDER,
          comm: OrderListItem,
          sub: [
            { name: "全部", val: "" },
            { name: "待付款", val: OrderStatus.UN_PAY },
            // { name: "待评价", val: "waitCommon" },
            { name: "待退款", val: OrderStatus.UN_REFUND },
            { name: "已完成", val: OrderStatus.SUCCESS },
          ],
        },
        // {
        //   name: "提货订单",
        //   val: OrderType.DELIVERY,
        //   comm: DeliveryListItem,
        //   sub: [
        //     { name: "全部", val: "" },
        //     { name: "待发货", val: DeliveryStatus.UN_SHIP },
        //     { name: "待收货", val: DeliveryStatus.SHIP },
        //     { name: "待退货", val: DeliveryStatus.UN_REFUND },
        //     { name: "已完成", val: DeliveryStatus.SUCCESS },
        //   ],
        // },
        // {
        //   name: "转让单",
        //   val: OrderType.TRANSFER,
        //   comm: TransferListItem,
        //   sub: [
        //     { name: "全部", val: 1 },
        //     { name: "转出", val: 2 },
        //     { name: "转入", val: 3 },
        //   ],
        // },
      ],
      subList: [],
      currentTab: {
        tab: 0,
        sub: 0,
      },
      tabIndex: 0,
      searchKey: "",
      hasInit: false,
    };
  },
  created() {
    this.initTabList();
    let { tab, sub } = this.$route.query;
    tab = +tab;
    sub = +sub;
    if ((tab || tab === 0) && (sub || sub === 0)) {
      this.currentTab.tab = tab;
      this.currentTab.sub = sub;
    }
  },
  methods: {
    initTabList() {
      let l = 0;
      for (let ti = 0; ti < this.tabList.length; ti++) {
        for (let si = 0; si < this.tabList[ti].sub.length; si++) {
          this.tabList[ti].sub[si].index = l++;
          this.subList.push({ tab: ti, sub: si });
        }
      }
    },
    swipeChange(index) {
      this.currentTab.tab = this.subList[index].tab;
      this.currentTab.sub = this.subList[index].sub;
    }
  },
  onShow() {
    if (!this.hasInit) {
      this.hasInit = true;
    } else {
      this.$nextTick(() => {
        let el =
          this.$refs[
            `list-scroll-${this.currentTab.tab}-${this.currentTab.sub}`
          ][0];
          
        el.initData();
      });
    }
  },
};
</script>

<style lang="less">
.order-list-con {
  height: 100vh;
  .order-swipe {
    height: ~"calc(100% - 90px)";
  }
}
</style>