<template>
    <view class="detail">
        <view class="title">订单信息：</view>
        <view class="row">
            <view class="col">
                <view class="label">订单编号：</view>
                <view class="content">
                    <text>{{ orderInfo.orderNo }}</text>
                    <text class="copy" @click="copyOrderNum">复制</text>
                </view>
            </view>
        </view>
        <view class="row">
            <view class="col">
                <view class="label">订单总额：</view>
                <view class="content">¥{{ orderInfo.payTotalFee | priceFormat }}</view>
            </view>
        </view>
        <view class="row">
            <view class="col">
                <view class="label">下单时间：</view>
                <view class="content">{{ orderInfo.orderTime }}</view>
            </view>
            <view class="col">
                <view class="label">运费：</view>
                <view class="content">包邮</view>
            </view>
        </view>
        <view class="row">
            <view class="col" v-if="orderInfo.receiptDate">
                <view class="label">支付时间：</view>
                <view class="content">{{ orderInfo.receiptDate }}</view>
            </view>
            <view class="col">
                <view class="label">分享减免：</view>
                <view class="content">¥{{ orderInfo.reductionAmount | priceFormat }}</view>
            </view>
        </view>
        <view class="row">
            <view class="col" v-if="orderInfo.couponAmount">
                <view class="label">优惠券：</view>
                <view class="content">¥{{ orderInfo.couponAmount | priceFormat }}</view>
            </view>
            <view class="col">
                <view class="label">已退货/已取消：</view>
                <view class="content">{{ orderInfo.returnedNum }}/{{ orderInfo.actualCancelNum }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'order-information',
    props: {
        orderInfo: {
            type: Object,
            default: () => {}
        }
    },

    methods: {
        copyOrderNum() {
            uni.setClipboardData({
                data: this.orderInfo.orderNo,
                success: () => {
                    this.$toast.success('复制成功')
                },
                fail: () => {
                    this.$toast.success('复制失败')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.detail {
    padding: 24rpx;
    background: #fff;
    line-height: 1.6;

    .title {
        display: flex;
        align-items: center;

        margin-bottom: 32rpx;

        font-size: 30rpx;
        color: #333333;

        &::before {
            content: '';
            display: block;
            width: 6rpx;
            height: 22rpx;
            background: #ff457b;
            border-radius: 3rpx;
            margin-right: 8rpx;
        }
    }
    .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8rpx 0;

        font-size: 26rpx;
        color: #333333;

        .label {
            color: #999999;
        }
        .content {
            position: relative;
            .copy {
                display: inline-block;
                line-height: 40rpx;
                width: 80rpx;
                height: 40rpx;
                margin-left: 40rpx;
                background: #fff8fd;
                border-radius: 8px;

                font-size: 24rpx;
                color: #ff457b;
                vertical-align: middle;
                text-align: center;
            }
        }
        .col {
            display: flex;
            align-items: center;
        }
    }
}
</style>
