<template>
  <ui-page-layout title="我的订单">
    <van-tabs v-model="active" background="#FFFFFF" color="#124026" class="h-full">
      <van-tab :title="$t('会员订单')" class="h-full flex-1">
        <ui-vip-order-list :items="vipOrdersData" class="px-24rem pt-24rem"></ui-vip-order-list>

      </van-tab>
      <van-tab :title="$t('商品订单')" class="h-full flex-1">
        <ui-product-order-list :items="goodsOrdersData" class="px-24rem pt-24rem"></ui-product-order-list>

      </van-tab>

    </van-tabs>
  </ui-page-layout>

</template>

<script>
  export default {
    data() {
      return {
        active:0,
        vipOrdersData: [],
        goodsOrdersData: []
      };
    },
    methods: {

      async handleLoadVipOrders() {

        let resp = await this.$http.post(this.$api.mzUser.myVipSmOrders, this.$qs.stringify({onPage: false}));
        if (resp.data.status === 200) {
          this.vipOrdersData = resp.data.data.vipOrders;
        }

      },
      async handleLoadProductOrders() {

        let resp = await this.$http.post(this.$api.mzUser.myProductOrders, this.$qs.stringify({onPage: false}));
        if (resp.data.status === 200) {
          this.goodsOrdersData = resp.data.data.productOrders;
        }

      }

    },
    watch: {
      active: {
        immediate: true,
        handler() {
          if (this.active === 0) {
            this.handleLoadVipOrders();
          } else {
            this.handleLoadProductOrders();
          }
        }
      }
    },
    created() {
      if(this.$route.query.active){
        this.active = parseInt(this.$route.query.active);
      }
    }
  };
</script>

<style>
.header {
  @apply bg-primary;
}
</style>
