<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-16 u-flex u-row-between" @tap="datePickerOpen">
					<view>
						<uni-dateformat format="yyyy-MM-dd" v-if="form.time" :date="form.time"></uni-dateformat>
						<text v-else class="color-999">请填写日期</text>
					</view>
					<view class="u-flex">
						<uni-icons type="right" color="#999" size="16"></uni-icons>
					</view>
				</view>
			</view>


			<view class="bg-fff border-r-18 default-box-padding u-m-t-32" v-for="(time,index) in form.times"
				:key="index">
				<view class="u-relative">
					<view>
						预约人数
					</view>
					<view class="u-m-t-6 border-bottom u-p-b-10" style="padding-right:150rpx ;">
						<uni-easyinput type="text" :inputBorder="false" padding-none v-model="time.number"
							placeholder="请输入预约人数" />
					</view>
					<view class="u-absolute" style="right: 0;top: 30rpx;z-index: 10;">
						<my-button @tap="delTimes(index)" shape="circle" type="default" plain  width="140"  height="56"><view class="color-666">删除</view></my-button>
					</view>
				</view>
				<view class="u-m-t-24">
					<view class="u-flex color-666 u-row-between">
						<view class="u-flex-1">预约时间</view>
						<view class="u-flex-1">可预约人数</view>
						<view class="u-flex-1">定金设置(元)</view>
					</view>
					<view class="u-m-t-24 border-bottom u-p-b-8">
						<view class="u-row-between u-flex u-m-b-16" v-for="(option,optionIndex) in time.options" :key="optionIndex">
							<view class=" u-flex-1" @tap="timeAreaOpen(index,optionIndex)">
								<view class="border" style="width: 200rpx;">
									<text v-if="option.time">{{option.time}}</text>
									<text v-else class="color-999">请选择</text>
								</view>
							</view>
							<view class=" u-flex-1" >
								<view class="border" style="width: 144rpx;">
									<input class="u-font-28" type="text" v-model="option.number"	placeholder="选填"/>
								</view>
							</view>
							<view class="u-flex u-row-between u-flex-1" >
								<view class="border" style="width: 144rpx;">
									<input class="u-font-28" type="text" v-model="option.price"	placeholder="选填"/>
								</view>
								<view class="u-flex" @tap="delOption(index,optionIndex)">
									<uni-icons type="minus-filled" size="20" :color="color.ColorRed"></uni-icons>
								</view>
							</view>
							
							
						</view>
					</view>
					<view class="u-flex u-m-t-30" @tap="addOptions(index)">
						<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
						<view class="u-m-l-16">添加</view>
					</view>
				</view>


			</view>

		</uni-forms>
		<view class="bg-fff border-r-18 u-m-t-32 default-box-padding u-flex" @tap="addTimes">
			<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>

	<!-- 日期选择 -->
	<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker" :selTime="form.time" :isArea="false"
		mode="date"></my-date-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'
	import myDatePickerview from '@/components/my-components/my-date-pickerview'

	const timeArea = ref(null)
	const datePicker = ref(null)

	function datePickerOpen() {
		datePicker.value.open()
	}

	function datePickerConfirm(e) {
		form.time = e
	}

	function timeAreaOpen(timeIndex,optIndex) {
		pageData.optionActive = optIndex
		pageData.timeActive = timeIndex
		timeArea.value.open()
	}

	function timeAreaConfirm(e) {
		console.log(e);
		form.times[pageData.timeActive].options[pageData.optionActive].time = e
	}
	
	const $option = {
		time: '',
		number: '',
		price: ''
	}
	const $time = {
		number: '',
		options:[]
	}
	const pageData = reactive({
		type: 'add',
		timeActive: '',
		optionActive: ''
	})
	const form = reactive({
		time: '',
		times: [{
			...$time,
			options:[{...$option},{...$option}]
		}]
	})

	function save() {

	}
	//页面滚动到最底部
	function scrollPageBottom() {
		nextTick(() => {
			uni.pageScrollTo({
				duration: 100, // 过渡时间
				scrollTop: 100000, // 滚动的实际距离
			})
		})
	}
	
	function addOptions(index){
		form.times[index].options.push({
			...$option
		})
	}
	function delOption(index,optionIndex) {
		form.times[index].options.splice(optionIndex, 1)
	}

	function addTimes() {
		form.times.push({
			...$time,
			options:[$option]
		})
		scrollPageBottom()
	}
	function delTimes(index){
		uni.showModal({
			title: '提示',
			content: '确认删除该预约?',
			success: function (res) {
				if (res.confirm) {
					form.times.splice(index,1)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	onLoad(par => {
		uni.setNavigationBarTitle({
			title: pageData.type === 'add' ? '添加特殊预约时间' : '编辑特殊预约时间'
		})
	})
</script>

<style lang="scss" scoped>
	.border{
		padding: 6rpx 16rpx;
		box-sizing: border-box;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1px solid #E5E5E5;
	}
	.bottom {
		bottom: calc(env(safe-area-inset-bottom) + 32rpx);
		left: 110rpx;
		right: 110rpx;
	}
	::v-deep.input-placeholder{
		font-size: 28rpx;
	}
	
</style>