<template>
	<view class="min-page color-333 u-p-30 bg-gray u-font-28">
		<uni-forms :model="form">

			<view class="bg-fff border-r-18 default-box-padding">
				<view>预约人数</view>
				<view class="u-m-t-6">
					<uni-easyinput type="text" :inputBorder="false" padding-none v-model="form.perpoleNumber"
						placeholder="填入人数或人数范围，如：1.5-6" />
				</view>
			</view>

			<view class="u-font-32 u-m-t-32 u-m-b-32">预约设置</view>
			
			
			<view class="bg-fff border-r-18 default-box-padding u-m-b-32"  v-for="(item,index) in form.options" :key="index">
				<view>
					<view class="u-flex">
						<view>时间</view>
						<view class="u-flex u-m-l-12">
							<uni-icons type="info" size="14" color="#999"></uni-icons>
						</view>
					</view>
					<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom" @tap="timeAreaOpen(index)">
						<view>
							<text v-if="item.time">{{item.time}}</text>
							<text v-else class="color-999">请选择时间</text>
						</view>
						<view class="u-flex">
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>

					</view>
				</view>

				<view class="u-m-t-24">
					<view class="u-flex">
						<view>可选数量</view>
						<view class="u-flex u-m-l-12">
							<uni-icons type="info" size="14" color="#999"></uni-icons>
						</view>
					</view>
					<view class="u-m-t-6 border-bottom u-p-b-10">
						<uni-easyinput type="text" :inputBorder="false" padding-none v-model="item.number"
							placeholder="请输入数量" />
					</view>
				</view>
				<view class="u-m-t-24">
					<view class="u-flex">
						<view>定金设置(元)</view>
						<view class="u-flex u-m-l-12">
							<uni-icons type="info" size="14" color="#999"></uni-icons>
						</view>
					</view>
					<view class="u-m-t-6 border-bottom u-p-b-10">
						<uni-easyinput type="text" :inputBorder="false" padding-none v-model="item.price"
							placeholder="选填" />
					</view>
				</view>

				<view class="u-flex u-m-t-24" @tap="delOption(index)">
					<uni-icons type="minus-filled" size="20" :color="color.ColorRed"></uni-icons>
					<view class="u-m-l-16">删除</view>
				</view>

			</view>

		</uni-forms>
		<view class="bg-fff border-r-18 u-m-t-32 default-box-padding u-flex" @tap="addOptions">
			<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
			<view class="u-m-l-16">添加</view>
		</view>
		<view style="height: 200rpx;"></view>
	</view>


	<view class="u-fix bottom">
		<my-button shape="circle" type="primary" @tap="save">保存</my-button>
	</view>
	
	<my-time-area-pickerview ref="timeArea" @confirm="timeAreaConfirm"></my-time-area-pickerview>
</template>

<script setup>
	import {
		onLoad,
		onReady,
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		reactive,nextTick, ref 
	} from 'vue';
	import color from '@/commons/color.js'
	import myButton from '@/components/my-components/my-button'
	import myTimeAreaPickerview from '@/components/my-components/my-time-area-pickerview'
	const timeArea=ref(null)
	function timeAreaOpen(index){
		pageData.optionActive=index
		timeArea.value.open()
	}
	function timeAreaConfirm(e){
		console.log(e);
		form.options[pageData.optionActive].time=e
	}
	
	const $option={
		time:'',
		number:'',
		price:''
	}
	const pageData = reactive({
		type: 'add',
		optionActive:''
	})
	const form = reactive({
		perpoleNumber: '',
		options:[{...$option}]
	})
	function save(){
		
	}
	//页面滚动到最底部
	function scrollPageBottom() {
		nextTick(() => {
			uni.pageScrollTo({
				duration: 100, // 过渡时间
				scrollTop: 100000, // 滚动的实际距离
			})
		})
	}
	function delOption(index){
		form.options.splice(index,1)
	}
	function addOptions(){
		form.options.push({...$option})
		scrollPageBottom()
	}

	onLoad(par => {
		uni.setNavigationBarTitle({
			title: pageData.type === 'add' ? '添加预约时间' : '编辑预约时间'
		})
	})
</script>

<style lang="scss" scoped>
	.bottom {
		bottom: calc(env(safe-area-inset-bottom) + 32rpx);
		left: 110rpx;
		right: 110rpx;
	}
</style>