<template>
	<view>
		<!-- <image src="https://t17.9026.com/web/statics/image/index/appointment_top.png" mode=""></image> -->
		<app-nav-bar v-if="true" :fixed="true" :xStyle="1" :hasMallSetting="2" :title="'预约'" color="#fff" :background-color="'#e2c47b'"></app-nav-bar>
		<!-- <app-nav-bar v-if="true" :fixed="true" :background-color="''" :xStyle="1" :hasMallSetting="2" -->
		<view class="main-between-y builInfo">
			<view class="main-between cross-center" style="height: 72rpx;" >
				<view class="hjx-ts-30 hjx-tw-600 hjx-tc-222">活动名称</view>
				<view class="hjx-ts-30 hjx-tc-222">
					<view class="cross-center hjx-ts-28 t-omit hjx-tc-000" style="width: 510rpx;text-align: right;">{{dataDetail.name}}
					</view>
				</view>
			</view>
			<view class="main-between cross-center" style="height: 72rpx;" >
				<view class="hjx-ts-30 hjx-tw-600 hjx-tc-222">活动地址</view>
				<view class="hjx-ts-30 hjx-tc-222">
					<view class="cross-center hjx-ts-28 t-omit hjx-tc-000" style="width: 510rpx;text-align: right;">{{dataDetail.address}}
					</view>
				</view>
			</view>
		</view>
		<view class="form_box">
			<view class="title">预约人信息</view>
			<view class="hjx-line"></view>
			<view class="item main-between cross-center">
				<view class="hjx-ts-28 hjx-tw-600 hjx-tc-000">姓名</view>
				<view>
					<view class="cross-center hjx-ts-28 ">
						<input type="text" v-model="username" style="text-align:right;color: #000000;" placeholder="请输入"
							placeholder-style="text-align:right" placeholder-class="hjx-tc-999" />
					</view>

				</view>
			</view>
			<view class="item main-between cross-center">
				<view class="hjx-ts-28 hjx-tw-600 hjx-tc-000">电话</view>
				<view>
					<view class="cross-center hjx-ts-28 ">
						<input type="number" v-model="mobile" maxlength="11" style="text-align:right;color: #000000;" placeholder="请输入"
							placeholder-style="text-align:right" placeholder-class="hjx-tc-999" />
					</view>

				</view>
			</view>
			<view class="item main-between cross-center">
				<view class="hjx-ts-28 hjx-tw-600 hjx-tc-000">到访日期</view>
				<view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="cross-center hjx-ts-28"
							:class="{'hjx-tc-999':date=='请选择'?true:false,'hjx-tc-000':date!='请选择'?true:false}">{{date}}
							<image style="width: 12.8rpx;height: 22.8rpx;margin-left: 20rpx;"
								src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="item main-between cross-center">
				<view class="hjx-ts-28 hjx-tw-600 hjx-tc-000">到访时间</view>
				<view>
					<picker mode="time" :value="time" :start="startTime" :end="endTime" @change="bindTimeChange">
						<view class="cross-center hjx-ts-28"
							:class="{'hjx-tc-999':time=='请选择'?true:false,'hjx-tc-000':time!='请选择'?true:false}">{{time}}
							<image style="width: 12.8rpx;height: 22.8rpx;margin-left: 20rpx;"
								src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="noMake cross-center">
			<button type="default" @tap="goAppointment">立即预约</button>
		</view>
	</view>
</template>

<script>
	import AppNavBar from '@/components/page-component/index/app-nav-bar.vue';
	export default {
		components: {
			AppNavBar,
		},
		computed: {
			startDate() {
				return this.getDate(1,this.dataDetail.begin_time);
			},
			endDate() {
				return this.getDate(1,this.dataDetail.end_time);
			}
		},
		data() {
			return {
				dataDetail:{},
				estate_id:'',
				estate_name:'',
				estate_address:'',
				
				username: '',
				mobile: '',
				time: '请选择',
				date: '请选择',
				
				startTime:'',
				endTime:'',
			};
		},
		watch:{
			date(nVal,oVal){
				if(nVal==this.startDate){
					this.startTime=this.getDate(2,this.dataDetail.begin_time);
				}else{
					this.startTime='00:00'
				}
				if(nVal==this.endDate){
					this.endTime=this.getDate(2,this.dataDetail.end_time);
				}else{
					this.endTime='23:59'
				}
				if(new Date('2007-2-2 '+this.time).getTime()<new Date('2007-2-2 '+this.startTime).getTime() || new Date('2007-2-2 '+this.time).getTime()>new Date('2007-2-2 '+this.endTime).getTime()){
					this.time='请选择'
				}
			}
		},
		onLoad(option) {
			this.visit_id=option.id
			this.$request({
				url: this.$api.user.visit_detail,
				data: {
					visit_id: option.id
				},
				method: 'post'
			}).then(res => {
				if (res.code === 0) {
					this.dataDetail=res.data
				}
			});
		},
		methods: {
			bindTimeChange(e) {
				this.time = e.target.value
			},
			bindDateChange(e) {
				this.date = e.target.value
			},
			getDate(type,val) {
				const date = new Date(val);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hours=date.getHours();
				let minutes=date.getMinutes();
				if(type===1){
					month = month > 9 ? month : '0' + month;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
				}else{
					hours=hours>9?hours:'0'+hours;
					minutes=minutes<10? '0'+minutes:minutes;
					return `${hours}:${minutes}`;
				}
				
			},
			goAppointment() {
				if(!this.username){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return
				}
				if(!this.$validation.mobile(this.mobile)){
					uni.showToast({
						title:'手机号不合法',
						icon:'none'
					})
					return
				}
				if(this.date==='请选择' || this.time==='请选择'){
					uni.showToast({
						title:'请选择预约日期',
						icon:'none'
					})
					return
				}
				this.$request({
					url: this.$api.user.visit_appoint,
					data: {
						visit_id: this.visit_id,
						username: this.username,
						mobile: this.mobile,
						visit_date: this.date + ' ' + this.time,
					},
					method: 'post'
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '预约成功',
							complete:()=>{
								uni.navigateBack()
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.builInfo {
		padding: 30rpx 36rpx;
		height: auto;
	}

	.form_box {
		width: 678rpx;
		height: 459rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		margin: 20rpx auto;

		.title {
			height: 99rpx;
			padding: 0 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			line-height: 99rpx;
		}

		.item {
			height: 89rpx;
			padding: 0 30rpx;
		}
	}

	.noMake {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 156rpx;
		background: #FFFFFF;
		box-shadow: 0px 7rpx 45rpx 1rpx rgba(85, 82, 82, 0.64);

		button {
			width: 678rpx;
			height: 84rpx;
			background: #A18353;
			border-radius: 6rpx;
			margin: 0 auto;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
