<template>
    <view class="order-detail-container">
        <!-- 订单状态区域 -->
        <view class="order-status-section">
            <view class="status-left">
                <text class="status-title">订单已支付</text>
                <text class="park-name">{{ orderDetail.parking.parking_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.pay_method }}</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.pay_method }}</text>
            </view>
        </view>

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

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

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

            <view class="info-item">
                <text class="info-label">停车时长</text>
                <text>{{ calculateParkingDuration() }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">订单类型</text>
                <text>停车</text>
            </view>

            <view class="info-item">
                <text class="info-label">支付方式</text>
                <text>{{ orderDetail.pay_method == 1 ? '微信' : orderDetail.pay_method == 2 ? '支付宝' : '其他' }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">订单号</text>
                <view class="order-number-container">
                    <text>{{ orderDetail.order_no }}</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>
import {
  isPhone,
  picUrl,
  request,
  upload,
  NavgateTo
} from '../../../utils';
import { apiArr } from '@/api/park.js'

export default {
    data() {
        return {
            // 控制金额是否展开
            amountExpanded: false,
            // 订单详情数据
            orderDetail: {}
        }
    },
    methods: {
        // 切换金额展开状态
        toggleAmountExpand() {
            this.amountExpanded = !this.amountExpanded;
        },

        // 复制订单号
        copyOrderNumber() {
            // 使用uni.setClipboardData API复制订单号
            uni.setClipboardData({
                data: this.orderDetail.order_no,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success',
                        duration: 2000
                    });
                },
                fail: () => {
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        },
        
        // 计算停车时长
        calculateParkingDuration() {
            if (!this.orderDetail || !this.orderDetail.parking_record) {
                return '0分钟';
            }
            
            const inTime = new Date(this.orderDetail.parking_record.in_time);
            const outTime = new Date(this.orderDetail.parking_record.out_time);
            
            // 计算时间差（毫秒）
            const diffMs = outTime - inTime;
            
            // 转换为分钟
            const diffMinutes = Math.floor(diffMs / (1000 * 60));
            
            if (diffMinutes < 60) {
                return `${diffMinutes}分钟`;
            } else {
                const hours = Math.floor(diffMinutes / 60);
                const minutes = diffMinutes % 60;
                if (minutes === 0) {
                    return `${hours}小时`;
                } else {
                    return `${hours}小时${minutes}分钟`;
                }
            }
        }
    },
    onLoad(options) {
        const order = options.order;
        if (order) {
            this.orderDetail = JSON.parse(order);
        }
    }
}
</script>

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