<template>
	<view class="hzIndex">
		<hzHeader title="理发预约"></hzHeader>
		<view class="hzContent" :style="{paddingBottom:currentTabIndex == 0?'300upx':'180upx'}">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">
					理发预约
					<view class="tabBottom" v-if="currentTabIndex == 0"></view>
				</view>
				<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">
					预约记录
					<view class="tabBottom" v-if="currentTabIndex == 1"></view>
				</view>
			</view>
			<!-- 理发预约表单 -->
			<view class="form-box one" v-if="currentTabIndex == 0">
				<!-- 选择日期 -->
				<view class="selectDate">
					<view class="dateTit">
						<view class="leftIcon">

						</view>
						<text style="font-size:32upx;color:#333;font-weight: 600;">选择日期</text>
					</view>
					<scroll-view class="scrollDate" 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 v-if="this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1&&this.date[this.chooseDateIndex].week!='星期六'&&this.date[this.chooseDateIndex].week!='星期日')"> -->
				<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 class="tips">
					<view class="tipsTit">
						<image src="@/static/haircut/tz.png" mode=""></image>
						<text>科技楼：每周一、三、五（10:00-18:00）</text>
					</view>
					<view class="tipsCont">
						<text>会议中心：每周二、四、六、日（10:00-21:00）</text>
					</view>
				</view>
			</view>
			<!-- 预约记录列表 -->
			<view v-else>
				<view class="list-box" v-if="appointlist.length > 0">
					<view class="detail" v-for="(item, index) in appointlist" :key="index">
						<view class="detail_header">
							<view style="display: flex;align-items: center;">
								<image src="@/static/haircut/leftIcon.png" mode=""></image>
								<text class="font-tilte">理发预约</text>
							</view>
							<text class="font-result" v-if="item.int_status==0">预约成功</text>
							<text class="font-result" style="background-color: #FFEFE3;color: #FB8107;"
								v-if="item.int_status==1">已取消</text>
							<text class="font-result" style="background-color: #F6DFDF;color:#BD1515 "
								v-if="item.int_status==2">客户未至</text>
						</view>
						<view class="detail_msg">
							<view class="info-item">
								<text>预约时间：</text>
								<text class="infoSpan">{{ item.timeQ }}</text>
							</view>
							<view class="info-item">
								<text>地点：</text>
								<text class="infoSpan">{{ areas[item.barber_id||1]}}</text>
							</view>
							<view class="info-item">
								<text>申请时间：</text>
								<text class="infoSpan">{{ formatDate(item.apply_time,'m_Time') }}</text>
							</view>

							<!-- <view class="comment-btn bg-ccc" v-if="item.edit_own == 1">已修改</view> -->
						</view>
						<view class="infoBtn">
							<view class="comment-btn" v-if="item.compareTimeCancle&&item.int_status==0"
								@click="cancleHaircut(item)">取消</view>
							<view class="comment-btn"
								v-if="item.conmentStatus == 0 && item.compareTime&&item.int_status==0"
								@click="goEvaluatePage(item.detailId)">评价</view>
							<view class="comment-btn bg-ccc" v-if="item.conmentStatus == 1&&item.int_status==0">已评价
							</view>
							<view class="comment-btn" v-if="item.compareTimeEdit&&item.int_status==0"
								@click="goEditPage(item,index)">修改</view>
						</view>
					</view>
				</view>
				<content-none :padTop="20" v-else></content-none>
			</view>

		</view>
		<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
		<view class="sub-btn"
			v-if="currentTabIndex == 0&&(this.date[this.chooseDateIndex].isholiday==2||(this.date[this.chooseDateIndex].isholiday!=1))">
			<view class="btn" @click="submit">提交预约</view>
		</view>
	</view>
</template>
<script>
	import {
		getAllDept,
		initHaircut,
		getHaircutBasicInfo,
		saveHaircutInfo,
		getMyHaircutList,
		cancleHaircut
	} 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 {
				//分页
				page: 1,
				pageSize: 10,
				loadingType: 0, //0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				user: getStorage('userInfo'),
				currentTabIndex: 0, //当前选择的tab
				appointlist: [
					// {
					// 	id: 189,
					// 	detailId: 100224,
					// 	userName: '王健兴ssss',
					// 	placeName: '丽景酒店',
					// 	conmentStatus: '1',
					// 	timeQ: '2020-01-07 (09:00-13:00)',
					// 	status: '预约成功',
					// 	apply_time: 1578383782000
					// }
				], //预约记录列表
				chooseTime: {
					id: '',
					time: ''
				}, //选择的时间段 (几点到几点)
				chooseDateIndex: 0, //当前选择的理发日期
				userName: getStorage('userInfo').userName, //申请人姓名
				userTel: getStorage('userInfo').telnumber, //申请人手机号
				key: '1',
				date: getNumDate(7), //获取今天起 最近7天时间
				formatDate: formatDate,

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

				barber: [], //{ haircut_time_id: '1', haircut_time: '08:00-08:30', remain_count: 1, status: 0 }, // status 1空闲 2繁忙
				submitFlag: true
			};
		},
		onLoad(option) {
			this.currentTabIndex = option.currentTabIndex || 0;
			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 = '会议中心';
			}
		},
		onShow() {
			this.getCalendar();
			if (this.currentTabIndex == 0) {
				// 初始化
				this.init();
			} else {
				this.page = 1;
				this.loadingType = 0;
				this.getList();
			}
		},
		watch: {
			currentTabIndex: function(newVal, oldVal) {
				this.chooseTime.id = '';
				this.chooseTime.time = '';
				if (newVal == 1) {
					this.page = 1;
					this.loadingType = 0;
					this.getList();
				} else {
					// 初始化
					this.init();
				}
			}
		},
		onReachBottom() {
			if (this.loadingType !== 0 || this.currentTabIndex == 0) {
				return;
			}
			this.loadingType = 1;
			this.page = this.page + 1;
			this.getList();
		},
		methods: {
			cancleHaircut(item) {
				let params = {
					method: cancleHaircut,
					data: {
						id: item.detailId,
						intStatus: 1
					}
				};
				callbackRequest(params).then(res => {
					if (res.data.returnCode == 1) {
						alertTip("已成功取消预约！");
						this.page = 1;
						this.loadingType = 0;
						this.getList();
					} else {
						alertTip(res.data.returnMsg);
					}
				});
			},
			goEditPage(item, index) {

				uni.navigateTo({
					url: `/pages/haircut/haircut-edit?id=` + item.detailId + '&type=1'
				});
			},
			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;
				if (endDateTime > nowDateTime) {
					return true;
				} else {
					return false;
				}
			},
			compareTimeForRecord(date, time) {
				var endTime = time.split(" ")[1].split("-")[0];
				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;
				}
			},
			compareTimeForEdit(date, time) {

				var startTime = time.split(" ")[1].split("-")[0];
				var startTime = date + " " + startTime;
				startTime = startTime.replace(/-/g, '/');
				var startDateTime = new Date(startTime).getTime();
				var nowDateTime = new Date().getTime();
				if (startDateTime - nowDateTime >= 30 * 60 * 1000) {
					return true;
				} else {
					return false;
				}
			},
			compareTimeForCancle(date, time) {

				var startTime = time.split(" ")[1].split("-")[0];
				var startTime = date + " " + startTime;
				startTime = startTime.replace(/-/g, '/');
				var startDateTime = new Date(startTime).getTime();
				var nowDateTime = new Date().getTime();
				if (startDateTime > 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 => {
					if (this.date[this.chooseDateIndex].isholiday == 1) {
						uni.showToast({
							title: '今日节假日不可预约',
							icon: 'none'
						})
					}
					res = res.data;
					console.log(res)
					if (res.returnCode === '1') {
						//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;
						}
						//this.chooseWorkerId = res.returnData[0].remain[0].barber_id;
						//this.chooseWorkerName = res.returnData[0].remain[0].barber_name;
					}
				});
			},

			//提交预约
			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;
				}
				if (!this.submitFlag) {
					return;
				}
				this.submitFlag = 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
					}
				};
				callbackRequest(params).then(res => {
					let result = res.data;
					if (result.returnCode == 1) {
						alertTip('预约成功');
						setTimeout(_ => {
							this.submitFlag = true;
							this.currentTabIndex = 1;
						}, 2000);
					} else {
						this.submitFlag = true;
						alertTip(result.returnMsg);
					}
				});
			},
			//获取列表记录接口
			getList() {
				// let lfDatas = uni.getStorageSync('lfDatas');
				// this.appointlist = lfDatas;
				let params = {
					method: getMyHaircutList,
					data: {
						pageNum: this.page,
						pageSize: this.pageSize,
						userId: this.user.id
					}
				};
				callbackRequest(params).then(res => {
					if (res.data.returnCode == 1) {
						if (this.page == 1) {
							this.appointlist = res.data.returnData || [];

						} else {
							if (res.data.returnData.length > 0) {
								this.appointlist = this.appointlist.concat(res.data.returnData);
								this.loadingType = 0;
							} else {
								this.loadingType = 2;
							}
						}
						for (var i = 0; i < this.appointlist.length; i++) {
							var compareTime = this.compareTimeForRecord(this.appointlist[i].apply_date, this
								.appointlist[i].timeQ);
							var compareTimeEdit = this.compareTimeForEdit(this.appointlist[i].apply_date, this
								.appointlist[i].timeQ);
							var compareTimeCancle = this.compareTimeForCancle(this.appointlist[i].apply_date, this
								.appointlist[i].timeQ);
							this.appointlist[i].compareTime = compareTime;
							this.appointlist[i].compareTimeEdit = compareTimeEdit;
							this.appointlist[i].compareTimeCancle = compareTimeCancle;
						}
					}
				});
			},
			goEvaluatePage(id) {
				uni.navigateTo({
					url: `/pages/order-form/evaluate?type=4&typeId=${id}`
				});
			},
			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">
	.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: 150upx;

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

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

			.active_tab {
				font-weight: 800;

			}

			.tab-item {
				width: 40%;

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

		.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: #555;
				border-radius: 16upx;
				padding: 18upx 20upx;
				background-color: #F2F6FA;
				border: 1px solid #F2F6FA;
			}



			.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;
					background: #EDFCF7;
					color: #0DB0A7;
					border: 1px solid rgba(0, 0, 0, 0);
				}
			}

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

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

				.scrollDate {
					margin-top: 20upx;
					white-space: nowrap;
				}

				/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: 32upx;
					color: #333333;
					margin-left: 20upx;
				}

				.font-result {
					font-weight: 400;
					font-size: 24upx;
					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>