<template>
    <view style="position: relative;">
        <view class="uni-padding-wrap">
            <view class="" style="font-size: 36rpx; line-height: 50rpx; color: #121212; text-align: center;width: 100%;margin-top: 52rpx;">选择时间</view>
            <image src="@/static/icon/close2.png" style="width: 60rpx;height: 60rpx; position: absolute; top: 30rpx; right: 30rpx;" @click="closePopup"/>
        </view>
        <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
            <picker-view-column>
                <view class="item" v-for="(item,index) in dateList" :key="index">{{item.label}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in hourList" :key="index">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in minuteList" :key="index">{{item}}</view>
            </picker-view-column>
        </picker-view>
        <view class="line"></view>
        <view class="btn">
            <view class="btn1" @click="reset">重置</view>
            <view class="btn2" @click="confirm">确定</view>
        </view>
    </view>
</template>


<script>
    export default {
        data: function () {
            const date = new Date();
            const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
            // 生成今天起未来7天，若当天已过22:00则不加入当天
            const dateList = [];
            for (let i = 0; i < 3; i++) {
                const d = new Date(date.getFullYear(), date.getMonth(), date.getDate() + i);
                // 判断当天是否已过22:00
                if (i === 0) {
                    const now = new Date();
                    if (now.getFullYear() === d.getFullYear() && now.getMonth() === d.getMonth() && now.getDate() === d.getDate()) {
                        if (now.getHours() > 21 || (now.getHours() === 21 && now.getMinutes() >= 60)) {
                            continue; // 跳过当天
                        }
                    }
                }
                const mm = (d.getMonth() + 1).toString().padStart(2, '0');
                const dd = d.getDate().toString().padStart(2, '0');
                const week = weekMap[d.getDay()];
                dateList.push({
                    label: `${mm}月${dd}日周${week}`,
                    date: d
                });
            }
            // 默认选中今天、当前小时、当前分钟
            return {
                title: 'picker-view',
                dateList,
                hourList: [],
                minuteList: [],
                value: [0, 0, 0],
                visible: true,
                indicatorStyle: `height: 50px;`
            }
        },

        mounted() {
            this.updateHourAndMinuteList(0, 0);
        },
        methods: {
            bindChange: function (e) {
                const val = e.detail.value;
                // 选中项索引分别为dateList、hourList、minuteList
                this.value = val;
                // 联动更新小时和分钟
                this.updateHourAndMinuteList(val[0], val[1]);
            },

            // 联动生成小时和分钟列表
            updateHourAndMinuteList(dateIdx, hourIdx) {
                const now = new Date();
                const selectedDate = this.dateList[dateIdx]?.date;
                let hourList = [];
                let minuteList = [];
                // 判断是否为今天
                const isToday = selectedDate &&
                    selectedDate.getFullYear() === now.getFullYear() &&
                    selectedDate.getMonth() === now.getMonth() &&
                    selectedDate.getDate() === now.getDate();
                if (isToday) {
                    // 如果当前时间已超过 22:00，则不显示任何可选时间
                    if (now.getHours() > 21 || (now.getHours() === 21 && now.getMinutes() >= 60)) {
                        hourList = [];
                        minuteList = [];
                    } else {
                        for (let i = 6; i <= 21; i++) {
                            if (i > now.getHours()) {
                                hourList.push(i < 10 ? `0${i}` : `${i}`);
                            } else if (i === now.getHours()) {
                                // 当前小时，分钟要过滤
                                let hasValidMinute = false;
                                for (let m = 0; m < 60; m += 10) {
                                    if (m >= now.getMinutes()) {
                                        hasValidMinute = true;
                                        break;
                                    }
                                }
                                if (hasValidMinute) {
                                    hourList.push(i < 10 ? `0${i}` : `${i}`);
                                }
                            }
                        }
                    }
                } else {
                    for (let i = 6; i <= 21; i++) {
                        hourList.push(i < 10 ? `0${i}` : `${i}`);
                    }
                }
                // 选中的小时
                let selectedHour = hourList[hourIdx] ? parseInt(hourList[hourIdx]) : parseInt(hourList[0]);
                if (isToday && hourList.length > 0 && selectedHour === now.getHours()) {
                    for (let m = 0; m < 60; m += 10) {
                        if (m >= now.getMinutes()) {
                            minuteList.push(m < 10 ? `0${m}` : `${m}`);
                        }
                    }
                } else if (hourList.length > 0) {
                    for (let m = 0; m < 60; m += 10) {
                        minuteList.push(m < 10 ? `0${m}` : `${m}`);
                    }
                } else {
                    minuteList = [];
                }
                // 修正value
                let value = [...this.value];
                // hourIdx/minuteIdx 越界修正
                if (value[1] >= hourList.length) value[1] = 0;
                if (value[2] >= minuteList.length) value[2] = 0;
                this.hourList = hourList;
                this.minuteList = minuteList;
                this.value = [dateIdx, value[1], value[2]];
            },

            // 重置
            reset: function () {
                // 重置为今天、可选的第一个小时和分钟
                this.updateHourAndMinuteList(0, 0);
            },

            // 确认
            confirm() {
                // 获取选中索引
                const [dateIdx, hourIdx, minuteIdx] = this.value;
                const dateObj = this.dateList[dateIdx];
                console.log("🚀 ~ dateObj:", this.value)
                const hour = this.hourList[hourIdx];
                const minute = this.minuteList[minuteIdx];
                // 组装时间戳
                let ts = 0;
                let endts = 0;
                if (dateObj && hour !== undefined && minute !== undefined) {
                    // 构造 yyyy-mm-dd hh:mm:00 字符串
                    const d = dateObj.date;
                    const yyyy = d.getFullYear();

                    const mm = (d.getMonth() + 1).toString().padStart(2, '0');
                    const dd = d.getDate().toString().padStart(2, '0');
                    const hh = hour.toString().padStart(2, '0');
                    const mi = minute.toString().padStart(2, '0');
                    const dateStr = `${yyyy}-${mm}-${dd} ${hh}:${mi}:00`;
                    const endStr = `${yyyy}-${mm}-${dd} 22:00:00`;
                    console.log("🚀 ~ endStr:", endStr)
                    ts = Math.floor(new Date(dateStr.replace(/-/g, '/')).getTime() / 1000);
                    endts = Math.floor(new Date(endStr.replace(/-/g, '/')).getTime() / 1000);
                }
                // 传递给父组件
                this.$emit('confirm', {
                    date: dateObj.date,
                    dateLabel: dateObj.label,
                    hour,
                    minute,
                    value: `${dateObj.label} ${hour}:${minute}`,
                    timestamp: ts,
                    endtimestamp: endts
                });
                this.$emit('close');
            },

            closePopup() {
                this.$emit('close');
            }
        }
    }
</script>


<style>
    .uni-padding-wrap {
        display: flex;
    }

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
        font-size: 32rpx;
	}

    .line {
        margin-top: 62rpx;
        height: 2rpx;
        background: #E5E5E5;
    }
    
    .btn {
        margin-top: 44rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32rpx;
    }

    .btn1, .btn2 {
        width: 335rpx;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        font-size: 32rpx;
        border-radius: 8rpx;
        margin-bottom: 60rpx;
    }

    .btn1 {
        background: #F6F7F8;
        color: #303133;
    }

    .btn2 {
        background: #365A9A;
        color: #fff;
    }
</style>
