<template>
	<view class="hzIndex">
		<hzHeader title="理发预约修改"></hzHeader>
		<view class="hzContent">
			<view class="tab-box">
				<view class="tab-item" style="width: 100%;">
					理发预约修改
					<view class="tabBottom"></view>
				</view>

			</view>
			<!-- 理发预约表单 -->
			<view class="form-box one">
				<!-- 选择日期 -->
				<view class="selectDate">
					<view class="dateTit">
						<view class="leftIcon">

						</view>
						<text style="font-size:36upx;color:#333;font-weight: 600;">选择日期</text>
					</view>
					<scroll-view class="selectDates" scroll-x="true">
						<view class="dateItem" :class="chooseDateIndex == index ? 'time-active' : ''"
							v-for="(item, index) in date" :key="index" @click="switchTab(index)">
							<text class="time">{{ item.tiems.substr(5, 10) }}</text>
							<text class="week">{{ item.week }}</text>
						</view>
					</scroll-view>
					<view class="loc">
						<image src="@/static/haircut/loc.png" mode=""></image>
						<view v-for="(item, index) in places" :key="index" @click="choosePlace(item.id, item.name)">
							<text class="round" :class="choosePlaceId == item.id ? 'barberactive' : ''"></text>
							<text class="input_left">{{ item.name }}</text>
						</view>
					</view>
				</view>
				<!-- 选择地点 -->
				<view class="timeInterval" style="margin-top: 20upx;"
					v-if="this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1)">
					<view class="dateTit">
						<image src="@/static/haircut/date.png" mode=""></image>
						<text style="font-size:30upx;color:#333;font-weight: 600;">选择时段</text>
					</view>
					<!-- 选择时间段 -->
					<view class="selectInterval">
						<view class="intervalItem"
							:class="[chooseTime.id == item.haircut_time_id ? 'time-active' : '', item.status == '1' &&item.remain_count!= 0&&item.compareTime? '' : 'bg-gray']"
							@click="item.status == '1' &&item.compareTime? checkItem(item.haircut_time_id, item.haircut_time, item.status, item.remain_count) : ''"
							v-for="(item, index) in barber" :key="index">
							<view class="time-text">{{ item.haircut_time }}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view v-if="this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1)">
			<view class="sub-btn">
				<view class="btn" @click="submit">提交</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getAllDept,
		initHaircut,
		getHaircutBasicInfo,
		saveHaircutInfo,
		getHaircutInfoById
	} from '@/common/api.js';
	import {
		callbackRequest,
		getStorage,
		getNumDate,
		alertTip,
		regPhone,
		formatDate
	} from '@/common/util.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	export default {
		components: {
			loadMore,
			contentNone
		},
		data() {
			return {
				//分页
				user: getStorage('userInfo'),
				chooseTime: {
					id: '',
					time: ''
				}, //选择的时间段 (几点到几点)
				chooseDateIndex: 0, //当前选择的理发日期
				userName: getStorage('userInfo').userName, //申请人姓名
				userTel: getStorage('userInfo').telnumber, //申请人手机号
				date: getNumDate(7), //获取今天起 最近7天时间
				formatDate: formatDate,

				choosePlaceId: '', // 当前选择的地点
				choosePlaceName: '',
				areas: ['', '会议中心', '科技楼'],
				places: [{
					id: '1',
					name: '会议中心'
				}, {
					id: '2',
					name: '科技楼'
				}],

				barber: [],
				id: '', //理发详情id
				apply_time_id: '',
				userId: '',
			};
		},
		onLoad(option) {
			this.getCalendar();
			this.id = option.id;
			//this.init();
			this.getRecord();
		},
		methods: {
			compareTime(time1) {
				var endTime = time1.split("-")[0];
				var endDate = this.date[this.chooseDateIndex].tiems + " " + endTime;
				endDate = endDate.replace(/-/g, '/');
				var endDateTime = new Date(endDate).getTime();
				// var nowDateTime = new Date().getTime() + 3 * 60 * 60 * 1000;
				var nowDateTime = new Date().getTime();
				if (endDateTime > nowDateTime) {
					return true;
				} else {
					return false;
				}
			},
			compareTimeForRecord(date, time) {
				var endTime = time.split(" ")[1].split("-")[1];
				var endDate = date + " " + endTime;
				endDate = endDate.replace(/-/g, '/');
				var endDateTime = new Date(endDate).getTime();
				var nowDateTime = new Date().getTime();
				if (endDateTime < nowDateTime) {
					return true;
				} else {
					return false;
				}
			},
			//选择日期
			switchTab(index) {
				if (this.chooseDateIndex != index) {
					this.chooseDateIndex = index;
					this.chooseTime.id = '';
					this.chooseTime.time = '';
					if (this.date[this.chooseDateIndex].weekDay == "1" || this.date[this.chooseDateIndex].weekDay == "3" ||
						this.date[this.chooseDateIndex].weekDay == "5") {
						this.places = [{
							id: '2',
							name: '科技楼'
						}];
						this.choosePlaceId = '2';
						this.choosePlaceName = '科技楼';
					} else {
						this.places = [{
							id: '1',
							name: '会议中心'
						}];
						this.choosePlaceId = '1';
						this.choosePlaceName = '会议中心';
					}
					this.init();
				}
			},
			//选择地点
			choosePlace(id, name) {
				if (this.choosePlaceId != id) {
					this.chooseTime.id = '';
					this.chooseTime.time = '';
					this.choosePlaceId = id;
					this.choosePlaceName = name;
					this.init();
				}
			},
			// 选择时间段
			checkItem(id, time, status, count) {
				if (status == 2) {
					alertTip('该时间段已预约');
					return false;
				} else if (count <= 0) {
					alertTip('该时间段已约满');
					return false;
				}
				this.$set(this.chooseTime, 'id', id);
				this.$set(this.chooseTime, 'time', time);
			},
			init() {
				//理发预约时间段剩余名额查询接口
				let params = {
					method: getHaircutBasicInfo,
					data: {
						userId: this.user.id,
						haircutDate: this.date[this.chooseDateIndex].tiems,
						barbershop: this.choosePlaceId
					}
				};
				callbackRequest(params).then(res => {
					res = res.data;
					if (res.returnCode === '1') {
						if (this.date[this.chooseDateIndex].isholiday == 1) {
							uni.showToast({
								title: '今日节假日不可预约',
								icon: 'none'
							})
						}
						//this.kind = res.returnData[0].type;
						this.barber = res.returnData[0].remain[0].haircut_remain;
						for (var i = 0; i < this.barber.length; i++) {

							var compareTime = this.compareTime(this.barber[i].haircut_time);
							this.barber[i].compareTime = compareTime;

						}

					}
				});
			},

			//提交预约
			submit() {
				if (!this.choosePlaceId) {
					alertTip('请选择理发地点');
					return false;
				} else if (!this.chooseTime.time && !this.chooseTime.id) {
					alertTip('请选择时间段');
					return false;
				}
				// else if (this.userName.length == 0) {
				// 	alertTip('请输入联系人姓名');
				// 	return false;
				// } else if (!regPhone.test(this.userTel)) {
				// 	alertTip('请输入正确的手机号');
				// 	return false;
				// }
				let params = {
					method: saveHaircutInfo,
					data: {
						applyDate: this.date[this.chooseDateIndex].tiems,
						applyPersonName: this.userName,
						applyPersonTel: this.userTel,
						applyTime: this.chooseTime.time,
						applyTimeId: this.chooseTime.id,
						barbershopArea: this.choosePlaceId,
						barberId: this.choosePlaceId,
						//placeName: this.choosePlaceName,
						//deptId:this.user.deptId,
						userId: this.user.id,
						id: this.id,
					}
				};
				callbackRequest(params).then(res => {
					let result = res.data;
					if (result.returnCode == 1) {
						alertTip('预约修改成功');
						setTimeout(_ => {
							uni.navigateTo({
								url: `/pages/haircut/haircut?currentTabIndex=1`
							});
						}, 2000);
					} else {
						alertTip(result.returnMsg);
					}
				});
			},
			getRecord() {
				let params = {
					"method": getHaircutInfoById,
					data: {
						id: this.id,
					},
				}
				callbackRequest(params)
					.then(res => {
						if (res.data.returnCode == 1) {
							console.log(res.data.returnData);
							var record = res.data.returnData;
							this.choosePlaceId = record.barber_id;
							this.chooseTime.id = record.apply_time_id
							this.chooseTime.time = record.apply_time;
							this.userName = record.apply_person_name;
							this.userTel = record.apply_person_tel;
							this.userId = record.user_id;
							for (var i = 0; i < this.date.length; i++) {
								if (this.date[i].tiems == record.apply_date) {
									this.chooseDateIndex = i;
									break;
								}
							}
							if (this.date[this.chooseDateIndex].weekDay == "1" || this.date[this.chooseDateIndex]
								.weekDay == "3" || this.date[this.chooseDateIndex].weekDay == "5") {
								this.places = [{
									id: '2',
									name: '科技楼'
								}];
								this.choosePlaceId = '2';
								this.choosePlaceName = '科技楼';
							} else {
								this.places = [{
									id: '1',
									name: '会议中心'
								}];
								this.choosePlaceId = '1';
								this.choosePlaceName = '会议中心';
							}

							this.init();
						}
					})
			},
			getCalendar(params) {
				let params2 = {
					method: "greenCalendar/getCalendarList",
					data: {
						date_name: this.date[0].tiems,
					}
				};
				callbackRequest(params2).then(res => {
					if (res.data.returnCode == 1) {
						var list = res.data.returnData;

						for (var j = 0; j < this.date.length; j++) {
							var fl = true;
							for (var i = 0; i < list.length; i++) {
								if (list[i].date_name == this.date[j].tiems) {
									this.$set(this.date[j], 'isholiday', list[i].isholiday);
									fl = false;
								}
							}
							if (fl) {
								this.$set(this.date[j], 'isholiday', '0');
							}
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	.selectDates {
		margin-top: 20upx !important;
		white-space: nowrap !important;
	}

	.tabBottom {
		width: 13%;
		height: 4upx;
		border-radius: 5px;
		background-image: linear-gradient(to right, #64E182, #1CA7B2);
	}

	.sub-btn {
		width: 100%;
		height: 120upx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		color: #fff;
		font-size: 32upx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			width: 94%;
			height: 88upx;
			border-radius: 44upx;
			text-align: center;
			line-height: 88upx;
			background-image: linear-gradient(to right, #5BCE9D, #00ADA6);
		}

	}

	.hzContent {
		padding: 22upx;
		margin-top: 50upx;
		padding-bottom: 200upx;

		.bg-gray {
			opacity: 0.6;
			background-color: #F2F6FA !important;
		}

		.tab-box {
			width: 80%;
			display: flex;
			font-size: 36upx;
			color: #555555;

			.active_tab {
				font-weight: 800;

			}

			.tab-item {
				width: 40%;
				font-weight: 800;

			}
		}

		.tips {
			width: 100%;
			padding: 20upx;
			background-color: #fff;
			border-radius: 20upx;
			margin-top: 20upx;
			color: #FB8107;
			font-size: 28upx;

			.tipsTit {
				width: 100%;
				display: flex;
				align-items: center;
			}

			.tipsCont {
				margin-left: 38upx;
				display: flex;
				flex-direction: column;
			}

			image {
				width: 36upx;
				height: 36upx;
			}
		}

		.form-box {
			margin-top: 20upx;

			.loc {
				margin-top: 20upx;
				width: 100%;
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 30upx;
				color: #333333;

				image {
					width: 38upx;
					height: 38upx;
					margin-right: 10upx;
				}
			}

			.dateTit {
				width: 100%;
				display: flex;
				align-items: center;

				image {
					width: 35upx;
					height: 35upx;
					margin-right: 10upx;
				}

				.leftIcon {
					width: 8upx;
					height: 30upx;
					background-image: linear-gradient(to bottom, #82E7B3, #94B8EF);
					border-radius: 5px;
					margin-right: 10upx;
				}
			}

			.dateItem {
				margin: 0 10upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 28upx;
				color: #0DB0A7;
				border-radius: 16upx;
				padding: 18upx 20upx;
				background-color: #EDFCF7;
			}



			.selectInterval {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.intervalItem {
					width: 30%;
					margin-top: 20upx;
					padding: 15upx 20upx;
					background: #F2F6FA;
					border-radius: 8upx;
					font-weight: 400;
					font-size: 28upx;
					color: #999999;
				}
			}

			.timeInterval,
			.selectDate {
				width: 100%;
				padding: 20upx;
				background-color: #fff;
				border-radius: 20upx;

				.time-active {
					border: 1px solid #0DB0A7;
				}



				/deep/::-webkit-scrollbar {
					display: none;
					width: 0;
					height: 0;
				}

				/deep/.uni-scroll-view-content {
					display: flex;
				}
			}
		}


	}

	.list-box {
		width: 100%;

		.detail {
			background-color: #fff;
			border-radius: 20upx;
			margin-top: 20upx;
			padding: 20upx;

			.detail_header {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.font-tilte {
					font-weight: bold;
					font-size: 36upx;
					color: #333333;
					margin-left: 20upx;
				}

				.font-result {
					font-weight: 400;
					font-size: 28upx;
					color: #0DB0A7;
					padding: 10upx 30upx;
					background: #C1EFEA;
					border-radius: 30upx;
				}

				image {
					width: 42upx;
					height: 42upx;
				}
			}

			.detail_msg {
				font-weight: 400;
				font-size: 28upx;
				color: #999999;
				margin-top: 20upx;
				border-bottom: 1px solid #EBEFF7;
				padding-bottom: 20upx;

				.info-item {
					margin-top: 20upx;
					display: flex;
					justify-content: space-between;
				}

			}
		}

		.infoBtn {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			margin-top: 20upx;
			font-size: 28upx;
			color: #0DB0A7;

			.comment-btn {
				display: flex;
				border-radius: 30upx;
				margin-left: 20upx;
				padding: 10upx 50upx;
				border: 1px solid #0DB0A7;
			}
		}

		.bg-ccc {
			color: #CACACA;
			border: 1px solid #CACACA !important;
		}
	}
</style>