<template>
	<view style="background-color: #242A38; height: auto; min-height: 100vh;">
		<view class="nickname-pop">
			<text class="nickname-label">预约练车</text>
			<view class="nickname-input margin-bottom">
				<text style="color: #d2c3af; width: 160rpx;">教练名称</text>
				<input class="input-style" maxlength="10" v-model.trim="postData.instructorName" readonly
					border="surround" :disabled="true" />
			</view>
			<view class="nickname-input margin-bottom">
				<text style="color: #d2c3af; width: 160rpx;">预约项目</text>
				<input class="input-style" placeholder="点击选择预约项目" v-model.trim=" postData.category"
					@click="categoryShow = true" :readonly="true" border="surround" :disabled="true" />
				<u-picker @confirm="chooseCategory" :show="categoryShow" :columns="categoryColumns"
					@cancel="closePicker"></u-picker>

			</view>
			<view class="nickname-input margin-bottom">
				<text style="color: #d2c3af; width: 160rpx;">预约日期</text>
				<u-datetime-picker :show="appointmentDateShow" v-model="minDate" :maxDate="maxDate" :minDate="minDate"
					confirmColor="#242a38" @confirm="appointmentDateConfirm" @cancel="appointmentDateShow = false"
					mode="date" visibleItemCount="5" itemHeight="80"></u-datetime-picker>
				<input class="input-style" @click="appointmentDateShow = true" :readonly="true"
					v-model.trim="postData.appointmentDate" placeholder="点击选择预约日期" border="surround" :disabled="true" />
			</view>
			<view class="nickname-input margin-bottom">
				<text style="color: #d2c3af; width: 160rpx;">预约时间</text>
				<input class="input-style" @click="intervalShow = true" :disabled="true" :readonly="true"
					v-model.trim="postData.appointmentInterval" placeholder="点击选择预约时间段" border="surround" />
				<u-picker @confirm="chooseInterval" :show="intervalShow" :columns="intervalColumns"
					@cancel="closePicker"></u-picker>
			</view>

			<view class="nickname-input margin-bottom">
				<text style="color: #d2c3af; width: 160rpx;">姓名</text>
				<input class="input-style" maxlength="10" v-model.trim="postData.realName" placeholder="请输入姓名"
					border="surround" />
			</view>
			<view class="nickname-input margin-bottom ">
				<text style="color: #d2c3af; width: 160rpx;">电话</text>
				<input class="input-style" maxlength="11" v-model.trim="postData.phoneNumber" placeholder="请输入电话"
					border="surround" />
			</view>

			<move-verify class="margin" @result='verifyResult' ref="verifyElement"></move-verify>

			<view class="button-style">
				<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))" text="提交"
					throttleTime="3000" @click="addWx" :disabled="!resultData.flag"
					:customStyle="{color:'#000',height:'60rpx'}"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import moveVerify from "@/subSchoolPages/helang-moveVerify/helang-moveVerify"
	export default {
		data() {
			return {
				postData: {
					realName: null,
					phoneNumber: '',
					appointmentDate: null,
					appointmentInterval: '',
					instructorId: '',
					instructorName: '',
					category: '',
				},
				categoryShow: false,
				categoryColumns: [
					['科目二', '科目三']
				],
				intervalShow: false,
				intervalColumns: [
					['上午', '下午', '全天']
				],
				appointmentDateShow: false,
				maxDate: null,
				minDate: null,
				carRecordDatePickerShow: false,
				resultData: {}
			}
		},
		components: {
			"move-verify": moveVerify
		},
		onLoad(option) {
			this.postData.instructorId = option.instructorId
			this.postData.instructorName = decodeURIComponent(option.instructorName)
			this.getMaxDateAndMinDate()
			this.getUserInfo()
		},
		methods: {
			/* 校验结果回调函数 */
			verifyResult(res) {
				console.log(res);
				this.resultData = res;
			},
			/* 校验插件重置 */
			verifyReset() {
				this.$refs.verifyElement.reset();
				/* 删除当前页面的数据 */
				this.resultData = {};
			},
			// 项目选择器
			chooseCategory(e) {
				this.postData.category = e.value[0]
				this.closePicker()
			},
			closePicker() {
				this.categoryShow = false
				this.intervalShow = false
			},
			// 时间段选择器
			chooseInterval(e) {
				this.postData.appointmentInterval = e.value[0]
				this.closePicker()
			},
			// 获取最大日期和最小日期
			getMaxDateAndMinDate() {
				const currentDate = new Date(); // 获取当前日期
				const thirtyYearsAgo = new Date(currentDate.getFullYear(), currentDate.getMonth() + 3, currentDate
					.getDate()); // 30年之前的日期
				this.maxDate = thirtyYearsAgo.getTime();
				this.minDate = Number(currentDate);
			},
			// 选择预约日期
			appointmentDateConfirm(e) {
				console.log(e.value);
				this.postData.appointmentDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.appointmentDateShow = false
			},

			// 获取用户信息
			async getUserInfo() {
				const res = await this.$request({
					url: '/getInfo',
				})
				if (res.code == 200 && res.hasOwnProperty('user')) {
					this.user = res.user
					this.postData.phoneNumber = res.user.phonenumber
					this.postData.realName = res.user.realName
				}
			},
			// 预约提交数据
			async addWx() {
				if (uni.$u.test.isEmpty(this.postData.instructorId)) {
					return this.$modal.msgError('请选择教练')
				}
				if (uni.$u.test.isEmpty(this.postData.instructorName)) {
					return this.$modal.msgError('请选择教练')
				}
				if (uni.$u.test.isEmpty(this.postData.appointmentDate)) {
					return this.$modal.msgError('请选择预约日期')
				}
				if (uni.$u.test.isEmpty(this.postData.appointmentInterval)) {
					return this.$modal.msgError('请选择预约时间')
				}
				if (uni.$u.test.isEmpty(this.postData.category)) {
					return this.$modal.msgError('请选择练车项目')
				}
				if (uni.$u.test.isEmpty(this.postData.realName)) {
					return this.$modal.msgError('请填写姓名')
				}
				if (uni.$u.test.isEmpty(this.postData.phoneNumber)) {
					return this.$modal.msgError('请填写联系电话')
				}

				const res = await this.$request({
					url: '/system/schoolAppointmentInfo/addWx',
					method: 'POST',
					data: this.postData
				})
				this.$modal.msgSuccess('预约成功')
				setTimeout(() => {
					this.$tab.navigateTo("/subSchoolPages/appointment/appointment?tab=1")
				}, 1500)
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		min-height: 100vh;
	}

	/deep/.u-icon__icon {
		font-size: 30px !important;
	}



	.nickname-pop {
		width: 700rpx;
		padding: 70rpx 50rpx 0rpx;
		background: #242a38;
		border-radius: 10rpx;
		margin: 0 auto;
	}

	.nickname-input {
		width: 100%;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nickname-label {
		font-size: 60rpx;
		display: block;
		margin-bottom: 20rpx;
		text-align: center;
		color: #d2c3af;
	}

	.input-style {
		border-bottom: 1px solid #d2c3af;
		display: block;
		width: 100%;
		height: 60rpx;
		color: #d2c3af;
	}

	.button-style {
		width: 600rpx;
		margin: 20rpx auto;

	}
</style>