<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>
            <view class="overlay" v-if="isDropdownOpen" />
            <!-- 车辆选择区域 -->
            <view class="changeCar">
                <view class="car-selector" @tap="toggleCarDropdown">
                    <text class="selected-car-text">{{ selectedCar || '选择车辆' }}</text>
                    <u-icon :name="isCarDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
                </view>

                <!-- 车辆下拉列表 -->
                <view v-if="isCarDropdownOpen" class="car-dropdown">
                    <view class="dropdown-arrow"></view>
                    <view class="car-item" v-for="(car, index) in cars" :key="index" @click="selectCar(car)">
                        {{ car }}
                    </view>
                </view>
            </view>
            <view class="container">
                <view class="title">请输入车牌号码</view>
                <car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"
                    ref="carNumberInput" />
                <view class="selectColorBox" @click="show = true">
                    <view>车牌颜色</view>
                    <view class="selectColor">
                        <view class="color">{{ color }}</view>
                        <u-icon name="arrow-right" size="25"></u-icon>
                    </view>
                </view>
            </view>
            <view class="order-record" @tap="selectCost">
                <text class="order-record-text">查询停车费>></text>
            </view>

            <!-- 停车费展示部分 -->
            <view v-if="showCost" class="cost-container">
                <view>
                    <image class="cost-image"
                        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderLoading.png"
                        mode="aspectFit" />
                </view>
                <view class="cost-header">
                    <text class="cost-title">{{ parkingLotName }} <text class="cost-title2">待支付</text></text>
                </view>
                <view class="cost-amount">
                    <text class="amount-symbol">¥</text>
                    <text class="amount-number">{{ costAmount }}</text>
                </view>
                <view class="cost-info">
                    <view class="info-item">
                        <text class="info-label">车牌号：</text>
                        <text class="info-value">{{ currentCarNumber }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">进场时间：</text>
                        <text class="info-value">{{ entryTime }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">计费时间：</text>
                        <text class="info-value">{{ billingTime }}</text>
                    </view>
                </view>
                <view class="notice">
                    <text class="notice-text">⚠️ 请于付款后15分钟内离场否则将加收停车费</text>
                </view>
                <view class="payment-methods">
                    <view class="payment-item" :class="{ 'selected': paymentMethod === 'wechat' }"
                        @tap="selectPayment('wechat')">
                        <view class="payment-item-content">
                            <image
                                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
                                mode="aspectFit" class="payment-icon"></image>
                            <text class="payment-name">微信支付</text>
                        </view>
                        <view v-if="paymentMethod === 'wechat'" class="payment-selected"></view>
                    </view>
                </view>
                <view class="pay-button" @tap="confirmPayment">立即付款</view>
            </view>
            <view v-else class="cost-container not-found">
               未找到停车记录
            </view>

            <!-- 选择车牌颜色 -->
            <u-popup :show="show" :round="30" mode="bottom" @close="onClose">
                <view class="payIpt">
                    <view class="tit">选择车牌颜色</view>
                    <!-- 颜色选择列表 -->
                    <scroll-view class="color-list" scroll-y>
                        <view class="color-item" :class="{ 'active': selectedColorIndex === index }"
                            v-for="(item, index) in colorOptions" :key="index" @click="selectColor(index)">
                            {{ item }}
                        </view>
                    </scroll-view>
                    <!-- 底部按钮 -->
                    <view class="popup-footer">
                        <view class="cancel-btn" @click="onClose">取消</view>
                        <view class="confirm-btn" @click="confirmColor">确定</view>
                    </view>
                </view>
            </u-popup>
        </view>
    </view>
</template>

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

export default {
    data() {
        return {
            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
                }
            ],

            defaultNum: '',
            color: '请选择',
            show: false,
            // 颜色选项列表
            colorOptions: ['蓝色', '黄色', '黑色', '白色', '绿色', '渐变绿底黑字', '黄绿双拼底黑字'],
            // 当前选中的颜色索引
            selectedColorIndex: -1,

            // 车辆选择相关数据
            isCarDropdownOpen: false,
            selectedCar: '',
            cars: ['冀A01233', '冀T01234', '其他车辆'],

            // 停车费相关数据
            showCost: false,
            parkingLotName: '上海公馆停车场',
            costAmount: '280.00',
            currentCarNumber: '冀T11033',
            entryTime: '2025-08-05 12:00:00',
            billingTime: '3天12时37分44秒',
            paymentMethod: 'wechat'
        }
    },
    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;
        },
        numberInputResult(e) {
            this.defaultNum = e;

            // 使用$nextTick确保DOM更新完成后再尝试操作组件
            this.$nextTick(() => {
                if (this.$refs.carNumberInput) {
                    // 直接更新子组件的inputList数组
                    const valList = e.split("");

                    if (e == '其他车辆') {
                        for (let i = 0; i < 8; i++) {
                            this.$refs.carNumberInput.inputList[i] = ' ';
                        }
                    } else {
                        for (let i in valList) {
                            this.$refs.carNumberInput.inputList[i] = valList[i];
                        }
                    }
                    // 强制子组件更新
                    this.$refs.carNumberInput.$forceUpdate();
                }
            });
        },
        onClose() {
            this.show = false;
        },
        // 选择颜色
        selectColor(index) {
            this.selectedColorIndex = index;
        },
        // 确认选择的颜色
        confirmColor() {
            if (this.selectedColorIndex !== -1) {
                this.color = this.colorOptions[this.selectedColorIndex];
            }
            this.show = false;
        },
        onLoad() {
        },

        // 切换车辆下拉列表显示状态
        toggleCarDropdown() {
            this.isCarDropdownOpen = !this.isCarDropdownOpen;
        },

        // 选择车辆
        selectCar(car) {
            this.selectedCar = car;
            this.isCarDropdownOpen = false;
            if (car == '其他车辆') {
                NavgateTo('../addCar/index')
            }
            this.numberInputResult(car)
        },

        // 查询停车费
        selectCost() {
            this.showCost = true;
        },

        // 选择支付方式
        selectPayment(method) {
            this.paymentMethod = method;
        },

        // 确认付款
        confirmPayment() {
            console.log('确认付款', this.paymentMethod);
            // 这里可以添加实际的支付逻辑
            // 例如调用支付API等
        },
    }
}
</script>

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