<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">
                            <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">{{ getParkDistance(park.lng, park.lat) }}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.car_number }}
                    </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="showCost1" 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-if="showCost2" 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';
import { apiArr } from '@/api/park.js'

export default {
    data() {
        return {
            isDropdownOpen: false,
            headerTitle: '请选择停车场',
            parkingLots: [],

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

            // 车辆选择相关数据
            isCarDropdownOpen: false,
            selectedCar: '',
            cars: [],

            // 停车费相关数据
            showCost1: false,
            showCost2: false,
            parkingLotName: '上海公馆停车场',
            costAmount: '280.00',
            currentCarNumber: '冀T11033',
            entryTime: '2025-08-05 12:00:00',
            billingTime: '3天12时37分44秒',
            paymentMethod: 'wechat',
            // 定时器ID，用于清除定时器
            timerId: null
        }
    },
    onLoad() {
        this.getParkList();
    },

    // 在组件卸载时清除定时器
    onUnload() {
        if (this.timerId) {
            clearInterval(this.timerId);
            this.timerId = null;
        }
    },
    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.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;
        },
        // 更新计费时间
        updateBillingTime() {
            const entryDateTime = new Date(this.entryTime);
            const currentDateTime = new Date();
            const diff = currentDateTime - entryDateTime;

            // 计算天、时、分、秒
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            // 格式化时间显示
            let timeStr = '';
            if (days > 0) {
                timeStr += days + '天';
            }
            if (hours > 0 || days > 0) {
                timeStr += hours + '时';
            }
            if (minutes > 0 || hours > 0 || days > 0) {
                timeStr += minutes + '分';
            }
            timeStr += seconds + '秒';

            this.billingTime = timeStr;
        },

        // 选择颜色
        selectColor(index) {
            this.selectedColorIndex = index;
        },
        // 确认选择的颜色
        confirmColor() {
            if (this.selectedColorIndex !== -1) {
                this.color = this.colorOptions[this.selectedColorIndex];
            }
            this.show = false;
        },

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

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

        // 查询停车费
        selectCost() {
            const selectedParkingLot = this.parkingLots.find(park => park.isSelected);
            if (!selectedParkingLot) {
                uni.showToast({
                    title: '请先选择停车场',
                    icon: 'none'
                });
                return;
            }
            if (!this.defaultNum) {
                uni.showToast({
                    title: '请输入车牌号',
                    icon: 'none'
                });
                return;
            }
            const params = {
                parking_id: selectedParkingLot.id,
                car_number: this.defaultNum,
            }
            request(apiArr.tempParkingInfo, "POST", params).then((res) => {
                if (res) {
                    this.parkingLotName = res.parking.parking_name;
                    this.costAmount = res.fee_amount;
                    this.currentCarNumber = res.car_number;
                    this.entryTime = res.in_time;
                    // 清除之前可能存在的定时器
                    if (this.timerId) {
                        clearInterval(this.timerId);
                        this.timerId = null;
                    }

                    if (res.car_billing_type == 1) {
                        this.billingTime = '免费车';
                    } else if (res.car_billing_type == 2) {
                        this.billingTime = '月租车';
                    } else {
                        // 计算并实时更新进场时间到现在的时长
                        this.updateBillingTime();
                        // 设置定时器，每秒更新一次
                        this.timerId = setInterval(() => {
                            this.updateBillingTime();
                        }, 1000);
                    }

                    this.showCost1 = true;
                } else {
                    this.showCost2 = true;
                }
            })
        },

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

        // 确认付款
        confirmPayment() {
            const selectedParkingLot = this.parkingLots.find(park => park.isSelected);
            const params = {
                car_number: this.defaultNum,
                parking_id: selectedParkingLot.id,
                user_id: uni.getStorageSync('userId'),
            }
            request(apiArr.tempParkingCreate, "POST", params).then((resVal) => {
                // 根据平台设置不同的trans_type值
                // 小程序: 71, App: 51
                const systemInfo = uni.getSystemInfoSync();
                let trans_type = 51; // 默认App环境

                // 运行时判断是否为小程序环境
                if (systemInfo.platform === 'devtools' || systemInfo.platform === 'unknown') {
                    trans_type = 71; // 开发工具或未知环境默认为小程序
                }

                // 条件编译：针对不同平台设置不同值
                // #ifdef MP
                trans_type = 71; // 所有小程序平台
                // #endif

                // #ifdef APP-PLUS
                trans_type = 51; // App平台
                // #endif

                const param = {
                    order_id: resVal.order_id,
                    user_id: uni.getStorageSync('userId'),
                    trans_type: trans_type
                }
                request(apiArr.tempParkingOrderPreorder, "POST", param).then(res => {
                    if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
                        // 调用微信支付
                        uni.requestPayment({
                            timeStamp: res.timeStamp,
                            nonceStr: res.nonceStr,
                            package: res.package,
                            signType: res.signType,
                            paySign: res.paySign,
                            success: (payRes) => {
                                const params = {
                                    order_id: resVal.order_id,
                                }
                                request(apiArr.tempParkingOrderQuery, "POST", params).then(res => {
                                    this.boxshadow1 = true
                                })

                            },
                            fail: (payErr) => {
                                uni.showToast({
                                    title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
                                    icon: 'none'
                                })
                             // 支付完成后的回调，无论成功失败都会执行
                            }
                        })
                    } else {
                        console.error("获取支付参数失败，缺少必要参数")
                        uni.showToast({
                            title: '获取支付信息失败',
                            icon: 'none'
                        })
                    }
                })
            })
        },
        // 获取车辆列表
        getCarList() {
            const params = {
                user_id: uni.getStorageSync('userId')
            }
            request(apiArr.carList, "POST", params).then((res) => {
                this.cars = res.car_list;
                this.cars.push({
                    car_number: '其他车辆'
                })
            })
        },
        // 获取停车场列表
        getParkList() {
            request(apiArr.parkList, "POST", {}).then((res) => {
                this.parkingLots = res.parking_list;
            })
        },
        // 根据经纬度计算距离
        getParkDistance(parkLng, parkLat) {
            try {
                let locationData = uni.getStorageSync('location');
                if (!locationData) {
                    return '未知';
                }

                let location = locationData;

                const userLat = location.lat;
                const userLng = location.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;

                // 保留一位小数
                return distance.toFixed(1);
            } catch (error) {
                console.error('计算距离时出错:', error);
                return '未知';
            }
        },
    },
    onShow() {
        this.getCarList();
    }
}
</script>

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