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

            <div class="_address">
                <div class="icon">
                    <img src="/img/address.png">
                </div>
                <div class="c">
                    <div class="name">
                        {{ data.receiptrealname }} {{ data.receiptcellphone }}
                    </div>
                    <div class="s">
                        <p>{{ data.receiptprovince }}{{ data.receiptcity }}{{ data.receiptcounty }}{{
                            data.receiptaddress }}</p>
                    </div>
                </div>
            </div>

            <div class="_goods">
                <img :src="$file(data.proimg)">
                <div class="c">
                    <div class="name">
                        <span>{{ data.proname }}</span>
                    </div>
                    <div class="s">
                        <p>{{ data.proskuname?.split(';').join('/') }}</p>
                    </div>
                    <div class="price">
                        <b>
                            <span>￥</span>{{ data.proskusaleprice?.toFixed(2) }}
                        </b>
                        <p>x{{ data.buynums }}</p>
                    </div>
                </div>
            </div>

            <div class="_remark" v-if="data.remark">
                <p>买家留言: </p>
                <span class="r">
                    {{ data.remark || '无' }}
                </span>
            </div>
            <div class="_detail">
                <div class="p">
                    <p>
                        商品总价
                        <span>￥{{ data.ordermoney?.toFixed(2) }}</span>
                    </p>
                    <p v-if="data.payjifen > 0">
                        积分抵扣
                        <span>-￥{{ data.payjifen?.toFixed(2) }}</span>
                    </p>
                    <p v-if="data.payquan > 0">
                        会员卡额度抵扣
                        <span>-￥{{ data.payquan?.toFixed(2) }}</span>
                    </p>
                    <p>
                        实付金额
                        <b style="color: #f00;">￥{{ data.realmoney?.toFixed(2) }}</b>
                    </p>
                    <p v-if="data.zongsongjifen">
                        赠送积分
                        <span>{{ data.zongsongjifen }}</span>
                    </p>
                    <hr style="margin:1.67vw 0;height: 1px;border: none;background: #f5f5f580;">
                    <p>
                        订单号：
                        <span>{{ data.ordernum }} <img @click="$copyText(data.ordernum); $showSuccessToast('复制成功')"
                                src="/img/copy.png"></span>
                    </p>
                    <!-- <p>
                        商品总数
                        <span>{{ data.buynums }}</span>
                    </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;
                this.data.orderdetails = res.data.items;
            } catch (err) {
                this.$showFailToast(err.message || '加载失败');
            }
        },
    }
}
</script>
