<template>
    <view class="order-detail-container">
        <!-- 支付金额头部 -->
        <view class="payment-header">
            <view class="amount-info">
                <text class="amount-symbol">¥</text>
                <text class="amount-value">{{ itemObj.paymentAmount }}</text>
                <text class="payment-status">待付款</text>
            </view>
        </view>

        <!-- 订单详情内容 -->
        <view class="order-content">
            <!-- 停车场信息 -->
            <view class="detail-item">
                <text class="detail-label">停车场</text>
                <view class="detail-value">
                    <text class="park-type">{{ itemObj.selectedParkType == 1 ? '地上' : '地下' }}</text>
                    <text class="park-name">{{ itemObj.headerTitle }}</text>
                </view>
            </view>

            <!-- 车牌号 -->
            <view class="detail-item">
                <text class="detail-label">车牌号</text>
                <text class="detail-value">{{ itemObj.selectedCarPlate }}</text>
            </view>

            <!-- 开始时间 -->
            <view class="detail-item">
                <text class="detail-label">开始时间</text>
                <text class="detail-value">{{ itemObj.startTime }}</text>
            </view>

            <!-- 结束时间 -->
            <view class="detail-item">
                <text class="detail-label">结束时间</text>
                <text class="detail-value">{{ itemObj.endTime }}</text>
            </view>
        </view>

        <!-- 支付方式选择 -->
        <view class="payment-method">
            <view class="method-item">
                <view class="method-info">
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
                        mode="aspectFit" class="method-info-img"></image>
                    <text class="method-text">微信支付</text>
                </view>
                <!-- <view class="payment-select" v-if="selectedPayment === 'wechat'">
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
                        mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
                </view>
                <view class="payment-select" v-else>
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
                        mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
                </view> -->
                <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
                    mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
            </view>
        </view>

        <!-- 底部支付栏 -->
        <view class="bottom-payment">
            <view class="total-amount">
                <text class="total-label">合计¥</text>
                <text class="total-value">{{ itemObj.paymentAmount }}</text>
            </view>
            <view class="pay-button" @tap="submitPayment">
                <text class="pay-text">立即支付</text>
            </view>
        </view>
    </view>
</template>

<script>
import {
    isPhone,
    picUrl,
    request,
    upload,
    NavgateTo
} from '../../../utils';
import { apiArr } from '@/api/park.js'

export default {
    data() {
        return {
            itemObj: {}
        }
    },
    methods: {
        // 提交支付
        submitPayment() {
            const param = {
                order_id: this.itemObj.order_id,
                user_id: uni.getStorageSync('userId'),
                trans_type: this.itemObj.trans_type,
            }
            request(apiArr.monthCardOrderPreorder, "POST", param).then(res => {
                if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
                    // 调用微信支付
                    uni.requestPayment({
                        timeStamp: res.timeStamp,
                        nonceStr: res.nonceStr,
                        package: res.package,
                        signType: res.signType,
                        paySign: res.paySign,
                        success: (payRes) => {
                            const params = {
                                order_id: resVal.order_id,
                            }
                            request(apiArr.monthCardOrderQuery, "POST", params).then(res => {
                                this.boxshadow1 = true
                            })

                        },
                        fail: (payErr) => {
                            uni.showToast({
                                title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
                                icon: 'none'
                            })
                        },
                        complete: () => {
                            // 支付完成后的回调，无论成功失败都会执行
                        }
                    })
                } else {
                    console.error("获取支付参数失败，缺少必要参数")
                    uni.showToast({
                        title: '获取支付信息失败',
                        icon: 'none'
                    })
                }
            })
        }
    },
    onLoad(options) {
        this.itemObj = JSON.parse(decodeURIComponent(options.item));
    }
}
</script>

<style>
@import url('./index.css');
</style>