<template>
	<view>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">预约项目</view>
				<text>{{reseForm.projectName}}</text>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">项目价格</view>
				<text class="text-price text-red">{{reseForm.peojectMoney}}</text>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">会员信息</view>
				<text >{{reseForm.memberInfo}}</text>
			</view>
			<view class="cu-form-group">
				<view class="title">日期选择</view>
				<picker mode="date" :value="reseForm.dateDay" start="09:01" end="21:01" @change="TimeChange">
					<view class="picker">
						{{reseForm.dateDay}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">时间选择</view>
				<picker mode="time" :value="reseForm.dateTime" start="2015-09-01" end="2020-09-01" @change="DateChange">
					<view class="picker">
						{{reseForm.dateTime}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">备注</view>
			</view>
			<view class="cu-form-group ">
				<textarea maxlength="-1" :disabled="reseForm.remark!=null" @input="textareaAInput" placeholder="在这里填写你的备注"></textarea>
			</view>
			<button class="cu-btn bg-green shadow-blur round lg" style="width: 90%;margin: 50upx 5%;" type="warn">提交预约</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reseForm: {
					projectName: "精品美容A套餐",
					peojectMoney: 188,
					memberInfo: '刘乐乐 - 男',
					dateTime: "10:00",
					dateDay: "2021-04-01",
					remark: null,
				},
			}
		},
		methods: {
			textareaAInput(e) {
				this.reseForm.remark = e.detail.value
			},
			TimeChange(e) {
				this.reseForm.dateDay = e.detail.value
			},
			DateChange(e) {
				this.reseForm.dateTime = e.detail.value
			},
		},
		onLoad: function(option) {
			if (option.item != undefined) {
				const item = JSON.parse(option.item);
				this.reservationForm = item
			}
		},
	}
</script>

<style>

</style>
