<template>
	<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
		<template #desc>
			<view class="u-p-30 u-text-left">
				<view>
					<view>开始日期</view>
					<view class="u-m-t-24 u-flex border">
						<image src="/pageReserveSeat/static/images/icon-calender.svg" class="icon-default-size u-m-r-32"
							mode="">
						</image>
						<view class="u-flex u-flex-1" @tap="startDateToggle">
							<view class="color-666" v-if="form.start===''">请选择开始日期</view>
							<view v-else>
								<uni-dateformat format="yyyy-MM-dd" :date="form.start"></uni-dateformat>
							</view>
						</view>
					</view>
				</view>
				<view class="u-m-t-32">
					<view>结束日期</view>
					<view class="u-m-t-24 u-flex border">
						<image src="/pageReserveSeat/static/images/icon-calender.svg" class="icon-default-size u-m-r-32"
							mode="">
						</image>
						<view class="u-flex-1 u-flex" @tap="endDateToggle">
							<view class="color-666" v-if="form.end===''">请选择结束日期</view>
							<view v-else>
								<uni-dateformat format="yyyy-MM-dd" :date="form.end"></uni-dateformat>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</template>
		<template #btn>
			<view class="u-p-30">
				<view class="u-m-t-10">
					<my-button @tap="confirm" shape="circle" showShadow>保存并添加</my-button>
					<my-button type="cancel" bgColor="#fff" @tap="close">取消</my-button>
				</view>
			</view>
		</template>
	</my-model>
	
	
	<!-- 开始时间 -->
	<my-date-pickerview @confirm="startDateConfirm" :selTime="form.start" 
	:isArea="false" mode="date" ref="startDatePicker"></my-date-pickerview>
	
	<!-- 结束时间 -->
	<my-date-pickerview @confirm="endDateConfirm" :selTime="form.end"
	:isArea="false" mode="date" ref="endDatePicker"></my-date-pickerview>
</template>

<script setup>
	import {
		reactive,
		nextTick,
		ref
	} from 'vue';
	import myModel from '@/components/my-components/my-model.vue'
	import myButton from '@/components/my-components/my-button.vue'
	import myDatePickerview from '@/components/my-components/my-date-pickerview'
	const props = defineProps({
		title: {
			type: String,
			default: ''
		}
	})
	
	const startDatePicker=ref(null)
	const endDatePicker=ref(null)
	function startDateToggle() {
		startDatePicker.value.toggle()
	}
	function endDateToggle() {
		endDatePicker.value.toggle()
	}
	function startDateConfirm(e) {
		form.start=e
	}
	function endDateConfirm(e) {
		form.end=e
	}

	function changeCauses(item) {
		let prve = form.remark.length ? ',' : ''
		form.remark += prve + item.name
	}



	function setForm(key, val) {
		form[key] = val
	}




	const $form = {
		start: '',
		end: ''
	}
	const form = reactive({
		...$form
	})

	function resetForm() {
		Object.assign(form, {
			...$form
		})
	}

	const model = ref(null)

	function open() {
		model.value.open()
	}

	function close() {
		model.value.close()
	}
	const emits = defineEmits(['confirm'])

	function confirm() {
		const {
			start,end
		} = form
		if(start===''){
			return uni.showToast({
				icon:'none',
				title:'请选择开始日期'
			})
		}
		if(end===''){
			return uni.showToast({
				icon:'none',
				title:'请选择结束日期'
			})
		}
		close()
		emits('confirm',{start,end})
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	.border {
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 22rpx;
	}

	.lh34 {
		line-height: 34rpx;
	}


	.hover-class {
		background-color: #E5E5E5;
	}


	.bg1 {
		background: #F7F7FA;
	}

	.tab {
		padding: 0 80rpx;
	}

	.border {
		border: 1px solid #E5E5E5;
		border-radius: 4rpx;
	}

	.input-box {
		padding: 22rpx 32rpx;
		font-size: 28rpx;
		color: #666;
	}

	.placeholder-class {
		font-size: 28rpx;
	}
</style>