<template>
    <view class="order-detail-container">
        <!-- 支付金额头部 -->
        <view class="payment-header">
            <view class="amount-info">
                <text class="amount-symbol">¥</text>
                <text class="amount-value">4704.00</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">地下</text>
                    <text class="park-name">衡水市民服务中心地下停车场</text>
                </view>
            </view>

            <!-- 车牌号 -->
            <view class="detail-item">
                <text class="detail-label">车牌号</text>
                <text class="detail-value">冀T11855</text>
            </view>

            <!-- 开始时间 -->
            <view class="detail-item">
                <text class="detail-label">开始时间</text>
                <text class="detail-value">2025-03-08 00:00:00</text>
            </view>

            <!-- 结束时间 -->
            <view class="detail-item">
                <text class="detail-label">结束时间</text>
                <text class="detail-value">2025-03-08 23:59:59</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">4900.00</text>
            </view>
            <view class="pay-button" @tap="submitPayment">
                <text class="pay-text">立即支付</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 页面数据
        }
    },
    methods: {
        // 提交支付
        submitPayment() {
            console.log('提交支付');
        }
    },
    onLoad() {
        console.log('订单详情页面加载');
    }
}
</script>

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