<template>
    <view class="container">
        <view class="tabs">
            <view v-for="(item, index) in categoryList" :key="index"
                :class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
                {{ item.category_name }}
            </view>
        </view>

        <!-- 订单列表 -->
        <view class="order-list">
            <view v-for="(order, index) in orders" :key="index" class="order-card">
                <view class="order-header">
                    <text class="order-number">订单编号：{{ order.order_no }}</text>
                    <text class="order-status" :class="{
                        'pending': order.order_status == '1',
                        'using': order.order_status == '2',
                        'expired': order.order_status == '3'
                    }">
                        {{ order.order_status == '1' ? '待支付' : order.order_status == '2' ? '使用中' : order.order_status ==
                        '3' ? '已过期' : '' }}
                    </text>
                </view>
                <view class="order-content">
                    <view class="order-item">
                        <text class="order-label">车场名称</text>
                        <text class="order-value">{{ order.Parking.parking_name }}</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">车牌号</text>
                        <text class="order-value">{{ order.community_car.car_number }}</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">包月月数</text>
                        <text class="order-value">{{ order.month_count }}个月</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">开始时间</text>
                        <text class="order-value">{{ order.start_time }}</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">到期时间</text>
                        <text class="order-value">{{ order.end_time }}</text>
                    </view>
                    <view class="order-item amount">
                        <text class="order-label">订单金额</text>
                        <text class="order-value amount-value">¥{{ order.total_amount }}</text>
                    </view>

                    <!-- 根据订单状态显示不同内容 -->
                    <view v-if="order.order_status == '2' || order.order_status === '3'" class="order-item">
                        <text class="order-label">付款时间</text>
                        <text class="order-value">{{ order.pay_time }}</text>
                    </view>

                    <view v-if="order.order_status == '2'" class="order-item">
                        <text class="order-label">支付状态</text>
                        <text class="order-value paid">已支付</text>
                    </view>
                </view>

                <!-- 待支付订单显示操作按钮 -->
                <view v-if="order.status === 'pending'" class="order-footer">
                    <view class="cancel-button" @tap="cancelOrder(order)">取消订单</view>
                    <view class="pay-button" @tap="goToPayment(order)">去支付</view>
                </view>
            </view>
        </view>
    </view>
</template>

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

export default {
    data() {
        return {
            categoryList: [
                {
                    category_name: '全部',
                    category_id: 0
                },
                {
                    category_name: '待支付',
                    category_id: 1
                },
                {
                    category_name: '使用中',
                    category_id: 2
                },
                {
                    category_name: '已过期',
                    category_id: 3
                },
            ],
            selectedTab: 0,
            orders: []
        }
    },
    methods: {
        selectTab(index, item) {
            this.selectedTab = index;
            this.getOrderList()
        },
        // 取消订单
        cancelOrder(order) {
            console.log('取消订单:', order);
        },
        // 去支付
        goToPayment(order) {
            NavgateTo('../parkOrderDetail/index');
        },
        // 获取订单列表
        getOrderList() {
            const params = {
                user_id: uni.getStorageSync('userId'),
                order_status: this.selectedTab,
            }
            if (params.order_status == 0) {
                params.order_status = ''
            }
            request(apiArr.monthCardOrderList, "POST", params).then(res => {
                this.orders = res.month_card_order_list;
            })
        },
        onLoad() {
            this.getOrderList()
        }
    },
}
</script>

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