<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="wrap">
			<u-form :model="form" ref="uForm" :label-width="140" :label-align="'left'" :error-type="['message']">
				<u-form-item label="预约场地" prop="siteName" required>
					<u-input :placeholder="'请选择'" v-model="form.siteName" type="select" @click="siteShow = true" />
				</u-form-item>
				<u-form-item label="预约日期" prop="date" required>
					<u-input :placeholder="'请选择'" v-model="form.date" :type="'select'" @click="dateShow = true" />
				</u-form-item>
				<u-form-item label="预约时间" prop="timeRange" required>
					<u-input :placeholder="'请选择'" v-model="form.timeRange" :type="'select'" @click="openTime" />
				</u-form-item>

				<u-form-item label="预约事项" prop="content" required>
					<u-input :placeholder="'请输入预约事项'" v-model="form.content" type="textarea" />
				</u-form-item>
				<u-form-item label="车牌" prop="plate">
					<u-button size="mini" type="primary" @click="openPlate(-1)">新增</u-button>
					<view v-for="(item,index) in plateList">
						<view v-if="plateList[index]['show']" style="display: flex;justify-content: space-between;align-items: center;">
							<u-input :placeholder="''" v-model="plateList[index]['plate']" :disabled="true" @click="openPlate(index)"/>
							<u-button size="mini" type="error" @click="delPlate(index)">删除</u-button>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="同行人" prop="accompany">
					<u-button size="mini" :disabled="isTotal" :type="isTotal?'':'primary'" @click="addAccompany">新增</u-button>
					<text v-if="siteTotal && siteTotal>0">当前场地最多可预约{{siteTotal}}人</text>
					<u-table>
						<u-tr>
							<u-th>姓名</u-th>
							<u-th>操作</u-th>
						</u-tr>
						<u-tr v-for="(item,index) in form.accompany">
							<u-td>{{item.name}}</u-td>
							<u-td>
								<u-button size="mini" type="error" @click="delAccompany(index)">删除</u-button>
							</u-td>
						</u-tr>
					</u-table>
				</u-form-item>
			</u-form>
			
			<view class="form-btn">
				<view @click="submit" type="primary">预约</view>
			</view>
			
		</view>
		

		<u-picker @confirm="dateConfirm" mode="time" v-model="dateShow" :params="dateParams"></u-picker>
		<timeSlot ref="timeslot" :title="'选择时间段'" 
		:min="hMin" :max="hMax"
		@confirm="confirmTime"></timeSlot>
		<u-picker @confirm="siteConfirm" v-model="siteShow" :range="siteList" range-key="name"
			mode="selector"></u-picker>

		<!-- 新增车牌 -->
		<view class="modal">
			<u-popup v-model="showPlate" mode="bottom">
				<view class="modal-tip">车牌号</view>
				<view class="modal-content" style="height:400rpx">
					<plate @listenPlateChange="(val)=>{plateChange(val,index)}" :defaultPlate="plateNumber" />
				</view>
				<view class="form-btn"  @click="confirmPlate">
					<view type="primary">确认</view>
				</view>
			</u-popup>
		</view>
		<!-- 新增修改同行人 -->
		<view class="modal">
			<u-popup v-model="accompanyShow" mode="bottom">
				<view class="modal-tip">同行人</view>
				<view class="modal-content">
					姓名：<u-input :placeholder="'请输入姓名'" v-model="accompanyObj.name" />
				</view>
				<view class="modal-content">
					身份证：<u-input type="idcard" :placeholder="'请输入身份证'" v-model="accompanyObj.idcard" />
				</view>
				<view class="modal-content">
					手机号：<u-input type="number" :placeholder="'请输入手机号'" v-model="accompanyObj.mobile" />
				</view>
				<view class="form-btn">
					<view @click="submitAccompany" type="primary">提交</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"
	import {
		plate
	} from '@/components/plate/index.vue'
	export default {
		components: {
			timeSlot,
			plate
		},
		data() {
			return {
				dateShow: false,
				hMin:0,
				hMax:24,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showPlate:false,
				plateIndex:-1,
				plateList:[],
				plateNumber: ['苏', 'E', '', '', '', '', ''],
				form: {
					date: '',
					timeRange: '',
					start_time: '',
					end_time: '',
					content: '',
					site: "",
					siteName: '',
					accompany: []
				},
				siteShow: false,
				siteList: [],
				siteTotal:0,
				isTotal:false,
				accompanyShow: false,
				accompanyObj: {
					name: '',
					idcard: '',
					mobile: ''
				},
				accompanyIndex: -1,
				rules: {
					date: [{
						required: true,
						message: '请选择预约日期',
						trigger: ['change', 'blur'],
					}],
					content: [{
						required: true,
						message: '请输入预约事项',
						trigger: ['change', 'blur'],
					}],
					timeRange: [{
						required: true,
						message: '请选择预约时段',
						trigger: ['change', 'blur'],
					}],
					siteName: [{
						required: true,
						message: '请选择预约场地',
						trigger: ['change', 'blur'],
					}]
				},


			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getSites()
		},
		methods: {
			// 日期
			dateConfirm(e) {
				console.log("date", e)
				this.form.date = e.year + '-' + e.month + '-' + e.day
			},
			// 时间段
			//点击吊起弹窗
			openTime() {
				this.$refs.timeslot.open()
			},
			//确认 时间段
			confirmTime(e) {
				// 如果是当天
				// 开始时间要大于现在时间 结束时间不能小于现在时间 
				let nowTime = this.$moment().format("HH:mm")
				console.log("nowtime",nowTime)
				this.form.timeRange = e.start.hour + ":" + e.start.min + '~' + e.end.hour + ":" + e.end.min
				this.form.start_time = e.start.hour + ":" + e.start.min
				this.form.end_time = e.end.hour + ":" + e.end.min
			},
			// 场地
			getSites() {
				this.$u.api.otherConfig().then(res => {
					this.siteList = res.appointment.filter(item=>item.status===1)
				})
			},
			siteConfirm(e) {
				this.form.site = this.siteList[e[0]].id
				this.form.siteName = this.siteList[e[0]].name
				this.siteTotal = this.siteList[e[0]].total
				if(this.siteList[e[0]].start_time){
					let _arr = this.siteList[e[0]].start_time.split(":")
					this.hMin = parseInt(_arr[0])
					let _arr1 = this.siteList[e[0]].end_time.split(":")
					this.hMax = parseInt(_arr1[0])
					console.log(this.hMin,this.hMax)
				}
			},
			plateChange(val,index) {
				console.log(val,this.plateIndex)
				if(val.length>=7){
					this.plateList[this.plateIndex]['plate'] = val.join("")
				}
				console.log(this.plateList[this.plateIndex])
			},
			openPlate(index){
				if(index===-1){
					this.showPlate=true
					this.plateList.push({
						plate:'',
						show:false
					})
					this.plateIndex= this.plateList.length-1
				}else{
					this.showPlate=true
					this.plateNumber = this.plateList[index]['plate']
					this.plateIndex = index
				}

			},
			delPlate(index){
				this.plateList.splice(index,1)
			},
			confirmPlate(){
				this.showPlate=false
				this.plateList[this.plateIndex]['show'] = true
				this.plateIndex= -1
			},
			// 同行人
			addAccompany() {
				this.accompanyShow = true
			},
			submitAccompany() {
				if(this.base.isNull(this.accompanyObj.name)){
					this.base.toast("请输入陪同人姓名")
					return
				}
				if(this.base.isNull(this.accompanyObj.idcard)){
					this.base.toast("请输入陪同人身份证")
					return
				}else{
					if(!this.$u.test.idCard(this.accompanyObj.idcard)){
						this.base.toast("陪同人身份证不正确")
						return
					}
				}
				
				if(this.base.isNull(this.accompanyObj.mobile)){
					this.base.toast("请输入陪同人联系方式")
					return
				}else{
					if(!this.$u.test.mobile(this.accompanyObj.mobile)){
						this.base.toast("陪同人联系方式不正确")
						return
					}
				}
				
				
				this.form.accompany.push(this.accompanyObj)
				this.accompanyIndex = -1
				this.accompanyObj = {}
				this.accompanyShow = false
				if(this.siteTotal && this.siteTotal>0){
					if(this.form.accompany.length===this.siteTotal-1){
						this.isTotal = true
					}
				}
			},
			delAccompany(index) {
				this.form.accompany.splice(index, 1)
			},
			submit() {
				let start_time = ''
				let end_time = ''
				this.$refs.uForm.validate(valid => {
					if (valid) {
						start_time = this.form.date + ' ' + this.form.start_time + ':00'
						end_time = this.form.date + ' ' + this.form.end_time + ':00'
						this.form.accompany_total = this.form.accompany.length
						
						let _plate = ''
						if(this.plateList.length>0){
							if(this.plateList.length>this.form.accompany_total+1){
								this.base.toast("车辆数量已经大于预约人数了")
								return
							}
							_plate = this.plateList.join(',')
							// this.plateList.map(item=>{
							// 	_plate+=item.plate+','
							// })
						}
						this.form.plate = _plate
						console.log("plate",this.form)
						this.$u.api.scheduleSave({
							...this.form,
							start_time:start_time,
							end_time:end_time
						}).then(res => {
							this.base.toast("预约成功",2000,function(){
								uni.redirectTo({
									url:'/packages/mybook/index'
								})
							})

						})
					} else {
						console.log('验证失败');
						// this.base.toast("验证失败")
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.container{
		padding: 30rpx;
		width:100%;
		height:100vh;
		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}
		.wrap{
			background: #fff;
			position: relative;
			padding: 35rpx;
			border-radius: 30rpx;
			padding-top: 0;
		    height: 100%;
		    overflow: scroll;
		}
		.form-btn {
			width: 100%;
			position: relative;
			padding: 60rpx 0;
			// z-index:9999;
			&>view {
				width: 70%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				background: linear-gradient(to right, #5e5fbc, #0d0398);
				border-radius: 30rpx;
				padding: 20rpx;
			}
		}
		.modal {
			::v-deep .u-drawer-bottom {
				border-radius: 40rpx;
			}
		
			&-tip {
				text-align: center;
				padding: 30rpx;
				font-size: 32rpx;
			}
		
			&-content {
				// height: 400rpx;
				padding: 0 30rpx;
			}
		}
	}
</style>