<template>
	<view class="time-popup">
		<view class="popup-header">
			<text class="popup-title">选择服务</text>
		</view>
		<view class="time-picker-content">
			<!-- 日期选择 -->
			<view class="time-picker-content__datas">
				<view class="time-picker-content__datas__date__item" v-for="(date, index) in dateList" :key="index"
					@click="selectDate(index)">
					<text class="time-picker-content__datas__date__item__text"
						:class="{ active: selectedDateIndex === index }">{{ date }}</text>
					<image v-if="selectedDateIndex === index" src="/static/images/dataBox.png"
						class="time-picker-content__datas__date__item__box" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 时间选择 -->
			<scroll-view class="time-picker-content__time__list" scroll-y>
				<view class="time-picker-content__time__list__item"
					v-for="(time, index) in timeOptions[selectedDateIndex]" :key="index" :class="[
            getItemClass(time.state),
            {
              isActive:
                activeList.includes(index) &&
                sureTimeDataIndex == selectedDateIndex,
            },
          ]" @click="selectTime(time, index)">
					<view class="time-picker-content__time__list__item__text">{{
            time.show_time
          }}</view>
					<view class="time-picker-content__time__list__item__state">{{
            time.stateName
          }}</view>
				</view>
			</scroll-view>
			<!-- <view class="time-picker-content__time__sure">
          <view class="time-picker-content__time__sure__box" @click="sureTime"
            >确认</view
          >
        </view> -->
		</view>
	</view>
</template>

<script>
	/**
	 * sureTime 确认时间触发事件
	 * openTime 打开时间选择弹框
	 * closeTime 关闭时间选择弹框
	 * selectDate 选择日期
	 * selectTime 选择时间
	 * getItemClass 获取列表项的class
	 * handelGetTimeArr 获取时间段,
	 */
	import request from "@/utils/request";
	export default {
		data() {
			return {
				isFirstOPen: true,
				sureTimeObj: {}, // 确认时间对象
				dateList: ["今天", "明天", "后天"],
				startTimeIndex: null, // 开始时间索引
				endTimeIndex: null, //结束时间
				activeList: [],
				sureTimeDataIndex: 0, // 确认的时间索引
				selectedDateIndex: 0, // 选中的日期索引
				// 状态映射配置
				stateConfig: {
					1: {
						class: "state-available",
						text: "可约",
					},
					2: {
						class: "state-full",
						text: "约满",
					},
					3: {
						class: "state-rest",
						text: "休息",
					},
					4: {
						class: "state-locked",
						text: "锁定",
					},
					5: {
						class: "state-unavailable",
						text: "不可用",
					},
				},
			};
		},
		props: {
			// 时间选项数组
			timeOptions: {
				type: Array,
				default: () => [],
			},
			// 服务信息
			service: {
				type: Object,
				default: () => ({}),
			},
			url: {
				type: String,
				default: "",
			},
			identity: {
				type: Number,
				default: 0, //0为商家，1为手艺人
			},
		},
		created() {
			console.log("选择时间", this.service);
		},
		mounted() {},
		methods: {
			// 列表项的class获取方法
			getItemClass(state) {
				return this.stateConfig[state]?.class || "state-unknown";
			},
			// 选择日期
			selectDate(index) {
				this.selectedDateIndex = index;
			},
			// 生成两个数字之间的数组（包含边界值）
			createRangeArray(start, end) {
				// 确定步长，正数表示递增，负数表示递减
				let step = start <= end ? 1 : -1;
				let length = Math.abs(end - start) + 1;

				// 创建数组并填充值
				return Array.from({
					length
				}, (_, i) => start + i * step);
			},
			selectTime(time, index) {
				let that = this;
				//如果和记录日期不同重新记录
				if (this.sureTimeDataIndex != this.selectedDateIndex) {
					that.startTimeIndex = null;
					that.endTimeIndex = null;
				}
				//
				let startTimeIndex = this.startTimeIndex;
				let endTimeIndex = this.endTimeIndex;
				if (time.state === 1) {
					// 可约状态
					if(startTimeIndex == endTimeIndex && endTimeIndex == index){
						this.startTimeIndex = null;
						this.endTimeIndex = null;
					    this.storageStatus();
						return;
					}
					if (startTimeIndex == null || startTimeIndex != endTimeIndex) {
						this.startTimeIndex = index;
						this.endTimeIndex = index;
						this.storageStatus();
						that.handelGetTimeArr();
						uni.showToast({
							title: `您已选择${this.timeOptions[this.selectedDateIndex][this.startTimeIndex].show_time}，烦请再选一个时间，完成「开始 / 结束」的时间段设置`,
							icon: "none",
							duration: 1000,
						});
						return;
					} else {
						// if (endTimeIndex == index) {
						//   this.endTimeIndex = startTimeIndex;
						//   this.storageStatus();
						//   that.handelGetTimeArr();
						//   return;
						// } else if (startTimeIndex == index) {
						//   this.startTimeIndex = endTimeIndex;
						//   this.storageStatus();
						//   that.handelGetTimeArr();
						//   return;
						// } else if (startTimeIndex > index) {
						//   startTimeIndex = index;
						// } else if (endTimeIndex < index) {
						//   endTimeIndex = index;
						// } else {
						//   let leftNum = index - startTimeIndex;
						//   let rightNum = endTimeIndex - index;
						//   //如果靠近开始时间
						//   if (leftNum < rightNum) {
						//     startTimeIndex = index;
						//   } else {
						//     endTimeIndex = index;
						//   }
						// }
						if (startTimeIndex > index) {
							startTimeIndex = index;
						} else{
							endTimeIndex = index;
						}
						// let len = this.timeOptions[this.sureTimeDataIndex].length
						if (endTimeIndex - startTimeIndex < 3) {
							uni.showToast({
								title: "预约时间最少需要30分钟，请调整您的结束时间选择～",
								icon: "none",
								duration: 1000,
							});
							return;
						}
						let found = this.timeOptions[this.selectedDateIndex].slice(startTimeIndex,endTimeIndex).findIndex(item=>item.state !=1)
						console.log(22222,found,this.timeOptions[this.selectedDateIndex].slice(startTimeIndex,endTimeIndex))
						if(found!=-1){
							uni.showToast({
								title: "您选择的时间段内部分时间不可用，请调整后重新选择～",
								icon: "none",
								duration: 1000,
							});
							return;
						}
						
					}

					let parms;
					if (this.identity == 0) {
						parms = {
							user_syr_id: this.service.user_syr.id,
							reserve_time: this.timeOptions[this.selectedDateIndex][startTimeIndex]
								.time,
							end_time: this.timeOptions[this.selectedDateIndex][endTimeIndex].time,
						};
					} else if (this.identity == 1) {
						parms = {
							work_seat_id: this.service.work_seat.id,
							user_sj_id: this.service.user_sj.id,
							reserve_time: this.timeOptions[this.selectedDateIndex][startTimeIndex]
								.time,
							end_time: this.timeOptions[this.selectedDateIndex][endTimeIndex].time,
						};
					}

					if (this.url) {
						request
							.post(this.url, parms)
							.then(async (res) => {
								if (res.code == 200) {
									that.startTimeIndex = startTimeIndex;
									that.endTimeIndex = endTimeIndex;
									this.storageStatus();
									that.handelGetTimeArr();
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000,
									});
								}
							})
							.catch((err) => {
								uni.showToast({
										title: '网络繁忙，稍后再试',
										icon: "none",
										duration: 1000,
									});
								console.log("报错", err);
							});
					} else {
						that.startTimeIndex = startTimeIndex;
						that.endTimeIndex = endTimeIndex;
						this.storageStatus();
						that.handelGetTimeArr();
					}
				}
			},
			//存储状态
			storageStatus() {
				this.sureTimeDataIndex = this.selectedDateIndex;
				if(this.startTimeIndex==null){
					this.activeList = []
					return
				}
				this.activeList = this.createRangeArray(
					this.startTimeIndex,
					this.endTimeIndex
				);
			},
			handelGetTimeArr() {
				//获取时间段
				let startTime =
					this.timeOptions[this.selectedDateIndex][
						this.startTimeIndex
					].time.split(" ");
				let data = {
					reserve_start_time: this.timeOptions[this.selectedDateIndex][this.startTimeIndex].time,
					reserve_end_time: this.timeOptions[this.selectedDateIndex][this.endTimeIndex].time,
					startTime: this.timeOptions[this.selectedDateIndex][this.startTimeIndex]
						.show_time,
					endTime: this.timeOptions[this.selectedDateIndex][this.endTimeIndex].show_time,
					date: startTime[0],
					num: this.activeList.length - 1,
				};
				this.$emit("changeTime", data);
			},
		},
	};
</script>

<style scoped lang="less">
	/* 时间选择弹框 */
	.time-popup {
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
		padding-bottom: env(safe-area-inset-bottom);
		transform: translateY(0);
		transition: transform 0.3s;
		z-index: 999;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx 36rpx 30rpx;

		.popup-close {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			line-height: 37rpx;
			text-align: left;
			font-style: normal;
		}

		.popup-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.time-picker-content {
		padding: 0rpx 30rpx 30rpx 30rpx;

		&__datas {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			&__date__item {
				width: 214rpx;
				height: 67rpx;
				background: #f7f8fa;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&__text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
					text-align: left;
					font-style: normal;
					position: relative;
					position: relative;
					z-index: 2;
				}

				&__text.active {
					color: #ffffff;
					background: transparent;
					background-position: bottom;
				}

				&__box {
					width: 214rpx;
					height: 74rpx;
					position: absolute;
					z-index: 1;
				}
			}
		}

		&__time__list {
			flex: 1;
			height: 400rpx;
			margin-top: 30rpx;

			::-webkit-scrollbar {
				display: none;
			}

			uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
				display: none;
			}

			::v-deep .uni-scroll-view-content {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				-webkit-column-gap: 21rpx;
				column-gap: 21rpx;
				row-gap: 30rpx;
				max-height: 100%;
				height: auto;
			}

			&__item {
				box-sizing: border-box;
				width: 156rpx;
				height: 90rpx;
				background: #f7f8fa;
				border-radius: 10rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #3c3638;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.__text {}

				.__state {}
			}

			.state-available {
				color: #3c3638;
				background: #f7f8fa;
				/* 可约 */
			}

			.state-full {
				color: #3c3638;
				background: #e4e9f0;
				/* 约满 */
			}

			.state-rest {
				color: #cdcdcd;
				background: #f7f8f9;
				/* 休息 */
			}

			.state-locked {
				color: #3c3638;
				background: #e4e9f0;
				/* 锁定 */
			}

			.state-unavailable {
				color: #ffffff;
				background: #e4e9f0;
				/* 不可用 */
			}

			.state-unknown {
				/* 未知状态 */
			}

			.isActive {
				background: rgba(252, 67, 124, 0.08);
				border-radius: 10rpx;
				border: 1rpx solid #E8101E;
				color: #E8101E;
				/* 选中状态 */
			}

			&__item.active {
				background-color: #fff0f0;
				color: #ff3e3e;
				font-weight: 500;
			}

			&__item.noselected {
				/* background-color: #FFF0F0; */
				color: #999999;
				font-weight: 500;
			}
		}

		&__time__sure {
			padding: 39rpx 0;
			display: flex;
			justify-content: center;

			&__box {
				width: 648rpx;
				height: 94rpx;
				background: linear-gradient(140deg, #fa4e9a 0%, #E8101E 100%);
				border-radius: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #ffffff;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
</style>