<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta name="viewport"
	      content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
	<title>预约学车</title>
	<link rel="stylesheet" href="/static/css/common.css">
	<link rel="stylesheet" href="/static/css/style.css">
	<link rel="stylesheet" href="/static/css/swiper.min.css">
	<style>
		.btn_yuyue {
			margin-bottom: 1rem;
		}

		.yu_tan .yu_tan_box .tan_text {
			width: 6.533333rem;
		}
	</style>
</head>
<body style="background-color: #f6f6f6;">
<div class="box">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="day_list day_bg">
					<b>周一</b>
					<i>06-25</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="day_list">
					<b>周二</b>
					<i>06-26</i>
				</div>
			</div>
		</div>
	</div>
	<div class="yu_container">
		<div class="time_list">
			<b>06:00-07:00</b>
			<i></i>
		</div>
		<div class="time_list">
			<b>07:00-08:00</b>
			<i></i>
		</div>
		<div class="time_list">
			<b>08:00-09:00</b>
			<i></i>
		</div>
		<div class="time_list">
			<b>09:00-10:00</b>
			<i></i>
		</div>
		<div class="time_list">
			<b>10:00-11:00</b>
			<i></i>
		</div>
		<div class="time_list time_bor">
			<b>11:00-12:00</b>
			<i></i>
		</div>
		<div class="time_list time_bor">
			<b>12:00-13:00</b>
			<i></i>
		</div>
		<div class="time_list time_bor time_bg_icon">
			<b>13:00-14:00</b>
			<i></i>
		</div>
		<div class="time_list time_bor">
			<b>14:00-15:00</b>
			<i></i>
		</div>
		<div class="time_list time_bor">
			<b>15:00-16:00</b>
			<i></i>
		</div>
		<div class="time_list time_bor">
			<b>16:00-17:00</b>
			<i></i>
		</div>
		<div class="time_list time_bor">
			<b>17:00-18:00</b>
			<i></i>
		</div>
		<div style="clear: both"></div>
		<div class="btn_yuyue" style="display: block;margin-top:3.73rem" id="btn_yuyue">
			<img src="/static/image/btn_yuyue.png"/>
		</div>
	</div>

</div>

<!--弹跳框-->
<div class="full_bg"></div>
<div class="yu_tan" data-qr="1">
	<div class="yu_tan_box">
		<img src="/static/image/tan_car1.png" class="tan_car"/>
		<h1 class="tan_text">您确定要预约<span id="time_duan"></span>{$data.user_nickname}的课程吗</h1>
		<h2 class="btn_qr">确认</h2>
	</div>
	<div class="syudy_cancel"></div>
</div>
<script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/jquery.sliderPro.min.js"></script>
<script src="/static/js/swiper.min.js"></script>
<script type="text/javascript" src="/static/js/study_car.js"></script>
<script>
	var swiper = new Swiper('.swiper-container', {
		slidesPerView: 7,
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
	});
	$('.day_list').click(function () {
		$(this).addClass('day_bg').parent().siblings().children().removeClass('day_bg');
	});
	$(function () {
		function get_ok_list(day) {
			$.ajax({
				url: "/portal/tool/get_relax_time",
				type: "post",
				data: {
					day: day.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3"),
					uid: {$id}
				}, success: function (res) {
					if (res.code == "1") {
						var date = new Date();
						var year = date.getFullYear();
						var mon = date.getMonth() + 1;
						var days = date.getDate();
						var hour = date.getHours() + 3;
						var list = $('.time_list');
						if (day == '' + year + check_num(mon) + check_num(days)) {
							var time_list = [];
							var list = JSON.parse(res.data);
							for (var i = 0; i < list.find('b').length; i++) {
								time_list.push(list.find('b')[i].innerHTML.split('-'));
							}
							for (var j = 0; j < time_list.length; j++) {
								if (parseInt(time_list[j][0]) < hour) {
									list[j] = "no";
								} else {
									list[j] = "yes";
								}
								list[j].setAttribute('data-index', j);
							}
							var tiem_list = $('.time_list');
							for (var i = 0; i < list.length; i++) {
								if (list[i] == "yes") {
									tiem_list[i].setAttribute('class', 'time_list time_bor');
								} else {
									tiem_list[i].setAttribute('class', 'time_list');
								}
								tiem_list[i].setAttribute("data-index", i);
							}
						} else {
							for (var i = 0; i < list.length; i++) {
								list[i].setAttribute('data-index', i);
								list[i].setAttribute('class', 'time_list time_bor');
							}
							var list = JSON.parse(res.data);
							var tiem_list = $('.time_list');
							for (var i = 0; i < list.length; i++) {
								if (list[i] == "yes") {
									tiem_list[i].setAttribute('class', 'time_list time_bor');
								} else {
									tiem_list[i].setAttribute('class', 'time_list');
								}
								tiem_list[i].setAttribute("data-index", i);
							}
						}

					}
				}
			});
		}

		function check_num(num) {
			if (num < 10) {
				return "0" + num;
			} else {
				return num
			}
		}

		function checkToday() {

		}

		(function () {
			var date = new Date();
			var year = date.getFullYear();
			var mon = check_num(date.getMonth() + 1);
			var da = check_num(date.getDate());
			var day = "" + year + mon + da;
			get_ok_list(day);
		})()
		var cells = $('.day_list');
		var clen = cells.length;
		var currentFirstDate;
		var formatDate = function (date) {
			var year = date.getFullYear();
			var month = (date.getMonth() + 1);
			if (month < 10) {
				month = "0" + month;
			}
			var day = date.getDate();
			if (day < 10) {
				day = "0" + day;
			}
			var month_day = month + '-' + day;
			var week = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];
			return '<b>' + week + '</b>' + '<i data-day="' + year + '' + month + day + '">' + month_day + '</i>';
		};
		var addDate = function (date, n) {
			date.setDate(date.getDate() + n);
			return date;
		};
		var setDate = function (date) {
			var week = date.getDay() - 1;
			date = addDate(date, week * +0);
			currentFirstDate = new Date(date);
			for (var i = 0; i < clen; i++) {
				cells[i].innerHTML = formatDate(i == 0 ? date : addDate(date, 1));
			}
		};
		setDate(new Date());
		$('.day_list').click(function () {
			var day = $(this).children('i').attr('data-day');
			get_ok_list(day);
		});
		$('.yu_container .time_list').click(function () {
			if ($(this).hasClass('time_bor')) {
				if ($('.time_bg_icon').length < 3) {
					if ($(this).hasClass('time_bg_icon')) {
						$(this).removeClass('time_bg_icon');
					} else {
						$(this).addClass('time_bg_icon');
					}
				} else {
					if ($(this).hasClass('time_bg_icon')) {
						$(this).removeClass('time_bg_icon');
					} else {
						layer.msg("选择的时间段不能超过3小时");
						return;
					}
				}
				var list = $('.time_bg_icon');
				var acvList = [];
				var boo = false;
				for (var i = 0; i < list.length; i++) {
					acvList.push(parseInt(list[i].getAttribute("data-index")));
				}
				var degin = acvList[0];
				for (var j = 0; j < acvList.length; j++) {
					if (acvList[j] != degin) {
						boo = true;
						break;
					} else {
						degin++;
					}
				}
				if (boo) {
					alert("请选择连续的时间段");
					$(this).attr("class", "time_list time_bor");
				}
			}
		});
		var day1 = $('.day_bg i').text();
		var week = $('.day_bg b').text();
		var hour1 = $('.time_bg_icon b').text();
		var data_day = $('.day_bg i').attr("data-day");
		var data_index = $('.time_bg_icon').length == 0 ? null : $('.time_bg_icon').attr("data-index");
		$("#btn_yuyue").click(function () {
			var list = $('.time_bg_icon');
			var acvList = [];
			var boo = false;
			for (var i = 0; i < list.length; i++) {
				acvList.push(parseInt(list[i].getAttribute("data-index")));
			}
			var degin = acvList[0];
			for (var j = 0; j < acvList.length; j++) {
				if (acvList[j] != degin) {
					boo = true;
					break;
				} else {
					degin++;
				}
			}
			if (boo) {
				alert("请选择连续的时间段");
			} else {
				var hour1 = $('.time_bg_icon b').text();
				$('.tan_car').css({"width": "4.97rem", "height": "2.88rem"});
				$('#time_duan').text(hour1);
				tankuang();
			}
		});
		$('.btn_qr').click(function () {
			var data_qr = $('.yu_tan').attr("data-qr");
			var list = $('.time_bg_icon');
			var acvList = [];
			var boo = false;
			for (var i = 0; i < list.length; i++) {
				acvList.push(parseInt(list[i].getAttribute("data-index")));
			}
			var degin = acvList[0];
			for (var j = 0; j < acvList.length; j++) {
				if (acvList[j] != degin) {
					boo = true;
					break;
				} else {
					degin++;
				}
			}
			if (data_qr == 1) {
				$.ajax({
					url: "{:url('yuyue_coach_do')}",
					type: "post",
					data: {
						day: data_day.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3"),
						week: week,
						begin: parseInt(list[0].getElementsByTagName('b')[0].innerHTML.split("-")[0]),
						end: parseInt(list[list.length - 1].getElementsByTagName('b')[0].innerHTML.split('-')[1]),
						id: {$id}
					},
					success: function (res) {
						console.log(res);
					}
				});
				$('.tan_text').html("恭喜您,预约成功");
				tankuang();
				$('.yu_tan').attr("data-qr", "2")
			} else if (data_qr == 2) {
				window.location.href = "/user/profile/percenter";
			}
		});
		$('.syudy_cancel').click(function () {
			var data_qr = $('.yu_tan').attr("data-qr");
			if (data_qr == 1) {
				$("html").css("overflow", "auto");
				$("body").css("overflow", "auto");
				$(".full_bg").hide();
				$(".yu_tan").hide();
			} else if (data_qr == 2) {
				window.location.href = "/user/profile/percenter";
			}
		});
	});
</script>
</body>
</html>