<template>
	<view>
		<view class="box-content">
			<view class="box-card">
				<!-- <view class="box-tip justify-between">
					<text class="box-tiptxt">已选：{{selectInfo}}</text>
				</view> -->
				<u--form labelPosition="top" labelWidth="120px" :model="form" ref="form">
					<u-form-item label="预约入场时间" labelPosition="top" borderBottom>

						<view style="color: #EF9525;font-size: 24rpx;display: flex;" @click="showSelecttime=true">
							<!-- {{selectInfo}} -->
							<text>{{(form.time?timeFormat(formTime, 'yyyy年MM月DD日 HH:mm'):'请选择入场时间>')}}</text>
							<u-icon name="arrow-down" color="#000"></u-icon>
						</view>
						<u-datetime-picker
						 :minDate="minDate"
						 :maxDate="maxDate"
						 :show="showSelecttime" closeOnClickOverlay @close="cancelTime"
							@cancel="cancelTime" @confirm="confirmTime" v-model="form.time" mode="datetime">
						</u-datetime-picker>
					</u-form-item>
					<u-form-item label="车牌号码" labelPosition="top" borderBottom ref="plate">
						<plate @listenPlateChange="plateChange" :defaultPlate="plateNumber" />
					</u-form-item>
					<u-form-item label="手机号" labelPosition="top" borderBottom ref="mobile">
						<u--input readonly placeholder="请输入手机号" v-model="form.mobile" border="surround" clearable>
						</u--input>
					</u-form-item>
				</u--form>

				<view class="box-tip box-tipgray flex-row align-center" @click="handleChange">
					<u-icon :name="(form.checkUser?'checkmark-circle-fill':'checkmark-circle')" color="#EF9525">
					</u-icon>
					<view class="box-tiptxt" style="margin-left: 10rpx;">请认真阅读、知悉并遵守<text @click.stop="openNotice"
							style="color: #EF9525;">《本馆停车须知》</text></view>
				</view>
			</view>
		</view>
		<view class="page-bottom">
			<u-button type="primary" @click="submitOrder">确定</u-button>
		</view>

		<u-popup :show="showInfo" mode="bottom" @close="closeInfo" :round="10" closeable>
			<view class="mpopup" :style="[{height:maxheight}]">
				<view class="mpopup-title">
					{{notice.name}}
				</view>
				<view class="mpopup-content" style="margin-top: 60rpx;">
					<scroll-view scroll-y="true" style="line-height: 50rpx;font-size: 32rpx;text-indent: 2em;"
						:style="[{height:scrollheight}]">
						<rich-text :nodes="notice.value"></rich-text>
					</scroll-view>

					<view style="margin-top: 40rpx;"></view>
					<u-button type="primary" @click="closeInfo">知道了</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showSelectorder" mode="bottom" :closeOnClickOverlay="false" @close="closeorder" :round="10">
			<view class="mpopup">
				<view class="mpopup-title">
					选择预约的活动或者预约的参观
				</view>
				<view class="mpopup-content" style="padding: 40rpx 20rpx;">
					<view v-if="listOrder.length!=0">
						<view class="mpopup-title" style="text-align: left;padding: 20rpx 0;font-size: 14px;">
							预约的参观
						</view>
						<block v-for="(item,index) in listOrder" :key="index">
							<view class="box-tip  flex-row align-center" @click="handleSelectOrder(index,1)"
								style="margin-bottom: 20rpx;">
								<u-icon :name="(item.checked?'checkmark-circle-fill':'checkmark-circle')"
									color="#EF9525">
								</u-icon>
								<view class="box-tiptxt" style="margin-left: 10rpx;">
									{{$u.timeFormat(new Date(item.date), 'mm月dd日')}}
									{{item.time}}丨{{item.details_count}} 位观众</text>
								</view>
							</view>
						</block>
					</view>
					<view v-if="listActivtyOrder.length!=0">
						<view class="mpopup-title" style="text-align: left;padding: 20rpx 0;font-size: 14px;">
							预约的活动
						</view>
						<block v-for="(item,index) in listActivtyOrder" :key="index">
							<view class="box-tip  flex-row align-center" @click="handleSelectOrder(index,2)"
								style="margin-bottom: 20rpx;">
								<u-icon :name="(item.checked?'checkmark-circle-fill':'checkmark-circle')"
									color="#EF9525">
								</u-icon>
								<view class="box-tiptxt" style="margin-left: 10rpx;">
									活动时间：{{item.number}}
									报名数量：{{item.total}}</text>
								</view>
							</view>
						</block>
					</view>
					<u-button type="primary" @click="handleConfirmOrder">确定</u-button>
				</view>
			</view>
		</u-popup>

		<u-popup :show="successshow" customStyle="width:600rpx;height:300rpx;text-align:center" :round="10"
			mode="center" width="600rpx" height="150rpx">
			<view class="">
				<view class="successBox">
					<!-- <u-icon name="checkmark-circle" size="90" color="#EF9525"></u-icon> -->
					<view class="h3">您已经预约成功</view>
					<view class="p">即将跳转到车位预约 {{time}} s</view>
				</view>
				<view class="pinkBtn" @click="goHome">返回首页</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import {
	// 	plate
	// } from '@/components/plate/index.vue'
	export default {
		name: "index",
		// components: {
		// 	plate
		// },
		data() {
			return {
				successshow: false,
				time: 3,
				showInfo: false,
				showSelectorder: false,
				maxheight: "",
				scrollheight: "",
				selectInfo: "--",
				showSelecttime: false,
				plateNumber: ['苏', 'E', '', '', '', '', ''],
				t: null,
				timer: null,
				form: {
					plate: "",
					mobile: "",
					time: '',
					car_park_id: "",
					checkUser: false,
					car_type: 1,
					type: "1",
					car_park_id: 0,
					activity_order_id: "",
					visit_order_id: ""
				},
				formTime: Number(new Date()),
				minDate:'',
				maxDate:'',
				listOrder: [],
				listActivtyOrder: [],
				orderType: 1,
				orderid: "",
				bookinfo: {},
				notice: {}
			}
		},
		onLoad(options) {
			let that = this;
			
			that.showInfo = true;
			if (!that.util.isNull(options.id)) {
				this.form.car_park_id = parseInt(options.id);
			}
			if (!that.util.isNull(options.currentPark)) {
				this.form.type = options.currentPark;
			}

			// if (!that.util.isNull(options.bookinfo)) {
			// 	let bookinfo = JSON.parse(unescape(options.bookinfo));
			// 	this.bookinfo = bookinfo;
			// 	this.form.time = bookinfo.time;
			// 	this.formTime = bookinfo.time;
			// 	this.orderType = bookinfo.orderType;
			// 	this.selectInfo = bookinfo.info;
			// 	if (this.orderType == 2)
			// 		this.form.activity_order_id = bookinfo.orderid
			// 	else
			// 		this.form.visit_order_id = bookinfo.orderid
			// 	this.orderid = bookinfo.orderid
			// }
			that.form.time = this.$moment(this.$moment().format('YYYY-MM-DD HH:mm:ss')).valueOf()
			that.formTime = this.$moment(this.$moment().format('YYYY-MM-DD HH:mm:ss')).valueOf()
			console.log(that.form.time)
			this.minDate = this.$moment(this.$moment().format('YYYY-MM-DD HH:mm:ss')).valueOf()
			this.maxDate = this.$moment(this.$moment().add('days',6).format('YYYY-MM-DD') + ' 16:00:00').valueOf()
			console.log("this.minDate",this.minDate,this.maxDate)
			that.loadConfigInfo();

			that.util.getUserInfo(function(r) {
				that.form.mobile = r.mobile;
			}, true);

			that.maxheight = wx.getSystemInfoSync().windowHeight * 0.6 + "px"
			that.scrollheight = wx.getSystemInfoSync().windowHeight * 0.6 * 0.7 + "px"
		},
		onShow() {

		},
		onHide() {
			clearInterval(this.t)
			clearTimeout(this.timer)
		},

		onUnload() {
			clearInterval(this.t)
			clearTimeout(this.timer)
		},
		methods: {
			timeFormat(val, format) {
				return this.$moment(val).format(format)
			},
			goHome() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			loadConfigInfo() {
				var that = this;
				this.util.request({
					api: '/api/mobile/other/config-show',
					data: {
						tag: "car_park_notice"
					},
					utilSuccess: function(res) {
						that.notice = res;
						that.notice.value = that.notice.value.replace(/\<p/gi, "<p class='richp'");


					},
					utilFail: function(res) {
						uni.showToast({
							icon: "none",
							title: res,
							duration: 2000
						})
					}
				})
			},
			openNotice() {
				this.showInfo = true;
			},
			closeInfo() {
				this.showInfo = false;
			},
			handleConfirmOrder() {
				if (this.orderid === 0) {
					this.util.toast("请选择预约的活动或者预约的参观");
					return false;
				}
				this.showSelectorder = false;
			},
			handleSelectOrder(index, type) {
				for (var m of this.listActivtyOrder) {
					m.checked = false;
				}
				for (var m of this.listOrder) {
					m.checked = false;
				}
				if (type == 1) {
					this.listOrder[index].checked = true;
					this.selectInfo = this.$moment(this.listOrder[index].date).format("MM月DD日") + " " + this.listOrder[
						index].time
					this.form.time = this.$moment(this.listOrder[index].date + " " + this.listOrder[
						index].time.split("-")[0]).format("YYYY-MM-DD HH:mm:ss");
					this.form.visit_order_id = this.orderid = this.listOrder[index].id;

				} else {
					this.listActivtyOrder[index].checked = true
					this.selectInfo = this.$moment(this.listActivtyOrder[index].activity.start_time).format("MM月DD日 HH:mm")

					this.form.time = this.$moment(this.listActivtyOrder[index].activity.start_time).format(
						"YYYY-MM-DD HH:mm:ss");
					this.form.activity_order_id = this.orderid = this.listActivtyOrder[index].id;
				}
				this.orderType = type;
			},
			openselectorder() {
				this.showSelectorder = true;
			},
			closeorder() {
				this.showSelectorder = false;
			},
			loadOrder(cb) {
				var that = this;
				this.util.request({
					api: '/api/mobile/user/my-visit-order',
					data: {
						status: 1
					},
					utilSuccess: function(res) {
						for (var mod of res) {
							mod.checked = false;
						}
						that.listOrder = res;
						cb(res)
					},
					utilFail: function(res) {
						this.util.toast(res)
					}
				})
			},
			loadactivityOrder(cb) {
				var that = this;
				this.util.request({
					api: '/api/mobile/user/my-activity-order',
					data: {
						status: 1
					},
					utilSuccess: function(res) {
						for (var mod of res) {
							mod.checked = false;
						}
						that.listActivtyOrder = res;
						cb(res);
					},
					utilFail: function(res) {
						this.util.toast(res)
					}
				})
			},
			confirmTime(e) {
				console.log(e)
				this.form.time = e.value
				this.formTime = e.value
				let choosetime = parseInt(this.$moment(this.form.time).format("HH"))
				let chooseMin = parseInt(this.$moment(this.form.time).format("mm"))
				// let nowtime =  parseInt(this.$moment().format("HH"))
				// console.log(chooseMin)
				if(choosetime<9 || choosetime>16 || (choosetime==16 && chooseMin>0)){
					this.util.toast("请选择正确的入场时间");
					return false;
				}
				this.showSelecttime = false;
			},
			cancelTime() {
				this.showSelecttime = false;
			},
			plateChange(val) {
				this.form.plate = val.join("")
			},
			handleChange() {
				this.form.checkUser = !this.form.checkUser;
			},
			handleSelectTime() {
				this.showSelecttime = true;
			},
			
			submitOrder() {
				// if (this.util.isNull(this.orderid)) {
				// 	this.util.toast("请选择参观预约或者活动预约");
				// 	return false;
				// }
				if(this.$moment(this.form.time).format("HH")<9 || this.$moment(this.form.time).format("HH")>16){
					this.util.toast("请选择正确的入场时间");
					return false;
				}
				if (this.form.plate.length != 7 && this.form.plate.length != 8) {
					this.util.toast("请正确填写车牌号");
					return false;
				}
				if (this.util.isNull(this.form.mobile)) {
					uni.showToast({
						icon: "none",
						title: "请填写手机号"
					})
					return false;
				} else if (!uni.$u.test.mobile(this.form.mobile)) {
					uni.showToast({
						icon: "none",
						title: "请正确填写手机号"
					})
					return false;
				}

				if (!this.form.checkUser) {
					this.util.toast("请阅读预约通知");
					return false;
				}
				
				this.form.time = this.timeFormat(this.form.time, 'yyyy-MM-DD HH:mm')
				console.log(this.form.time)
				// return
				var that = this;
				this.util.request({
					api: '/api/mobile/carpark/order',
					data: this.form,
					method: "POST",
					utilSuccess: function(res) {
						that.successshow = true;
						that.t = setInterval(function() {
							if (that.time > 0)
								that.time = that.time - 1;
						}, 1000)
						that.timer = setTimeout(function() {
							uni.redirectTo({
								url: '/pages/order/parkorder'
							})
							clearInterval(that.t);
							clearTimeout(that.timer)
						}, 3000)
						// uni.showToast({
						// 	icon: "none",
						// 	title: "下单成功",
						// 	complete() {
						// 		uni.redirectTo({
						// 			url: "/pages/success/success?from=park&id=" + res.id
						// 		})
						// 	}
						// })
					},
					utilFail: function(res) {
						that.util.toast(res);
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f6f4;
	}

	.box-tip {
		background: #FCF6E3;
		height: 66rpx;
		line-height: 66rpx;
		box-sizing: border-box;
		padding: 0rpx 12rpx;
	}

	.box-tipgray {
		background: #f7f6f4 !important;
	}

	.box-tiptxt {
		font-size: 24rpx;
		color: #828282;
	}

	.box-tipbtn {
		font-size: 24rpx;
		text-decoration: underline;
		color: #EF9525;
	}

	.box-content {
		padding: 30rpx 24rpx;
	}

	.box-card {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 31rpx 18rpx;
		margin-bottom: 20rpx;
	}

	.page-bottom {
		background: #FFFFFF;
		height: 108rpx;
		box-shadow: 2rpx 3rpx 10rpx 0rpx rgba(107, 94, 77, 0.3);
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 15rpx 25rpx;
		box-sizing: border-box;
		z-index: 10;
	}

	.successBox {

		.iconfont {
			color: #00CCB9;
			font-size: 180rpx;
		}

		.h3 {
			font-size: 40rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 40rpx;
		}

		.p {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			margin-top: 24rpx;
		}

	}

	.pinkBtn {
		width: 50%;
		background-image: linear-gradient(45deg, #EF9525 0%, #EF9525 100%);
		border-radius: 44rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 70rpx;
		margin: 30rpx auto;
	}

	.richp {
		margin-bottom: 10rpx
	}
</style>
