<template>
    <view class="order-list">
        <!-- 订单按月分组显示 -->
        <view class="month-group" v-for="monthGroup in orderData" :key="monthGroup.month">
            <view class="month-header">
                <text class="month-title">{{ monthGroup.month }}</text>
                <text class="month-expense">支出¥{{ monthGroup.totalExpense }}元</text>
            </view>

            <!-- 订单列表 -->
            <view class="order-item" v-for="order in monthGroup.orders" :key="order.id" @tap="viewOrderDetail(order)">
                <view class="order-left">
                    <view class="order-type">
                        <view class="order-type1">
                            <image class="order-icon"
                                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_p.png"
                                mode="aspectFit"></image>
                            <text class="order-type-text">停车</text>
                        </view>
                        <text class="order-status">{{ order.statusText }}</text>
                    </view>

                    <view class="order-park-info">
                        <text class="order-park-name">{{ order.parkName }}</text>
                        <text class="order-amount">¥{{ order.amount }}</text>
                    </view>

                    <view class="order-car-info">
                        <text class="order-car-number">{{ order.carNumber }}</text>
                        <text class="order-car-type">{{ order.carType }}</text>
                    </view>

                    <text class="order-time">{{ order.time }}</text>
                </view>
                <view class="delete-button" @tap.stop="deleteOrder(order)">
                    <u-icon name="trash" size="45rpx"></u-icon>
                </view>
            </view>
        </view>

        <!-- 空状态显示 -->
        <view class="empty-state" v-if="orderData.length === 0">
            <image class="empty-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/empty_order.png"
                mode="aspectFit"></image>
            <text class="empty-text">暂无停车订单</text>
        </view>
    </view>
</template>

<script>
import {
    isPhone,
    picUrl,
    request,
    upload,
    NavgateTo
} from '../../../utils';

export default {
    data() {
        return {
            // 模拟订单数据，实际项目中可能从API获取
            orderData: [
                {
                    month: '2025年08月',
                    totalExpense: '16.00',
                    orders: [
                        {
                            id: 1,
                            parkName: '上海公馆停车场',
                            amount: '8.00',
                            carNumber: '冀TQ2F09',
                            carType: '临时车',
                            carTypeClass: 'temporary',
                            time: '2025-08-04 18:46',
                            status: 'paid',
                            statusText: '已支付'
                        },
                        {
                            id: 2,
                            parkName: '上海公馆停车场',
                            amount: '8.00',
                            carNumber: '冀TQ2F09',
                            carType: '临时车',
                            carTypeClass: 'temporary',
                            time: '2025-08-04 18:46',
                            status: 'paid',
                            statusText: '已支付'
                        }
                    ]
                },
                {
                    month: '2025年08月',
                    totalExpense: '16.00',
                    orders: [
                        {
                            id: 3,
                            parkName: '上海公馆停车场',
                            amount: '8.00',
                            carNumber: '冀TQ2F09',
                            carType: '月租卡',
                            carTypeClass: 'monthly',
                            time: '2025-08-04 18:46',
                            status: 'paid',
                            statusText: '已支付'
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        // 查看订单详情
        viewOrderDetail(order) {
            NavgateTo('../orderDetail/index')
        },

        // 删除订单方法
        deleteOrder(order) {
            console.log("🚀 ~ deleteOrder ~ order:", order)
            uni.showModal({
                title: '确认删除订单',
                content: '你确定删除订单吗？删除之后你将无法再找回该订单',
                success: function (res) {
                    if (res.confirm) {
                        //确认删除
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success',
                            duration: 2000
                        });
                    } else if (res.cancel) {
                        //
                    }
                }
            });
        },

        // 获取订单数据
        getOrderData() {
        }
    },
    onLoad() {
        // 页面加载时获取订单数据
        this.getOrderData();
    }
}
</script>

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