<template>
	<view>
		<view class="long-data-picker">
			<picker-view :value="valueDate" indicator-class="select-line" :immediate-change="true"
				:indicator-style="itemHeight" @change="bindDateChange">

				<picker-view-column>
					<view class="long-datetime-item" v-for="(item,index) in dates" :key="index">{{item}}</view>
				</picker-view-column>

				<picker-view-column>
					<view class="long-datetime-item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
				</picker-view-column>

				<picker-view-column>
					<view class="long-datetime-item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
				</picker-view-column>

			</picker-view>
		</view>
	</view>

</template>

<script>
	import moment from './moment.js' //导入文件
	moment.locale('zh-cn')
	export default {
		name: "long-date",
		props: {
			chooseNum: {
				type: Number,
				default: 30
			},
			defaultTime: {
				type: Date,
				default: null
			}

		},



		data() {
			return {
				itemHeight: `height: ${uni.upx2px(88)}px;`,
				dates: [],
				hours: [],
				minutes: [],
				formatdates: [],
				currentTimePlus8Hours: null, // 新增属性
				valueDate: [0, 0, 0]
			};
		},

		computed: {
			//自动计算当前时间
			currentdateindex(nv) {
				console.log(nv)
				if (nv == 0) {
					let h = parseInt(moment().format("HH"))
					this.hours = []
					for (let i = h; i < 24; i++) {
						let str = i;
						if (i < 10) {
							str = '0' + str;
						} else {
							str = '' + str;
						}
						this.hours.push(str);
					}
					this.minutes = []
					let m = parseInt(moment().format("mm"))
					for (let i = 0; i < 60; i++) {
						let str = i;
						if (i < 10) {
							str = '0' + str;
						} else {
							str = '' + str;
						}
						this.minutes.push(str);
					}
				}
			}

		},
		mounted() {
			// 获取当前时间
			this.currentTime = new Date();
			// 计算当前时间加8小时
			this.currentTimePlus8Hours = new Date(this.currentTime);
			this.currentTimePlus8Hours.setHours(this.currentTime.getHours());

			// 使用传入的默认时间或当前时间加8小时作为基准
			const baseTime = this.defaultTime || this.currentTimePlus8Hours;
			this.initDate(baseTime);
			// // 计算当前时间加8小时
			// const now = new Date();
			// now.setHours(now.getHours() + 8);
			// this.currentTimePlus8Hours = now;
			// this.initDate();
		},
		methods: {
			//初始化时间
			initDate(baseTime) {
				// 设置日期数组
				this.dates = [];
				this.formatdates = [];

				// 生成日期选项（从今天开始）
				for (let i = 0; i <= this.chooseNum; i++) {
					const date = moment(baseTime).add(i, 'days');
					this.formatdates.push(date.format("YYYY-MM-DD"));
					this.dates.push(date.format("MMMDo dddd"));
				}

				// 设置时间选项
				this.updateTimeColumns(baseTime);

				// 使用$nextTick确保DOM更新后再设置默认值
				setTimeout(() => {
					this.setDefaultValueDate();
				}, 300)
			},

			// 设置默认选中当前时间+8小时的选项
			setDefaultValueDate() {
				const now = new Date();
				// 计算当前时间+8小时的小时值
				let targetHourStr = now.getHours() + 8;
				if (targetHourStr >= 24) {
					targetHourStr -= 24;
				}
				console.log(this.hours);
				console.log(targetHourStr);
				
				let targetDayStr = now.getDay();
				console.log('targetDayStr',targetDayStr);
				if (targetHourStr >= 24) {
					// targetHourStr -= 24;
					this.valueDate = [0, 0, 0];
				}
				
				// 在hours数组中查找对应的索引
				const hourIndex = this.hours.findIndex(hour => hour == targetHourStr);
				console.log(hourIndex);
				// 设置valueDate，日期和分钟保持默认索引0，只设置小时索引
				if (hourIndex !== -1) {
					this.valueDate = [0, hourIndex, 0];
				} else {
					// 如果找不到对应小时（比如当前时间+8小时超过了今天的可选范围），保持默认
					this.valueDate = [0, 0, 0];
				}
			},

			updateTimeColumns(selectedDate) {
				const isToday = moment(selectedDate).isSame(this.currentTime, 'day');
				const now = new Date();

				// 如果是今天，小时从当前小时开始
				if (isToday) {
					// let currentHour = now.getHours() + 8;
					let currentHour = now.getHours();
					let currentMinute = now.getMinutes();

					// 生成小时选项（从当前小时到23）
					this.hours = [];

					for (let i = currentHour; i < 24; i++) {
						this.hours.push(i.toString().padStart(2, '0'));
					}

					// 生成分钟选项（如果是当前小时，分钟从当前分钟开始；否则从0开始）
					this.minutes = [];
					for (let i = currentMinute; i < 60; i++) {
						this.minutes.push(i.toString().padStart(2, '0'));
					}
					// let startMinute = (i === currentHour) ? currentMinute : 0;
					// for (let i = 0; i < 60; i++) {
					// 	this.minutes.push(i.toString().padStart(2, '0'));
					// }
				} else {
					// 如果不是今天，小时和分钟都从0开始
					this.hours = [];

					for (let i = 0; i < 24; i++) {
						this.hours.push(i.toString().padStart(2, '0'));
					}

					this.minutes = [];
					for (let i = 0; i < 60; i++) {
						this.minutes.push(i.toString().padStart(2, '0'));
					}
				}
			},

			bindDateChange(e) {
				let valueArr = e.detail.value;
				const selectedDate = this.formatdates[valueArr[0]];
				const isToday = moment(selectedDate).isSame(this.currentTime, 'day');

				// 更新时间列
				this.updateTimeColumns(selectedDate);

				// 获取选择的时间
				let dateStr = this.formatdates[valueArr[0]];
				let hourStr = this.hours[valueArr[1]];
				let minuteStr = this.minutes[valueArr[2]];

				// 验证时间是否在当前时间之后
				const selectedTime = new Date(`${dateStr} ${hourStr}:${minuteStr}`);
				if (selectedTime < this.currentTime) {
					uni.showToast({
						title: '不能选择过去的时间',
						icon: 'none'
					});
					return;
				}

				// 验证时间是否在当前时间8小时之内
				if (selectedTime < this.currentTimePlus8Hours) {
					// 允许选择，不做任何处理
				}

				// 触发事件
				this.$emit("select", {
					time: moment(`${dateStr} ${hourStr}:${minuteStr}`).format("YYYY-MM-DD HH:mm")
				});
			}


			// initDate() {
			// 	const baseTime = this.defaultTime || new Date();
			// 	// 使用 currentTimePlus8Hours 作为基准时间
			// 	const currentdate = moment(this.currentTimePlus8Hours).format("MMM Do");

			// 	// 设置日期数组
			// 	this.dates = [];
			// 	this.formatdates = [];

			// 	for (let i = 0; i <= this.chooseNum; i++) {
			// 		this.formatdates.push(moment(baseTime).add(i, 'days').format("YYYY-MM-DD"));
			// 		this.dates.push(moment(baseTime).add(i, 'days').format("MMMDo dddd"));
			// 	}

			// 	// 设置小时数组（从当前时间加8小时的小时开始）
			// 	let h = parseInt(moment(this.currentTimePlus8Hours).format("HH"));
			// 	this.hours = [];
			// 	for (let i = h; i < 24; i++) {
			// 		let str = i;
			// 		if (i < 10) {
			// 			str = '0' + str;
			// 		} else {
			// 			str = '' + str;
			// 		}
			// 		this.hours.push(str);
			// 	}

			// 	// 设置分钟数组（从0开始）
			// 	this.minutes = [];
			// 	let m = parseInt(moment(this.currentTimePlus8Hours).format("mm"));
			// 	for (let i = 0; i < 60; i++) {
			// 		let str = i;
			// 		if (i < 10) {
			// 			str = '0' + str;
			// 		} else {
			// 			str = '' + str;
			// 		}
			// 		this.minutes.push(str);
			// 	}
			// },


			// // initDate() {
			// // 	let currentdate = moment().format("MMM Do");
			// // 	//设置日期数组
			// // 	this.dates = []
			// // 	//格式化日期数组
			// // 	this.formatdates = []


			// // 	for (let i = 0; i <= this.chooseNum; i++) {
			// // 		this.formatdates.push(moment().add(i, 'days').format("YYYY-MM-DD"))
			// // 		this.dates.push(moment().add(i, 'days').format("MMMDo dddd"))
			// // 	}

			// // 	let h = parseInt(moment().format("HH"))
			// // 	this.hours = []
			// // 	for (let i = h; i < 24; i++) {
			// // 		let str = i;
			// // 		if (i < 10) {
			// // 			str = '0' + str;
			// // 		} else {
			// // 			str = '' + str;
			// // 		}
			// // 		this.hours.push(str);
			// // 	}
			// // 	this.minutes = []
			// // 	let m = parseInt(moment().format("mm"))
			// // 	console.log(m);
			// // 	for (let i = 0; i < 60; i++) {
			// // 		let str = i; 
			// // 		if (i < 10) {
			// // 			str = '0' + str;
			// // 		} else {
			// // 			str = '' + str;
			// // 		}
			// // 		this.minutes.push(str);
			// // 	}

			// // },





			// //滚动切换时间
			// bindDateChange(e) { //有效日期的滚动日期时间方法
			// 	let valueArr = e.detail.value;
			// 	this.hours = [];
			// 	this.minutes = [];

			// 	if (valueArr[0] != 0) {
			// 		// 如果不是今天，小时从0开始
			// 		for (let i = 0; i < 24; i++) {
			// 			let str = i;
			// 			if (i < 10) {
			// 				str = '0' + str;
			// 			} else {
			// 				str = '' + str;
			// 			}
			// 			this.hours.push(str);
			// 		}
			// 		// 分钟从0开始
			// 		for (let i = 0; i < 60; i++) {
			// 			let str = i;
			// 			if (i < 10) {
			// 				str = '0' + str;
			// 			} else {
			// 				str = '' + str;
			// 			}
			// 			this.minutes.push(str);
			// 		}
			// 	} else {
			// 		// 如果是今天，小时从当前时间加8小时的小时开始
			// 		let h = parseInt(moment(this.currentTimePlus8Hours).format("HH"));
			// 		this.hours = [];
			// 		for (let i = h; i < 24; i++) {
			// 			let str = i;
			// 			if (i < 10) {
			// 				str = '0' + str;
			// 			} else {
			// 				str = '' + str;
			// 			}
			// 			this.hours.push(str);
			// 		}

			// 		// 分钟从0开始
			// 		this.minutes = [];
			// 		let m = parseInt(moment(this.currentTimePlus8Hours).format("mm"));
			// 		for (let i = 0; i < 60; i++) {
			// 			let str = i;
			// 			if (i < 10) {
			// 				str = '0' + str;
			// 			} else {
			// 				str = '' + str;
			// 			}
			// 			this.minutes.push(str);
			// 		}
			// 	}

			// 	let dateStr = this.formatdates[valueArr[0]];
			// 	let hourStr = this.hours[valueArr[1]];
			// 	let minuteStr = this.minutes[valueArr[2]];
			// 	console.log(dateStr + ' ' + hourStr + ':' + minuteStr);
			// 	this.$emit("select", {
			// 		time: moment(dateStr + ' ' + hourStr + ':' + minuteStr).format("YYYY-MM-DD HH:mm")
			// 	});


			// },
		},
	}
</script>

<style>
	.long-data {
		margin-top: 30rpx;
		height: 80rpx;
		background: #FFFFFF;
		line-height: 80rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #eee;
		/* position: relative; */
	}

	.long-data-check {
		height: 40rpx;
		width: 100%;
		background: #e54d42;
		position: absolute;
		left: 0;
		top: 18rpx;
		color: #fff;
		line-height: 45rpx;
		border-radius: 0rpx;
		padding: 0px 20rpx;
		font-size: 20rpx;
		text-align: center;
		border-radius: 20rpx;

	}

	.long-data-check-triangle {
		width: 0;
		height: 0;
		border-top: 12rpx solid transparent;
		border-left: 10rpx solid #e54d42;
		border-bottom: 12rpx solid transparent;
		position: absolute;
		right: 223rpx;
		top: 26rpx;


	}


	.long-data-fl {
		float: left;
	}

	.long-data-fr {
		float: right;
	}

	.long-data-changeTime {
		color: #888;
		font-size: 25rpx;
		position: relative;
		text-align: right;
		padding: 0rpx 20rpx;
	}

	.long-data-changeTimeIcon {
		color: #888;
	}

	.long-data-picker {
		width: 100%;
		height: 700rpx;
		overflow: hidden;
		background: #fff;
		transition: height 0.3s;
		margin-top: 30rpx;
	}

	.long-datetime-item {
		text-align: center;
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 30upx;
	}

	.long-data-picker picker-view {
		height: 100%;
	}

	// 修改原有的上下边框颜色
	::v-deep .select-line::after {
		border-bottom: 3px solid #0CA013;
	}

	::v-deep .select-line::before {
		border-top: 3px solid #0CA013;
	}
</style>