<template>
    <view class="monthly-payment-container">
        <!-- 顶部标题 -->
        <view class="header" @tap="toggleDropdown">
            <text class="header-title">{{ headerTitle }}</text>
            <u-icon :name="isDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28"></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">
                            <text class="spaces-label">剩余车位</text>
                            <text class="spaces-number">{{ park.space_count }}</text>
                        </view>
                    </view>
                    <view class="parking-item-right">
                        <text class="parking-name">{{ park.parking_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" @tap="toggleDropdown"></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" v-if="headerTitle != '请选择停车场'">
                <text class="park-name">{{ headerTitle }}</text>
                <text class="park-type">{{ selectedParkType == 1 ? '地上' : '地下' }}</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">
                <view class="option-box">
                    <text class="option-label">开始时间</text>
                    <text class="option-value">{{ startTime }}</text>
                </view>
            </view>

            <!-- 结束时间 -->
            <view class="option-item">
                <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>

        <!-- 车牌选择弹窗 -->
        <u-popup :show="showCarPlatePopup" :round="30" mode="bottom" :closeable="true" close-icon-position="top-right"
            @close="onCloseCarPlatePopup">
            <view class="car-plate-popup">
                <view class="popup-header">
                    <text class="popup-title">选择车牌</text>
                </view>
                <view class="car-plate-list">
                    <view class="car-plate-item" v-for="(plate, index) in carPlateList" :key="index"
                        @tap="onSelectCarPlate(plate)" :class="{ 'selected': selectedCarPlate === plate.car_number }">
                        <text class="plate-number">{{ plate.car_number }}</text>
                        <u-icon v-if="selectedCarPlate === plate.car_number" name="checkmark-circle" size="28"
                            color="#ff4219"></u-icon>
                    </view>
                </view>
            </view>
        </u-popup>

        <!-- 计费规则弹窗 -->
        <u-popup :show="billingRulesPopup" :round="30" mode="bottom" :closeable="true" close-icon-position="top-right"
            @close="onCloseBillingRulesPopup">
            <view class="car-plate-popup">
                <view class="popup-header">
                    <text class="popup-title">计费规则</text>
                </view>
                <view class="car-plate-list">
                    <view class="car-plate-item" v-for="(rule, index) in billingRulesList" :key="index"
                        @tap="onSelectBillingRule(rule)" :class="{ 'selected': monthPrice === rule.price }">
                        <text class="plate-number">{{ rule.billing_rule_name }}</text>
                        <text class="rule-price">¥{{ rule.month_price }}/月</text>
                        <u-icon v-if="monthPrice === rule.month_price" name="checkmark-circle" size="28"
                            color="#ff4219"></u-icon>
                    </view>
                </view>
            </view>
        </u-popup>

        <!-- 包月月数选择弹窗 -->
        <u-popup :show="showMonthCountPopup" :round="30" mode="bottom" :closeable="true" close-icon-position="top-right"
            @close="onCloseMonthCountPopup">
            <view class="car-plate-popup">
                <view class="popup-header">
                    <text class="popup-title">选择包月月数</text>
                </view>
                <view class="car-plate-list">
                    <view class="car-plate-item" v-for="(month, index) in monthList" :key="index"
                        @tap="onSelectMonthCount(month)" :class="{ 'selected': monthCount === month.value }">
                        <text class="plate-number">{{ month.label }}</text>
                        <u-icon v-if="monthCount === month.value" name="checkmark-circle" size="28"
                            color="#ff4219"></u-icon>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

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

export default {
    data() {
        return {
            // 页面数据
            selectedCarPlate: '',
            monthCount: '',
            startTime: '',
            endTime: '',
            paymentAmount: 2400.00,
            monthPrice: '',
            // 下拉列表相关
            isDropdownOpen: false,
            headerTitle: '请选择停车场',
            selectedParkType: '',
            selectedParkId: '',//停车场id
            parkingLots: [],
            // 选中车牌
            showCarPlatePopup: false,
            carPlateList: [],
            selectedCarPlateId: '',//选中的车牌id
            //计费规则
            billingRulesPopup: false,
            billingRulesList: [],
            selectedBillingRule: '',// 选中的计费规则
            // 包月月数
            showMonthCountPopup: false,
            monthList: Array.from({ length: 12 }, (_, i) => ({
                value: i + 1,
                label: (i + 1) + '个月'
            }))
        }
    },
    computed: {
        isAllFilled() {
            return this.selectedParkId && this.selectedCarPlateId && 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.parking_name);
            this.$set(this, 'selectedParkType', park.space_type);
            this.selectedParkId = park.id;
            this.isDropdownOpen = false;
        },

        selectCarPlate() {
            this.showCarPlatePopup = true;
        },

        onCloseCarPlatePopup() {
            this.showCarPlatePopup = false;
        },

        // 选择车牌
        onSelectCarPlate(plate) {
            this.selectedCarPlate = plate.car_number;
            this.selectedCarPlateId = plate.id;
            this.showCarPlatePopup = false;
        },

        // 显示计费规则
        showPriceRule() {
            if (!this.selectedParkId) {
                uni.showToast({
                    title: '请选择停车场',
                    icon: 'none'
                })
                return;
            }
            this.getBillingRulesList();
            this.billingRulesPopup = true;
        },

        // 关闭计费规则弹窗
        onCloseBillingRulesPopup() {
            this.billingRulesPopup = false;
        },

        // 选择计费规则
        onSelectBillingRule(rule) {
            this.selectedBillingRule = rule.billing_rule_name;
            this.monthPrice = rule.month_price;
            this.paymentAmount = this.monthCount * this.monthPrice;
            this.billingRulesPopup = false;
        },

        // 选择包月月数
        selectMonthCount() {
            this.showMonthCountPopup = true;
        },

        // 关闭包月月数弹窗
        onCloseMonthCountPopup() {
            this.showMonthCountPopup = false;
        },

        // 选择具体月数
        onSelectMonthCount(month) {
            this.monthCount = month.value;

            if (this.startTime) {
                const startDate = new Date(this.startTime);
                // 正确计算结束日期：从开始日期加上指定月数
                const endDate = new Date(startDate);
                endDate.setMonth(endDate.getMonth() + this.monthCount);
                // 减去一天，确保是完整的月份
                endDate.setDate(endDate.getDate() - 1);
                // 设置为最后一天的 23:59:59
                endDate.setHours(23, 59, 59, 999);
                // 使用手动构建日期字符串的方式，避免时区问题
                const endYear = endDate.getFullYear();
                const endMonth = String(endDate.getMonth() + 1).padStart(2, '0');
                const endDay = String(endDate.getDate()).padStart(2, '0');
                const endHours = String(endDate.getHours()).padStart(2, '0');
                const endMinutes = String(endDate.getMinutes()).padStart(2, '0');
                const endSeconds = String(endDate.getSeconds()).padStart(2, '0');
                this.endTime = `${endYear}-${endMonth}-${endDay} ${endHours}:${endMinutes}:${endSeconds}`;
            }

            this.paymentAmount = this.monthCount * this.monthPrice;
            this.showMonthCountPopup = false;
        },

        // 下一步
        goToNextStep() {
            if (!this.isAllFilled) {
                uni.showModal({
                    title: "提示",
                    content: "请填写完整信息",
                    showCancel: false,
                });
                return;
            }
            // 构建跳转参数
            const params = {
                headerTitle: this.headerTitle,
                selectedParkType: this.selectedParkType,
                selectedParkId: this.selectedParkId,
                selectedCarPlateId: this.selectedCarPlateId,
                selectedCarPlate: this.selectedCarPlate,
                monthPrice: this.monthPrice,
                monthCount: this.monthCount,
                startTime: this.startTime,
                endTime: this.endTime,
                paymentAmount: this.paymentAmount,
                selectedBillingRule: this.selectedBillingRule,
            };
            NavgateTo(`../parkOrderDetail/index?item=${encodeURIComponent(JSON.stringify(params))}`);
        },

        // 查看订单记录
        viewOrderRecords() {
            NavgateTo('../monthlyPaymentOrder/index');
        },

        // 获取停车场列表
        getParkList() {
            request(apiArr.parkList, "POST", {}).then((res) => {
                // 计算每个停车场的距离并添加到对象中
                this.parkingLots = res.parking_list.map(park => {
                    try {
                        let locationData = uni.getStorageSync('location');
                        if (locationData) {
                            let location = locationData;
                            const userLat = location.lat;
                            const userLng = location.lng;
                            const parkLat = park.lat;
                            const parkLng = park.lng;

                            // 使用Haversine公式计算距离（单位：千米）
                            const R = 6371; // 地球半径（千米）
                            const dLat = (parkLat - userLat) * Math.PI / 180;
                            const dLng = (parkLng - userLng) * Math.PI / 180;
                            const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                                Math.cos(userLat * Math.PI / 180) * Math.cos(parkLat * Math.PI / 180) *
                                Math.sin(dLng / 2) * Math.sin(dLng / 2);
                            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                            const distance = (R * c).toFixed(1);

                            // 将距离添加到停车场对象中
                            return { ...park, distance };
                        }
                        return park;
                    } catch (error) {
                        console.error('计算停车场距离时出错:', error);
                        return park;
                    }
                });

                // 按照距离从近到远排序
                this.parkingLots.sort((a, b) => {
                    // 有距离数据的排在前面，无距离数据的排在后面
                    if (a.distance !== undefined && b.distance !== undefined) {
                        return a.distance - b.distance;
                    }
                    if (a.distance !== undefined) return -1;
                    if (b.distance !== undefined) return 1;
                    return 0;
                });
            })
        },
        // 获取车牌列表
        getCarPlateList() {
            request(apiArr.carList, "POST", {}).then((res) => {
                this.carPlateList = res.car_list;
            })
        },

        // 获取计费规则列表
        getBillingRulesList() {
            const params = {
                parking_id: this.selectedParkId,
            }
            request(apiArr.billingRulesList, "POST", params).then((res) => {
                this.billingRulesList = res.billing_rules_list;
            })
        },
    },
    onLoad() {
        // 设置开始时间为今天的 0:00:00
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
        const day = String(today.getDate()).padStart(2, '0');
        // 直接构建格式为 'YYYY-MM-DD HH:mm:ss' 的字符串
        this.startTime = `${year}-${month}-${day} 00:00:00`;

        // 初始化支付金额
        this.paymentAmount = this.monthCount * this.monthPrice;
        this.getParkList();
        this.getCarPlateList();
    }
}
</script>

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