<template>
  <div>
    <div class="h-34px"></div>
    <ui-title-devider :showBorder="false" title="我的订单"></ui-title-devider>
    <div class="pl-27px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="会员订单" name="first">
          <ui-order-table :data="vipOrdersData" :columns="vipOrders"></ui-order-table>
        </el-tab-pane>
        <el-tab-pane label="商品订单" name="second">
          <ui-order-table :data="goodsOrdersData" :columns="goodsOrders">
            <template v-slot:0="{ row }">
              <img class="w-full h-full object-contain" :src="row.pic" />
            </template>
          </ui-order-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</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: "88px",
        },
        {
          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>
