<template>
    <view class="order-detail-container">
        <!-- 订单状态区域 -->
        <view class="order-status-section">
            <view class="status-left">
                <text class="status-title">订单已支付</text>
                <text class="park-name">上海公馆停车场</text>
            </view>
            <view class="status-right">
                <image class="success-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderOk.png"
                    mode="aspectFit"></image>
            </view>
        </view>

        <!-- 金额信息区域 -->
        <view class="amount-section">
            <view class="amount-item" @tap="toggleAmountExpand">
                <text class="amount-label">实付金额</text>
                <view class="amount-value">
                    <text>¥{{ orderDetail.actualAmount }}</text>
                    <u-icon :name="amountExpanded ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>

                </view>
            </view>
            <view class="amount-item" v-show="amountExpanded">
                <text class="amount-label2">订单金额</text>
                <text>¥{{ orderDetail.orderAmount }}</text>
            </view>
        </view>

        <!-- 电商服务区域 -->
        <view class="service-section">
            <text class="section-title">电商服务</text>

            <view class="info-item">
                <text class="info-label">车牌号码</text>
                <text>{{ orderDetail.carNumber }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">交易时间</text>
                <text>{{ orderDetail.transactionTime }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">停车时长</text>
                <text>{{ orderDetail.parkingDuration }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">订单类型</text>
                <text>{{ orderDetail.orderType }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">支付方式</text>
                <text>{{ orderDetail.paymentMethod }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">订单号</text>
                <view class="order-number-container">
                    <text>{{ orderDetail.orderNumber }}</text>
                    <image class="copy-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png"
                        mode="aspectFit" @tap="copyOrderNumber"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 控制金额是否展开
            amountExpanded: false,
            // 订单详情数据
            orderDetail: {
                actualAmount: '8.00',
                orderAmount: '8.00',
                carNumber: '冀TQ2F09',
                transactionTime: '2025-08-04 18:41:06',
                parkingDuration: '4时16分53秒',
                orderType: '停车',
                paymentMethod: '微信',
                orderNumber: 'BK250804184038818'
            }
        }
    },
    methods: {
        // 切换金额展开状态
        toggleAmountExpand() {
            this.amountExpanded = !this.amountExpanded;
        },

        // 复制订单号
        copyOrderNumber() {
            // 使用uni.setClipboardData API复制订单号
            uni.setClipboardData({
                data: this.orderDetail.orderNumber,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success',
                        duration: 2000
                    });
                },
                fail: () => {
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        }
    },
    onLoad() {
        // 页面加载时可以从路由参数或API获取订单详情
        // 这里使用默认数据
        console.log('订单详情页面加载');
    }
}
</script>

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