<template>
	<view>
		<view class="select-address" v-if="citySyrCount">
			<text class="select-address-title">预约信息</text>
			<view class="select-address-card flex-row-center-between border-bottom">
				<text class="select-address-card-title">到家地址</text>
				<view class="select-address-card-right flex-row-center" @click="goToAddress">
					<text class="card-right-text1" v-if="!reservationAddress.id">请选择</text>
					<view v-else>
						<text class="card-right-text2">{{
              reservationAddress.server_address
            }}</text>
						<text class="card-right-text1">{{
              reservationAddress.name + " " + reservationAddress.call_phone
            }}</text>
					</view>
					<image class="card-right-img" src="/static/images/wallet/right.png"></image>
				</view>

			</view>



			<!-- <view class="select-address-card flex-row-center-between">
				<text class="select-address-card-title">服务人员</text>
				<view class="select-address-card-right flex-row-center" @click="goSelectSyr">
					<view style="width: 425rpx;justify-content: flex-end;" class="flex-row-center">
						<image v-if="reservationSyr.head_photo" class="card-right-photo" :src="reservationSyr.head_photo" />
						<text class="card-right-text1" style="width: auto;" v-if="!reservationSyr.id">请选择</text>
						<text class="card-right-text2" style="width: auto;" v-else>{{ reservationSyr.name }}</text>
					</view>
					
					
					<image class="card-right-img" src="/static/images/wallet/right.png"></image>
				</view>
			</view> -->

			<view class="select-address-card flex-row-center-between">
				<text class="select-address-card-title">到家时间</text>
				<view class="select-address-card-right flex-row-center" @click="openTimePicker">
					<text class="card-right-text2" v-if="reservationTime.selectedTime">{{
            reservationTime.selectedTime 
          }}</text>

					<text class="card-right-text1" v-else>请选择</text>
					<image class="card-right-img" src="/static/images/wallet/right.png"></image>
				</view>
			</view>

			<view class="select-address-tip"
				v-if="(reservationAddress.dependency_city != syrInfo.dependency_city && addressCity != syrCity ) && Object.keys(reservationAddress).length != 0">
				<image src="/static/images/background/tipBj2.png" class="select-address-tip-bj"></image>
				<view class="select-address-tip-texts">
					<text
						class="select-address-tip-text1">您选择的地址暂不在手艺人当前服务覆盖范围内，可能影响服务响应时效。为保障您的体验，建议您重新选择可服务区域下单。手艺人服务区域：{{ syrCity }}</text>
				</view>
			</view>
		</view>

		<image v-else class="store-tip" src="/static/images/background/storeTip3.png" />

		<!-- 时间选择弹框 -->
		<select-time-page ref="selecTime" :timeOptions="timeOptions" :service="serviceInfo"
			:publish_user_id="reservationSyr.id" @sureTime="sureTime" @closeTime="closeTime"></select-time-page>
	</view>
</template>

<script>
	import selectTimePage from "@/components/select-time-page/select-time-page.vue";
	import request from "@/utils/request";
	export default {
		name: "Selectaddress",
		components: {
			selectTimePage,
		},
		props: {
			id: {
				type: [String, Number],
				default: "",
			},
			serviceInfo: {
				type: Object,
				default: () => ({}),
			},
			syrInfo: {
				type: Object,
				default: () => ({}),
			}
		},

		computed: {
			reservationAddress() {
				return this.$store.state.reservationAddress;
			},
			reservationSyr() {
				return this.$store.state.reservationSyr;
			},
			reservationTime() {
				return this.$store.state.reservationTime;
			},
			userAdrees() {
				return uni.getStorageSync("userAdrees").addressRes || getApp().globalData.addressRes;
			},
			syrCity() {
				if (!this.syrInfo.dependency) return ''
				let regionParts = this.syrInfo.servers_region[0].split('-')
				return regionParts.length >= 2 ? regionParts[1] : regionParts[1]
			},
			addressCity() {
				if (!this?.reservationAddress?.dependency) return ''
				let regionParts = this.reservationAddress.dependency.split('-')
				return regionParts.length >= 2 ? regionParts[1] : regionParts[1]
			}
		},
		data() {
			return {
				citySyrCount: 1, //城市内手艺人数量
				syrCount: 1, //区域内手艺人数量
				timeOptions: [],
				// 服务信息
				service: {
					photo: [],
					server_kind: "",
					title: "",
					server_price: "",
				},
				queryData: {
					limit: 1,
					page: 1,
					name: "",
					id: 1,
				},
				// 时间信息
				selected_time: "",
				selected_date: "",
				selectedTime: null,
				dateList: ["今天", "明天", "后天"],
				timeOptions: [],
				selectedDateIndex: 0,
				selectedTimeIndex: 0,
				sureTimeDataIndex: 0,
				showTimePicker: false,
			};
		},
		watch: {
			id(newVal) {
				if (newVal) {}
			},
			// reservationAddress: {
			// 	handler(newVal) {
			// 		if (Object.keys(newVal).length != 0) {
			// 			console.log("地址变化，重新获取服务人员列表");
			// 			this.getSyr();
			// 		}
			// 	},
			// 	deep: true,
			// },
		},
		created() {
			//获取默认地址
			if (Object.keys(this.reservationAddress).length == 0) {
				request.post("/user/getdefaultaddress").then((res) => {
					if (res.state == 1) {
						this.$store.commit("setreservationAddress2", res.data)
						// this.getSyr()
					}
				})
			} else {
				// this.getSyr()
			}
		},
		methods: {
			getSyr() {
				// this.queryData.id = this.id;
				// if (Object.keys(this.reservationAddress).length != 0) {
				// 	this.queryData.city = this.reservationAddress.dependency_city;
				// }
				// request.post("/user/serversSelf/syrList", this.queryData).then((res) => {
				// 	if (res.code == 200) {
				// 		this.syrCount = res.data.count;
				// 	}
				// }).finally(() => {});
			},
			// 选择地址
			goToAddress() {
				uni.navigateTo({
					url: "/pages/address/list?setAdressType=2",
				});
			},
			// 选择服务人员
			goSelectSyr() {
				if (Object.keys(this.$store.state.reservationAddress).length == 0) {
					uni.showToast({
						title: "请先选择到家地址",
						icon: "none",
					});
					return;
				}
				if (!this.syrCount) {
					return
				}
				let url = "/user/servers/syrList"
				uni.navigateTo({
					url: `/pages/selfOperated/selectSyr?id=${this.id}&url=${url}`,
				});
			},
			// 打开时间选择弹框
			async openTimePicker() {
				if ((this.reservationAddress.dependency_city != this.syrInfo.dependency_city && this.addressCity != this.syrCity ) && Object.keys(this.reservationAddress).length != 0) {
					return
				}
				// if (Object.keys(this.$store.state.reservationSyr).length == 0) {
				// 	uni.showToast({
				// 		title: "请先选择服务人员",
				// 		icon: "none",
				// 	});
				// 	return;
				// }
				console.log("打开时间选择弹框", this.selected_date);
				await this.getyestimearr(this.selected_date);
				this.$refs.selecTime.openTime();
			},
			// 确认时间
			sureTime(date) {
				console.log("选择时间", date);
				if (Object.keys(date).length) {
					this.selectedTime = `${this.dateList[date.selectedDateIndex]} ${
          date.time.show_time
        }`;
					this.selected_date = this.getDateStr(date.selectedDateIndex);
					this.selected_time = date.time.show_time;
					this.selectedTimeIndex = date.selectedTimeIndex;
					this.selectedDateIndex = date.selectedDateIndex;
					this.$store.commit("setreservationTime", {
						selectedTime: this.selectedTime,
						selected_date: this.selected_date,
						selected_time: this.selected_time,
					});
					console.log(
						"选择的时间",
						this.selected_date,
						this.selected_time,
						this.selectedTimeIndex,
						this.selectedDateIndex
					);
				}
			},
			closeTime() {
				console.log("关闭时间选择弹框");
			},
			// 获取日期字符串
			getDateStr(days) {
				const date = new Date();
				date.setDate(date.getDate() + days);
				return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
			},
			// 获取预约时间
			async getyestimearr(date, type) {
				let that = this;
				that.timeOptions = [];
				await request
					.post("/user/reserve/timeList", {
						user_syr_id: this.reservationSyr.id,
						server_id: this.id,
						server_type: 1,
					})
					.then((res) => {
						console.log(1111111111111, this.$store.state.reservationSyr)
						that.timeOptions = [
							...that.timeOptions,
							res.data.today,
							res.data.tomorrow,
							res.data.after,
						];
						let stateMap = {
							1: "可约",
							2: "约满",
							3: "休息",
							4: "锁定",
							5: "不可用",
						};
						that.timeOptions.forEach((item) => {
							item.forEach((ClipboardItem) => {
								ClipboardItem.stateName = stateMap[ClipboardItem.state];
							});
						});
					})
					.catch((err) => {
						console.log("报错", err);
					});
			},
		},
	};
</script>

<style lang="less">
	.select-address {
		margin: 20rpx 24rpx 20rpx 24rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		position: relative;
		/* 1. 添加相对定位，让 tip 相对于该容器定位（关键） */
		overflow: hidden;
		/* 可选：防止 tip 超出容器范围 */

		.select-address-title {
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 30rpx;
		}

		.border-bottom {
			border-bottom: 1rpx solid #f2f2f2;
		}

		.select-address-card {
			padding: 30rpx 0;
			position: relative;

			.select-address-card-title {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				text-align: left;
				font-style: normal;
			}

			.select-address-card-right {
				.card-right-text1 {
					font-weight: 400;
					font-size: 28rpx;
					color: #c4c4c4;
					text-align: right;
					font-style: normal;
					width: 425rpx;
				}

				.card-right-text2 {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					text-align: right;
					font-style: normal;
					width: 425rpx;
				}

				.card-right-photo {
					margin-right: 13rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}

				.card-right-img {
					width: 12rpx;
					height: 24rpx;
					margin-left: 20rpx;
				}
			}

		}

		.select-address-tip {
			height: 161rpx;
			position: absolute;
			bottom: 0rpx;
			left: 22rpx;
			right: 22rpx;
			z-index: 1;
			padding: 0;

			.select-address-tip-bj {
				height: 161rpx;
				width: 658rpx;
			}

			.select-address-tip-texts {
				height: 161rpx;
				width: 658rpx;
				position: absolute;
				top: 0rpx;
				left: 0rpx;

				.select-address-tip-text1 {
					font-weight: 400;
					font-size: 26rpx;
					color: #8F060F;
					line-height: 37rpx;
					text-align: left;
					margin: 30rpx 13rpx 0 20rpx
				}
			}
		}
	}

	.flex-row-center-between {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.flex-row-center {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.store-tip {
		width: 702rpx;
		margin: 0 29rpx;
		height: 122rpx;
		margin-bottom: 20rpx;
	}
</style>