<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">
        <div class="px-24rem pt-24rem">
          <user-order-item></user-order-item>
          <user-order-item></user-order-item>
          <user-vip-order-item></user-vip-order-item>
        </div>
      </van-tab>
      <van-tab :title="$t('会员订单')" class="h-full flex-1">
        <framework-auto-size>
          <template v-slot="props">
            <div v-if="props.size" :style="`height:calc(${props.size?.height} + 120rem);`">
              <user-vip-order-item></user-vip-order-item>
              <user-vip-order-item></user-vip-order-item>
              <user-vip-order-item></user-vip-order-item>

            </div>
          </template>
        </framework-auto-size>
      </van-tab>
      <van-tab :title="$t('商品订单')" class="h-full flex-1">
        <framework-auto-size>
          <template v-slot="props">
            <div v-if="props.size" :style="`height:calc(${props.size?.height} + 120rem);`">

              <user-order-item></user-order-item>
              <user-order-item></user-order-item>
              <user-order-item></user-order-item>
              <user-order-item></user-order-item>
            </div>
          </template>
        </framework-auto-size>
      </van-tab>

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

</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      vipOrdersData: [
        {
          name: "杨贵妃",
          time: "30（天）",
          price: "￥99",
          status: "已支付",
          payType: "微信",
        },
        {
          name: "杨贵妃",
          time: "30（天）",
          price: "￥99",
          status: "已支付",
          payType: "微信",
        },
      ],
      vipOrders: [
        {
          prop: "name",
          label: "会员名称",
          align: "center",
        },
        {
          prop: "time",
          label: "时长/（天）",
          align: "center",
        },
        {
          prop: "price",
          label: "实付金额",
          align: "center",
        },
        {
          prop: "status",
          label: "交易状态",
          align: "center",
        },
        {
          prop: "payType",
          label: "支付方式",
          align: "center",
        },
      ],
      goodsOrdersData: [
        {
          pic: "/imgs/article_cover_small1.png",
          name: "这是产品名",
          addressInfo: "xxxxx",
          count: "99",
          price: "￥99",
          status: "已交易",
          payType: "微信",
        },
        {
          pic: "/imgs/article_cover_small1.png",
          name: "这是产品名",
          addressInfo: "xxxxx",
          count: "99",
          price: "￥99",
          status: "已交易",
          payType: "微信",
        },
        {
          pic: "/imgs/article_cover_small1.png",
          name: "这是产品名",
          addressInfo: "xxxxx",
          count: "99",
          price: "￥99",
          status: "已交易",
          payType: "微信",
        }
      ],
      goodsOrders: [
        {
          prop: "pic",
          label: "产品图",
          align: "center",
          width: "88rem",
        },
        {
          prop: "name",
          label: "产品名",
          align: "center",
        },
        {
          prop: "addressInfo",
          label: "收货信息",
          align: "center",
        },
        {
          prop: "count",
          label: "数量",
          align: "center",
        },
        {
          prop: "price",
          label: "实付金额",
          align: "center",
        },
        {
          prop: "status",
          label: "交易状态",
          align: "center",
        },
        {
          prop: "payType",
          label: "支付方式",
          align: "center",
        },
      ],
    };
  },
};
</script>

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