<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="$t('会员订单')" name="first">
                    <ui-order-table :data="vipOrdersData" :columns="vipOrders">
                        <template v-slot:5="{ row }">
                            <div  v-if="row.status !== '1'" class="flex">
                                <el-link @click="$store.dispatch('SHOW_PAY_BOX',{type:'vip',vipPayData:row})" type="warning mr-12px" >去支付</el-link>
<!--                                <el-link type="danger">取消</el-link>-->
                            </div>
                        </template>
                    </ui-order-table>
                </el-tab-pane>
                <el-tab-pane :label="$t('商品订单')" name="second">
                    <ui-order-table :data="goodsOrdersData" :columns="goodsOrders">
                        <template v-slot:0="{ row }">
                            <img class="w-full h-full object-contain" :src="row.coverUrl"/>
                        </template>
                        <template v-slot:2="{ row }">
                            <div style="text-align: left">
                                <span>{{$t('收货人')}}:{{row.linkman}}</span> <br>
                                <span>{{$t('联系电话')}}:{{row.phone}}</span> <br>
                                <span>{{$t('地址')}}:{{row.address}}</span>
                            </div>
                        </template>
                        <template v-slot:7="{ row }">
                            <div  v-if="row.status !== '1'" class="flex">
                                <el-link @click="$store.dispatch('SHOW_PAY_BOX',{type:'product',productPayData:row})" type="warning mr-12px" >去支付</el-link>
<!--                               <el-link type="danger">取消</el-link>-->
                            </div>
                        </template>
                    </ui-order-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: "first",
                vipOrdersData: [],
                vipOrders: [
                    {
                        prop: "refVipSmName",
                        label: this.$t("会员名称"),
                        align: "center",
                    },
                    {
                        prop: "expire",
                        label: this.$t("时长/（天)"),
                        align: "center",
                    },
                    {
                        prop: "sum",
                        label: this.$t("实付金额"),
                        align: "center",
                    },
                    {
                        prop: "statusDesc",
                        label: this.$t("交易状态"),
                        align: "center",
                    },
                    {
                        prop: "payTypeDesc",
                        label: this.$t("支付方式"),
                        align: "center",
                    },
                    {
                        prop: "action",
                        label: this.$t("操作"),
                        align: "center",
                    },
                ],
                goodsOrdersData: [],
                goodsOrders: [
                    {
                        prop: "coverUrl",
                        label: this.$t("产品图"),
                        align: "center",
                        width: "88px",
                    },
                    {
                        prop: "name",
                        label: this.$t("产品名"),
                        align: "center",
                    },
                    {
                        prop: "addressInfo",
                        label: this.$t("收货信息"),
                        align: "center",
                    },
                    {
                        prop: "num",
                        label: this.$t("数量"),
                        align: "center",
                    },
                    {
                        prop: "sum",
                        label: this.$t("实付金额"),
                        align: "center",
                    },
                    {
                        prop: "statusDesc",
                        label: this.$t("交易状态"),
                        align: "center",
                    },
                    {
                        prop: "payTypeDesc",
                        label: this.$t("支付方式"),
                        align: "center",
                    },
                    {
                        prop: "action",
                        label: this.$t("操作"),
                        align: "center",
                    },
                ],
            };
        },
        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: {
            activeName: {
                immediate: true,
                handler() {
                    if (this.activeName === 'first') {
                        this.handleLoadVipOrders();
                    } else {
                        this.handleLoadProductOrders();
                    }
                }
            }
        },
        created() {
                if(this.$route.query.type === 'product'){
                    this.activeName = 'second';
                }
        }
    };
</script>

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