<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 @click="handleSelectTime" style="color: #EF9525;font-size: 24rpx;">
							{{(form.time?$u.timeFormat(new Date(form.time), 'yyyy年mm月dd日 hh:MM'):'请选择入场时间>')}}
						</view>
						<u-datetime-picker :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 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="#828282">
					</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">
				<view class="mpopup-title">
					{{notice.name}}
				</view>
				<view class="mpopup-content" style="margin-top: 60rpx;">
					<rich-text :nodes="notice.value"></rich-text>
					<view style="margin-top: 80px;"></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.activity.start_time}}
									报名数量：{{item.total}}</text>
								</view>
							</view>
						</block>
					</view>
					<u-button type="primary" @click="handleConfirmOrder">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		plate
	} from '@/components/plate/index.vue'
	export default {
		name: "index",
		components: {
			plate
		},
		data() {
			return {
				showInfo: false,
				showSelectorder: false,
				selectInfo: "--",
				showSelecttime: false,
				plateNumber: ['苏', 'E', '', '', '', '', ''],
				form: {
					plate: "",
					mobile: "",
					time: new Date(),
					car_park_id: "",
					checkUser: false,
					car_type: 1,
					type: "1",
					car_park_id: 0,
					activity_order_id: "",
					visit_order_id: ""
				},
				listOrder: [],
				listActivtyOrder: [],
				orderType: 1,
				orderid: "",
				bookinfo: {},
				notice: {}
			}
		},
		onLoad(options) {
			let that = this;
			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.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.loadConfigInfo();

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

		},
		methods: {
			loadConfigInfo() {
				var that = this;
				this.util.request({
					api: '/api/mobile/other/config-show',
					data: {
						tag: "car_park_notice"
					},
					utilSuccess: function(res) {
						that.notice = res;
					},
					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.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.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;
				}

				var that = this;
				this.util.request({
					api: '/api/mobile/carpark/order',
					data: this.form,
					method: "POST",
					utilSuccess: function(res) {
						uni.showToast({
							icon: "none",
							title: "下单成功",
							complete() {
								uni.reLaunch({
									url: "/pages/success/success?from=park&id=" + res.id
								})
							}
						})
					},
					utilFail: function(res) {
						that.util.toast(res);
					}
				})

			},
		}
	}
</script>

<style>
	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;
	}
</style>
