<template>
    <BasePage :back="back" title="订单详情">
        <div class="tradelist-details" v-if="data.ordernum"
            :style="`background: url(/img/mallDetail-bg.png) no-repeat;background-size: 100% auto;`">
            <div class="top">
                <img :src="`/img/mallDetail-i${data.state}.png`">
                <b style="#d2220d">{{ data.statename }}</b>
            </div>

            <div class="_address">
                <img src="/img/tradelistDetail-i5.png">
                <div class="c">
                    <div>
                        {{ data.receiptrealname }}
                        <span>{{ data.receiptcellphone }}</span>
                    </div>
                    <p>
                        {{ data.receiptprovince }}{{ data.receiptcity }}{{ data.receiptcounty }}{{ data.receiptaddress
                        }}
                    </p>
                </div>
            </div>

            <div class="_goods" v-for="item in data.orderdetails" :key="item.id">
                <img :src="$file(item.proimg)">
                <div class="c">
                    <div class="name">
                        <span>{{ item.proname }}</span>
                    </div>
                    <div class="s">
                        <p>{{ item.proskuname?.split(';').join('/') }}</p>
                    </div>
                    <div class="price">
                        <b>
                            <span>￥</span>{{ item.saleprice?.toFixed(2) }}
                        </b>
                        <p>x{{ item.buynums }}</p>
                    </div>
                </div>
            </div>

            <div class="_detail">
                <div class="p">
                    <p>
                        订单号：
                        <span>{{ data.ordernum }} <img @click="$copyText(data.ordernum); $showSuccessToast('复制成功')"
                                src="/img/copy.png"></span>
                    </p>
                    <p>
                        商品总数
                        <span>{{data.orderdetails?.reduce((sum, sku) => sum + sku.buynums, 0)}}</span>
                    </p>
                    <p>
                        商品总价
                        <span>￥{{ data.orderoriginalmoney?.toFixed(2) }}</span>
                    </p>
                    <p v-if="data.payquan > 0">
                        优惠券抵扣
                        <span>-￥{{ data.payquan?.toFixed(2) }}</span>
                    </p>
                    <p>
                        实付金额
                        <b style="color: #f00;">￥{{ data.needpay?.toFixed(2) }}</b>
                    </p>
                    <p>
                        下单时间
                        <span>{{ $formatGMT(data.addtime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                    </p>
                    <p v-if="data.paytime">
                        付款时间
                        <span>{{ $formatGMT(data.paytime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                    </p>
                    <p v-if="data.exporttime">
                        发货时间
                        <span>{{ $formatGMT(data.exporttime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                    </p>
                    <p v-if="data.receipttime">
                        收货时间
                        <span>{{ $formatGMT(data.receipttime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                    </p>
                    <p v-if="data.evaltime">
                        评价时间
                        <span>{{ $formatGMT(data.evaltime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                    </p>
                </div>
            </div>
            <!-- 
            <van-button v-if="data.state == 0" type="primary" block round color="#fb2d2d"
                style="height: 8.8vw; margin: 3.33vw;" @click="$navigate(`/Pay?ordernum=${data.ordernum}`)">
                立即支付
            </van-button> -->
        </div>
    </BasePage>
</template>

<script>
export default {
    name: 'TradeDetail',
    data() {
        return {
            data: {},
        }
    },
    mounted() {
        console.log(this.data.state);

        this.ordernum = this.$route.query.ordernum;
        if (this.ordernum) {
            this.loadData();
        }
    },
    methods: {
        back() {
            this.$router.back();
        },
        async loadData() {
            try {
                const res = await this.$get(`/v1/client/FOrdersClient/${this.ordernum}`);
                this.data = res.data;
            } catch (err) {
                this.$showFailToast(err.errmsg || '加载失败');
            }
        },
    }
}
</script>
