<template>
	<view class="content">
		<view class="container">
			<headers :titles="titles"><uni-icons @click="goback()" type="arrow-left" color="#000000"
					size="22px"></uni-icons></headers>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in 4" :key="index">
					<view class="img-swiper">
						<image :src=" baseUrl + jlInfo.image" mode=""></image>
					</view>
				</swiper-item>

			</swiper>

			<view class="top-box">
				<view class="box-title">{{jlInfo.instructorName}}</view>
				<!-- <view v-if="jxInfo.businessStartTime" class="box-hui">营业中 {{jxInfo.businessStartTime}}:{{jxInfo.businessEndTime}}</view> -->
				<view style="padding: 10rpx 0;" class="box-hui">{{jlInfo.phone}}</view>

				<view v-if="jlInfo.student" class="">学员人数:{{jlInfo.student}}</view>

				<view class="wrap-box">
					<view class="icon-box">{{jxInfo.announcement}}</view>
				</view>
				<view class="top-bottom">
					<view class="">
						<view class="l-box">{{jxInfo.address}}</view>
						<!-- <view class="h-box">距离4.9km</view> -->
					</view>
					<view class="right-box" @click="gettel()">
						<image src="../../static/imgs/dh.png" mode=""></image>

					</view>
				</view>
			</view>
			<!--  -->
			<view class="ri-box">
				<view class="ri-title">选择日期</view>
				<scroll-view scroll-x="true" class="tap-top">
					<view class="sz" v-for="(item,index) in recentlyDate" :key="index" @click="getqh(index)">
						<view @click="findAfternoonNumber(item.dateInfo)" class="box"
							:class="{'xztap': qhindex == index}">
							<!-- <view style="margin-bottom: 10px;">周{{}}</view> -->
							<view @click="changeCurrentIndex(index)" class="">{{item.dateInfo}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="ri-title">选择科目</view>
				<view class="up-box">
					<view class="">科目</view>
					<view class="right-text" @click="show = true">
						<view class="" v-if="!courseSubject">选择科目</view>
						<view class="" v-else>{{courseSubject}}</view>
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
				</view>

				<view class="ri-title">选择时段</view>
				<view class="ri-bs">
					<view @click="changeLvanniuClick(0)" class="hui-box" :class="{ 'lvanniu':swxw == 0 }">
						<view class="">上午</view>
						<view v-if="payNumberVo.swCount" class="">预约人数为{{payNumberVo.swCount}}</view>
						<view v-else class="">预约人数为0</view>
					</view>
					<view @click="changeLvanniuClick(1)" class="hui-box" :class="{ 'lvanniu':swxw == 1 }">
						<view class="">下午</view>
						<view v-if="payNumberVo.xwCount" class="">预约人数为{{payNumberVo.xwCount}}</view>
						<view v-else class="">预约人数为0</view>
					</view>
				</view>

			</view>
			<view class="bottom-bo">
				<view @click="bookingClick()" class="lv-anniu">
					立即预约
				</view>
			</view>
			<view class="bottom-bo">
				<view @click="gogogocar()" class="lv-anniu">
					立即练车
				</view>
			</view>
		</view>
		<u-picker :show="show" keyName="name" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import request from '@/utils/request.js'
	import {
		yearTime
	} from '@/utils/dateUtil.js'
	import {
		appleTime
	} from '@/utils/dateUtil.js'

	export default {
		data() {
			return {
				titles: "预约训练",
				baseUrl: this.$baseUrl,
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				qhindex: 0,
				swxw: 1,
				jlId: null,
				jlInfo: [],
				courseSubject: null,
				courseSubjectid: null,
				show: false,
				columns: [
					[{
						name: '科目二',
						id: 2
					}, {
						name: '科目三',
						id: 3
					}, ]
				],
				payNumberVo: [],
				recentlyDate: [],
				currentTime: null,
				currentIndex: 0,
				currentDate: {
					currentDaeSun: null,
					currentWeek: null
				}
			}
		},
		onLoad: function(option) {

		},
		onShow() {
			// this.actList = ["1", "1", "1", "1", "1", ]
			// this.status = "nomore" 底部刷新结束
			this.findJlInfoByJlId(),

				this.findRecentlyDate()
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		// 发送好友
		onShareAppMessage(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		components: {
			headers

		},
		methods: {
			confirm(e) {
				console.log(e);
				this.courseSubject = e.value[0].name
				this.courseSubjectid = e.value[0].id
				this.show = false
			},
			cancel() {
				this.show = false
			},
			gettel() {
				uni.makePhoneCall({
					phoneNumber: this.jlInfo.phone //仅为示例
				});
			},
			getqh(index) {
				this.qhindex = index
			},
			goback() {
				uni.navigateBack()
			},
			async findJlInfoByJlId() {
				let res = await request({
					url: '/driving/findSelfInfo',
					method: 'get'
				})
				console.log(res, 143);
				this.jlInfo = res.driveSchoolCoach
			},
			async findAfternoonNumber(myDate) {
				console.log("当前时间为 ======>>>", myDate)

				let res = await request({
					url: `/driving/findAfternoonNumber/${myDate}`,
					method: 'get'
				})
				this.payNumberVo = res,
					console.log(this.payNumberVo, "==========>", this.payNumberVo)
			},
			changeCurrentIndex(index) {
				if (!index) {
					index = 0
				}
				this.currentIndex = index,
					console.log("当前索引为 ======>", index)
			},
			async findRecentlyDate() {
				let res = await request({
					url: `/driving/findRecentlyDate`,
					method: 'get'
				})
				this.findAfternoonNumber(res[0].dateInfo)
				this.recentlyDate = res
			},
			changeLvanniuClick(number) {
				this.swxw = number
			},
			changeCurrentTime(currentTime) {
				this.currentTime = currentTime
			},
			async bookingClick() {
				if (!this.courseSubjectid) {
					uni.showToast({
						title: '请选择科目几',
						icon: 'error'
					})
					return
				}
				let res = await request({
					url: '/drivingSchool/system/reservationCourse',
					method: 'post',
					data: {

						timePeriod: this.swxw++,
						type: 1,
						currentDate: this.recentlyDate[this.currentIndex].dateInfo,
						accountType: this.courseSubjectid,
					}
				})
				uni.showToast({
					title: "预约成功",
					icon: "success",
					duration: 4000
				})
				if (res.code == 200) {
					console.log('进了', res);
					uni.navigateTo({
						url: '/pages/reservation/reservation'
					})
				}

			},
			gogogocar() {
				if (!this.courseSubjectid) {
					uni.showToast({
						title: '请选择科目几',
						icon: 'error'
					})
					return
				}
				let res = request({
					url: '/drivingSchool/system/reservationCourse',
					method: 'post',
					data: {

						timePeriod: this.swxw++,
						type: 2,
						currentDate: this.recentlyDate[this.currentIndex].dateInfo,
						accountType: this.courseSubjectid,
					}
				})
				uni.showToast({
					title: "预约成功",
					icon: "success",
					duration: 4000
				})
				uni.navigateTo({
					url: '/pages/reservation/reservation'
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;

		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.swiper {
		width: 100%;
		height: 280px;
	}

	.img-swiper {
		width: 100%;
		height: 280px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		background: #fff;
		margin-bottom: 15px;
		position: relative;
	}

	.wrap-box {
		width: 100%;
		display: flex;
		margin: 10px 0px;

	}

	.top-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.right-box {
		position: absolute;
		right: 25px;
		top: 25px;
		box-sizing: border-box;
		padding-left: 20px;
		text-align: center;
		font-size: 12px;
		color: #4AA76F;

		image {
			width: 38px;
			height: 38px;
		}
	}

	.l-box {
		font-size: 12px;
		color: #333333;
	}

	.h-box {
		font-size: 12px;
		color: #666666;
	}

	.icon-box {

		background: #E6F5F0;
		border-radius: 2px 2px 2px 2px;
		font-size: 10px;
		color: #4AA76F;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 2px 5px;
	}

	.box-title {
		font-weight: 800;
		font-size: 20px;
		color: #333333;
		margin-bottom: 5px;
	}

	.box-hui {
		font-weight: 400;
		font-size: 12px;
		color: #666666;
	}

	//
	.ri-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		background: #fff;
		margin-bottom: 15px;

	}

	.ri-title {
		font-weight: bold;
		font-size: 16px;
		color: #333333;
	}

	.tap-top {
		margin-top: 20rpx;
		width: 100%;
		box-sizing: border-box;

		white-space: nowrap;



		.sz {
			display: inline-block;
		}

		.box {
			background: #fff;
			text-align: center;
			font-size: 32rpx;
			margin-right: 50rpx;
			line-height: 32rpx;
			text-align: center;
			// font-weight: bold;
			color: #4AA76F;
			margin-bottom: 22rpx;
		}
	}

	.xztap {
		color: #fff !important;
		background-color: #4AA76F !important;
		box-sizing: border-box;
		padding: 10px;
		border-radius: 4px;
	}

	.ri-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px auto;
	}

	.hui-box {
		width: 47%;
		border-radius: 8px;
		border: 1px solid #d3d3d3;
		box-sizing: border-box;
		padding: 16px;
		text-align: center;
		color: #adadad;
	}

	.lvanniu {
		color: #4AA76F !important;
		border: 1px solid #4AA76F;
	}

	.bottom-bo {
		width: 100%;
		height: 60px;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lv-anniu {
		width: 318px;
		height: 40px;
		background: #4AA76F;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 50px;
	}

	.up-box {
		width: 95%;
		border-bottom: 1px solid #ebebeb;
		margin: 10px auto;
		padding: 10px 0px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.right-text {
		display: flex;
		align-items: center;
	}
</style>