<template>
	<view>
		<app-nav-bar v-if="true" :fixed="true" :title="'预约'" color="#000" background-color="#eae2dd"></app-nav-bar>
		<view class="main-between-y builInfo">
			<view class="main-between">
				<view class="hjx-ts-30 hjx-tw-600 hjx-tc-222">楼盘名称</view>
				<view class="hjx-ts-30 hjx-tc-222">龙湖·揽镜</view>
			</view>
			<view class="main-between">
				<view class="hjx-ts-30 hjx-tw-600 hjx-tc-222">楼盘地址</view>
				<view class="hjx-ts-30 hjx-tc-222">双流区东升街道233号</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 hjx-tc-999">请选择<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>
					
				</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 hjx-tc-999">请选择<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>
					
				</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 hjx-tc-999">{{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="09:01" end="21:01" @change="bindTimeChange">
						<view class="cross-center hjx-ts-28 hjx-tc-999">{{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('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		data() {
			return {
				time:'请选择',
				date:'请选择'
			};
		},
		methods:{
			bindTimeChange(e) {
			            this.time = e.target.value
			        },
			bindDateChange(e) {
				console.log(e)
			            this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

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

	.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>
