<template>
    <view class="monthly-payment-container">
        <!-- 顶部标题 -->
        <view class="header">
            <text class="header-title">{{ headerTitle }}</text>
            <u-icon :name="isDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28" @tap="toggleDropdown"></u-icon>
        </view>

        <!-- 下拉停车场列表 -->
        <view v-if="isDropdownOpen" class="parking-list">
            <!-- 搜索框 -->
            <view class="search-box">
                <u-icon name="search" size="40" color="#999" class="search-icon" />
                <input type="text" placeholder="搜索停车场" class="search-input" />
            </view>

            <!-- 停车场列表 -->
            <view class="parking-items">
                <view class="parking-item" v-for="(park, index) in parkingLots" :key="index"
                    @tap="selectParkingLot(park)">
                    <view class="parking-item-left">
                        <view class="parking-spaces" v-if="park.remainingSpaces > 0">
                            <text class="spaces-label">剩余车位</text>
                            <text class="spaces-number">{{ park.remainingSpaces }}</text>
                        </view>
                    </view>
                    <view class="parking-item-right">
                        <text class="parking-name">{{ park.name }}</text>
                        <text class="parking-distance">{{ park.distance }}km</text>
                        <text class="parking-address">{{ park.address }}</text>
                    </view>
                    <view class="parking-selected" v-if="park.isSelected">✔</view>
                </view>
            </view>
        </view>

        <view class="options-list">
            <view class="overlay" v-if="isDropdownOpen"></view>
            <!-- 车辆信息 -->
            <view class="car-info">
                <image class="car-image" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/car.png"
                    mode="aspectFit" />
            </view>

            <!-- 停车场信息 -->
            <view class="park-info">
                <text class="park-name">衡水市市民服务中心地下停车场</text>
                <text class="park-type">地下</text>
            </view>

            <!-- 支付金额 -->
            <view class="payment-amount">
                <text class="amount-label">支付金额</text>
                <text class="amount-value">¥{{ paymentAmount.toFixed(2) }}</text>
            </view>

            <!-- 选项列表 -->
            <!-- 选择车牌 -->
            <view class="option-item" @tap="selectCarPlate">
                <view v-if="selectedCarPlate" class="option-box">
                    <view class="option-label option-val">{{ selectedCarPlate }}</view>
                    <view class="option-right">
                        <image class="option-image"
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_refresh.png"
                            mode="aspectFit" />
                        <image class="option-image"
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_finish.png"
                            mode="aspectFit" />
                    </view>
                </view>
                <view v-else class="option-box">
                    <text class="option-label">请选择车牌</text>
                    <u-icon name="arrow-right" size="30" />
                </view>
            </view>

            <!-- 计费规则 -->
            <view class="option-item" @tap="showPriceRule">
                <view v-if="monthPrice" class="option-box">
                    <view class="option-label option-val2">{{ monthPrice + '元/月' }}</view>
                </view>
                <view v-else class="option-box">
                    <text class="option-label">计费规则</text>
                    <u-icon name="arrow-right" size="30" />
                </view>
            </view>

            <!-- 包月月数 -->
            <view class="option-item" @tap="selectMonthCount">
                <view v-if="monthCount" class="option-box">
                    <view class="option-label option-val">{{ monthCount + '个月' }}</view>
                    <view class="option-right">
                        <image class="option-image"
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_refresh.png"
                            mode="aspectFit" />
                        <image class="option-image"
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_finish.png"
                            mode="aspectFit" />
                    </view>
                </view>
                <view v-else class="option-box">
                    <text class="option-label">包月月数</text>
                    <u-icon name="arrow-right" size="30" />
                </view>
            </view>

            <!-- 开始时间 -->
            <view class="option-item" @tap="selectStartTime">
                <view class="option-box">
                    <text class="option-label">开始时间</text>
                    <text class="option-value">{{ startTime }}</text>
                </view>
            </view>

            <!-- 结束时间 -->
            <view class="option-item" @tap="selectEndTime">
                <view class="option-box">
                    <text class="option-label">结束时间</text>
                    <text class="option-value">{{ endTime || '--年--月--日' }}</text>
                </view>
            </view>

            <!-- 下一步按钮 -->
            <view class="next-step-btn" @tap="goToNextStep">
                <text class="next-step-text">下一步</text>
            </view>
        </view>

        <!-- 订单记录 -->
        <view class="order-record" @tap="viewOrderRecords">
            <text class="order-record-text">订单记录>></text>
        </view>
    </view>
</template>

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

export default {
    data() {
        return {
            // 页面数据
            selectedCarPlate: '鄂FW3337',
            monthCount: 8,
            startTime: '2025-08-05 00:00:00',
            endTime: '',
            paymentAmount: 2400.00,
            monthPrice: 300.00,
            // 下拉列表相关
            isDropdownOpen: false,
            headerTitle: '衡水市民服务中心地下停车场',
            parkingLots: [
                {
                    id: 1,
                    name: '衡水市民服务中心地下停车场',
                    distance: '0.45',
                    address: '衡水市中心街123号',
                    remainingSpaces: 124,
                    isSelected: true
                },
                {
                    id: 2,
                    name: '衡水市民服务中心地下停车场',
                    distance: '0.45',
                    address: '衡水市中心街123号',
                    remainingSpaces: 124,
                    isSelected: false
                },
                {
                    id: 3,
                    name: '衡水市民服务中心地下停车场',
                    distance: '0.45',
                    address: '衡水市中心街123号',
                    remainingSpaces: 124,
                    isSelected: false
                },
                {
                    id: 4,
                    name: '衡水市民服务中心地下停车场',
                    distance: '0.45',
                    address: '衡水市中心街123号',
                    remainingSpaces: 124,
                    isSelected: false
                }
            ]
        }
    },
    computed: {
        // 计算是否所有必填项都已填写
        isAllFilled() {
            return this.selectedCarPlate && this.monthCount > 0 && this.startTime;
        }
    },
    methods: {
        // 切换下拉列表显示状态
        toggleDropdown() {
            this.isDropdownOpen = !this.isDropdownOpen;
        },

        // 选择停车场
        selectParkingLot(park) {
            // 先取消所有选中状态
            this.parkingLots.forEach(item => {
                item.isSelected = false;
            });
            // 设置当前选中
            park.isSelected = true;
            // 更新头部标题
            this.$set(this, 'headerTitle', park.name);
            // 关闭下拉列表
            this.isDropdownOpen = false;
        },

        // 选择车牌
        selectCarPlate() {
            console.log('选择车牌');
        },

        // 显示计费规则
        showPriceRule() {
            console.log('显示计费规则');
        },

        // 选择包月月数
        selectMonthCount() {
            console.log('选择包月月数');
        },

        // 选择开始时间
        selectStartTime() {
            console.log('选择开始时间');
        },

        // 选择结束时间
        selectEndTime() {
            console.log('选择结束时间');
        },

        // 下一步
        goToNextStep() {
            if (!this.isAllFilled) {
                return;
            }
            NavgateTo('../parkOrderDetail/index');
        },

        // 查看订单记录
        viewOrderRecords() {
            NavgateTo('../monthlyPaymentOrder/index');
        }
    },
    onLoad() {
        // 页面加载时的初始化逻辑
        console.log('包月支付页面加载');
        // 初始化支付金额
        this.paymentAmount = this.monthCount * this.monthPrice;
    }
}
</script>

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