<template>
	<view class="page flex-col">
		<view class="header">
			<headers titles="预约">
				<uni-icons type="left" color="#000000" size="22px"></uni-icons>
			</headers>
		</view>
		<view class="form_">
			<view class="" style="background-color: white;padding: 10rpx 15rpx;border-radius: 15rpx">
				<u-form labelPosition="left" labelWidth="auto" labelAlign="center" :model="appointmentInfo"
					:rules="rules" ref="uForm">
					<u-form-item label="课程名称" prop="userInfo.name" @click="showCourse = true" ref="item1">
						<u-input v-model="appointmentInfo.courseName" disabled disabledColor="#ffffff"
							placeholder="请选择课程" border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="训练类型" prop="userInfo.sex" ref="item1">
						<u-input v-model="appointmentInfo.courseType" disabled disabledColor="#ffffff"
							placeholder="请选择训练类型" border="none"></u-input>
					</u-form-item>
					<u-form-item label="选择科目" prop="userInfo.sex" ref="item1">
						<u-input v-model="appointmentInfo.subjectStr" disabled disabledColor="#ffffff"
							placeholder="请选择科目" border="none"></u-input>
					</u-form-item>
					<u-form-item label="教练名称" prop="userInfo.sex" ref="item1">
						<u-input v-model="appointmentInfo.coachName" disabled disabledColor="#ffffff"
							placeholder="请选择教练" border="none"></u-input>
					</u-form-item>
				</u-form>

			</view>
		</view>
		<view class="form_">
			<view class="" style="background-color: white;padding: 10rpx 15rpx;border-radius: 15rpx">
				<u-form labelPosition="left" labelWidth="auto" :model="appointmentInfo" :rules="rules" ref="uForm">
					<u-form-item label="累计训练时长" prop="userInfo.name" ref="item1">
						<u-input v-model="appointmentInfo.trainTime" disabled disabledColor="#ffffff"
							border="none"></u-input>
					</u-form-item>
					<u-form-item label="日期选择" prop="userInfo.sex" @click="showDate = true;"
						ref="item1">
						<u-input v-model="appointmentInfo.dateStr" disabled disabledColor="#ffffff"
							placeholder="请选择日期" border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="时间范围" prop="userInfo.sex" borderBottom @click="showTime = true;"
						ref="item1" :borderBottom="false">
						<u-input v-model="appointmentInfo.time" disabled disabledColor="#ffffff"
							placeholder="请选择时间范围" border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<u-picker :show="showCourse" @close="showCourse = false" keyName="courseName" @cancel="showCourse = false"
			@confirm="confirmCourse" :columns="[courseList]"></u-picker>
		<u-picker :show="showTime" @close="showTime = false" keyName="label" @cancel="showTime = false"
			@confirm="confirmTime" :columns="[timeColumns]"></u-picker>
		<u-calendar :show="showDate" @confirm="confirmDate" @close="showDate = false"></u-calendar>
		<view class="section_4 flex-col bottom_">
			<view class="text-wrapper_5 flex-col" @click="submit">
				<text class="text_10">开始预约</text>
			</view>
		</view>
	</view>
</template>
<script>
	import headers from "@/components/header/headers.vue";
	import request from "@/utils/request";
  import {getDictDataByType} from "@/utils/utils";

	export default {
		components: {
			headers
		},
		data() {
			return {
				rules: {}, // 确保 rules 至少是一个空对象
				constants: {},
				appointmentInfo: {
					subjectStr: '',
					courseName: '',
					coachName: '',
					trainTime: '',
          dateStr:'',
          time: '',
          coachId:'',
				}, // 预约信息
				showCourse: false,
				courseList: [], //报名的课程信息
				showDate: false,
        showTime: false,
				tenantId: '',
				subjectColumns: [{
						label: '科目二',
						value: 2
					},
					{
						label: '科目三',
						value: 3
					},
				],
        //时间段数组 查询字典
        timeColumns: '',
				showSubject: false
			};
		},
		async onLoad() {
      this.getLoginUserCourseInfoList()
      this.timeColumns = await getDictDataByType('school_reserv_time');
      console.log('字典', this.timeColumns)
    },
		methods: {
			goback() {
				uni.navigateBack()
			},
			confirmCourse(e) {
				this.restForm()
				this.appointmentInfo.courseId = e.value[0].courseId
				this.appointmentInfo.courseName = e.value[0].courseName
				this.appointmentInfo.courseType = e.value[0].courseType
				this.tenantId = e.value[0].tenantId
        this.appointmentInfo.userName = e.value[0].userName
        this.appointmentInfo.userId = e.value[0].userId
				this.getAllByCourseId(e.value[0].courseId)
				console.log(e)
				this.showCourse = false
			},
      confirmDate(e) {
				console.log(e)
        this.appointmentInfo.dateStr = e[0]
        console.log(this.appointmentInfo)
				this.showDate = false
			},
      confirmTime(e) {
				console.log(e)
        this.appointmentInfo.time = e.value[0].label
        console.log(this.appointmentInfo)
				this.showTime = false
			},
			restForm() {
				this.appointmentInfo = {
					subjectStr: '',
					courseName: '',
					coachName: '',
					trainTime: '',
				}
			},
			// 查询所有报名科目
			getLoginUserCourseInfoList() {
				request({
					url: '/app-api/small/drive/school-course-order/getCourseByLoginUser',
					method: 'GET'
				}).then(res => {
          if (res.data.length == 0) {
            uni.showModal({
              title: '提示',
              content: '请先报名课程',
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                  uni.navigateBack()
                } else if (res.cancel) {
                  console.log('用户点击取消');
                }
              }
            });
          }
					this.courseList = res.data
				})
			},
			//根据课程id查询报名进度
			async getAllByCourseId(courseId) {
				console.log('courseId', courseId)
				const res = await request({
					url: '/app-api/process/getAllByCourseId',
					method: 'GET',
					params: {
						courseId: courseId
					}
				})
				// 找出正在训练中的科目并且科目不是1和4
				// && item.subject != 1 && item.subject != 4
				const progress = res.data.filter(item => {
					return item.status == 1 && item.subject != 1 && item.subject != 4
				})
				if (progress.length > 0) {
					console.log('正在训练中的科目', progress)
					// 找出正在训练中的科目并且科目不是1和4
					const subject = progress[0].subject
					this.$nextTick(() => {

						this.appointmentInfo.subject = subject
						this.appointmentInfo.subjectStr = this.subjectColumns.find(item => item.value ==
							subject).label
					})
					this.appointmentInfo.coachName = progress[0].coachName
          this.appointmentInfo.coachId = progress[0].coachId
					this.appointmentInfo.trainTime = progress[0].trainTime
					console.log('subject', this.appointmentInfo)
				} else {
					// 弹窗只能预约训练科目二
					uni.showModal({
						title: '提示',
						content: '只能预约训练科目二和科目三',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateBack()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			// 查询训练地址
			getTrainAddress() {
				request({
					url: '/app-api/small/address/getList',
					method: 'GET',
					params: {
						type: 0,
						subject: this.appointmentInfo.subject,
						tenantId: this.tenantId
					}
				}).then(res => {
					console.log(res)
				})
			},
      submit(){
        request({
          url: '/app-api/drivingSchool/system/reservationCourse',
          method: 'POST',
          data: {
            ...this.appointmentInfo,
            tenantId: this.tenantId,
            reservDay: this.appointmentInfo.dateStr,
            reservTime: this.appointmentInfo.time,
            subject: this.appointmentInfo.subject,
          }
        }).then(res => {
          console.log(res)
          uni.showToast({
            title: '预约成功',
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            uni.$emit('refresh');
            uni.navigateBack()
          }, 2000)
        })
      },
		}
	};
</script>
<style lang='scss'>
	@import '../common/common.scss';
	@import './assets/style/index.rpx.scss';

	.bottom_ {
		position: fixed;
		bottom: 0;
	}

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

	.form_ {
		padding: 10rpx 20rpx;
	}
</style>
