<template>
    <view class="page">
        <navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" color="#fff" />

        <view class="page-content">
            <view class="page-label">订单详情</view>
            <!-- 商品详情 -->
            <productCard :data="orderDetail.massageItem" size="medium" :readonly="true"></productCard>

            <view class="info">
                <view class="info-header">订单信息</view>
                <view class="info-content">
                    <view class="flex info-row">
                        <text>实付款</text>
                        <text class="price"><text class="price-unit">¥</text>{{ orderDetail.amount }}</text>
                    </view>
                    <view class="flex info-row">
                        <text>订单号</text>
                        <text>{{ orderDetail.id }}</text>
                    </view>
                    <view class="flex info-row">
                        <text>付款时间</text>
                        <text>{{ orderDetail.payTime || '-' }}</text>
                    </view>
                    <view class="flex info-row">
                        <text>核销时间</text>
                        <text>{{ orderDetail.useTime || '-' }}</text>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
import productCard from '@/components/product/productCard.vue'
import {
    mapState
} from 'vuex'

export default {
    components: {
        productCard
    },
    computed: {},
    data() {
        return {
            id: null,
            orderDetail: {},
        }
    },
    onLoad(args) {
        this.id = args.id
        this.fetchOrderDetail()
    },
    onPullDownRefresh() {
        this.fetchOrderDetail()
    },
    methods: {
        async fetchOrderDetail() {
            try {

                this.orderDetail = await this.$fetch('queryOrderById', { id: this.id })

            } catch (err) {

            }

            uni.stopPullDownRefresh()
        },
    }
}
</script>

<style scoped lang="scss">
.page {
    height: 100vh;
    background-color: #FFFFFF;

    /deep/ .nav-bar__view {
        background-image: linear-gradient(#84A73F, #D8FF8F);
    }

    /deep/ .product-card__view {
        padding: 19rpx 7rpx 28rpx 7rpx !important;
    }

    &-content {
        padding: 35rpx 46rpx;
    }

    &-label {
        color: #000000;
        font-size: 28rpx;
        padding-left: 11rpx;
        position: relative;
        margin-left: 7rpx;

        &:before {
            content: ' ';
            width: 5rpx;
            height: 40rpx;
            background-image: linear-gradient(#84A73F, #D8FF8F);
            border-radius: 3rpx;

            position: absolute;
            left: 0;
        }
    }
}

.info {
    padding: 30rpx 7rpx;
    border-top: 1px dashed #707070;
    color: #999999;
    font-size: 22rpx;

    &-header {
        color: #000000;
        font-size: 28rpx;
    }

    &-row {
        justify-content: space-between;
        margin-top: 23rpx;
    }

    .price {
        color: #000000;

        &-unit {
            font-size: 14rpx;
        }
    }
}
</style>