<template>
	<view>
		<view class="bg-fff u-flex u-row-between default-box-padding border-r-12 u-flex">
			<view>开启预约</view>
			<my-switch v-model="form.openYuyue"></my-switch>
		</view>
		<view class="bg-fff u-flex u-m-t-32 u-row-between default-box-padding border-r-12 u-flex">
			<view>自动通过预约</view>
			<my-switch v-model="form.autoPass"></my-switch>
		</view>

		<view class="bg-fff u-m-t-32 default-box-padding border-r-12">
			<view class=" u-flex  u-row-between   ">
				<view>可预约日期范围</view>
				<view class="color-main u-flex" @tap="refTimeOpen">
					<view>{{dateArea.selItem.name}}</view>
					<view class="u-flex u-m-l-12">
						<uni-icons type="right" :color="color.ColorMain" size="16"></uni-icons>
					</view>
				</view>

			</view>
			<view class="u-m-t-12" v-if="dateArea.selItem.name==='自定义'">
				<uni-easyinput :inputBorder="false" padding-none v-model="dateArea.days"
					placeholder="请输入天数"></uni-easyinput>
			</view>
		</view>

		<view class="bg-fff  u-m-t-32  default-box-padding border-r-12 ">
			<view class="u-flex u-row-between">
				<view>每周不可预约时间</view>
				<my-switch v-model="form.openWeeks"></my-switch>
			</view>
			<view class="u-flex weeks  u-flex-wrap u-m-t-32" v-if="form.openWeeks">
				<view class="item" @tap="changeWeeksChecked(item)" :class="{active:item.checked}"
					v-for="(item,index) in weeks.list" :key="index">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="bg-fff u-flex u-m-t-32 u-row-between default-box-padding border-r-12 u-flex">
			<view>当天不可预约</view>
			<my-switch v-model="form.autoPass"></my-switch>
		</view>

		<view class="bg-fff  u-m-t-32  default-box-padding border-r-12 ">
			<view class="u-flex u-row-between">
				<view>不可预约日期</view>
				<my-switch v-model="form.openDisabledTimes"></my-switch>
			</view>
			<template v-if="form.openDisabledTimes">
				<view class="u-flex u-m-t-38 border-bottom u-p-b-24" v-for="(item,index) in form.unpredictableDates"
					:key="index">
					<uni-icons @tap="delUnpredictableDate(index)" type="minus-filled" size="20"
						:color="color.ColorRed"></uni-icons>
					<view class="u-m-l-24">
						<uni-dateformat format="yyyy-MM-dd" :date="item.start"></uni-dateformat>
						<text class="u-p-l-10 u-p-r-10">至</text>
						<uni-dateformat format="yyyy-MM-dd" :date="item.end"></uni-dateformat>
					</view>
				</view>

				<view class="u-flex u-m-t-24" @tap="refNoUseDateOpen">
					<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
					<view class="u-m-l-24">添加日期</view>
				</view>
			</template>

		</view>


		<view class="bg-fff  u-m-t-32  default-box-padding border-r-12 ">
			<view class="u-flex u-row-between">
				<view>可选其他需求</view>
			</view>
			<view class="u-m-t-38 u-flex u-flex-wrap u-col-top otherRequirements">
				<view class="item u-flex u-row-center u-relative" v-for="(item,index) in form.otherRequirements"
					:key="index">
					<text>{{item}}</text>
					<view class="u-absolute close" @tap="delOtherRequirement(index)">
						<uni-icons type="clear" color="#999" size="16"></uni-icons>
					</view>
				</view>
				<view class="add-btn ">
					<template v-if="form.otherRequirementsIsEdit">
						<view class="u-flex h-100 u-p-l-20 u-p-r-20 u-col-center">
							<uni-easyinput @blur="otherRequirementsIsBlur" @confirm="otherRequirementsIsConfirm"
								:focus="form.otherRequirementsIsEdit" :inputBorder="false" padding-none
								placeholder=" "></uni-easyinput>
						</view>

					</template>
					<template v-else>
						<view class="u-flex h-100 u-col-center u-row-center" @tap="toggleOtherRequirementsIsEdit">
							<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
							<view class="u-m-l-24 color-main">添加</view>
						</view>

					</template>

				</view>
			</view>

		</view>


		<view class="bg-fff  u-m-t-32  default-box-padding border-r-12 ">
			<view class="u-flex u-row-between">
				<view>规则说明</view>
			</view>
			<view class="u-flex u-m-t-38 border-bottom u-p-b-24 u-col-center u-row-between" 
			@tap="rulesDescsEdit(item,index)"
			v-for="(item,index) in form.rulesDescs"
				:key="index">
				<view class="u-flex">
					<view class="u-flex" @tap.stop="delRulesDescs(index)" >
						<uni-icons type="minus-filled" size="20"
							:color="color.ColorRed"></uni-icons>
					</view>
					
					<view class="u-line-1 u-p-l-30" style="width:518rpx;">
						{{item}}
					</view>
				</view>
				<view class="u-flex">
					<uni-icons type="right" color="#999" size="16"></uni-icons>
				</view>
			</view>

			<view class="u-flex u-m-t-24" @tap="refRuleDescOpen">
				<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
				<view class="u-m-l-24">添加</view>
			</view>

		</view>
		
		
		<view class="bg-fff  u-m-t-32  default-box-padding border-r-12 ">
			<view class="u-flex u-row-between">
				<view>初始设置</view>
			</view>
			<view class="u-flex u-p-24 u-m-t-26 tips">
				<view class="u-flex">
					<uni-icons type="info-filled" color="#FF9F2E" size="20"></uni-icons>
				</view>
				<view class="u-m-l-16 u-flex-1">
					设置定金后，除用户到店核销或商家取消预约，其他
					情况定金不退。
				</view>
			</view>
			
			<view class="u-flex u-flex-wrap initSetups">
				<view  class="item" 
				v-for="(item,index) in form.initSetups"
				@tap="changeInitSetupsActive(index)"
				 :class="{active:form.initSetupsActive==index}"
				 :key="index">
					1-2人
				</view>
				<view class="u-flex item add-btn h-100 u-col-center u-row-center" @tap="toAddYuyueTime">
					<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
					<view class="u-m-l-24 color-main">添加</view>
				</view>
			</view>
			
			<view class="bg-gray default-box-padding u-m-t-32">
				<view class="u-flex ">
					<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">
					<view class="u-flex u-font-24 color-666 u-row-between u-m-b-16" v-for="(item,index) in 2" :key="index">
						<view class="u-flex-1">17:00-21:00</view>
						<view class="u-flex-1">100</view>
						<view class="u-flex-1">0.00</view>
					</view>
				</view>
			</view>
			
			<view class="u-flex u-m-t-24 u-row-right">
				<my-button shape="circle" width="140" height="56" type="cancel"><view class="color-999">删除</view></my-button>
				<view class="u-m-l-20">
					<my-button shape="circle" width="140" height="56" type="primary">编辑</my-button>
				</view>
			</view>
		
		</view>
		
		<view class="bg-fff  u-m-t-32  default-box-padding border-r-12 " @tap="toAddSpeYuyueTime">
			<view class="u-flex u-row-between" >
				<view>特殊日期设置</view>
			</view>
		
			<view class="u-flex u-m-t-24" @tap="refRuleDescOpen">
				<uni-icons type="plus-filled" size="20" :color="color.ColorMain"></uni-icons>
				<view class="u-m-l-24">添加</view>
			</view>
		
		</view>


		<view class="" style="height: 200rpx;">

		</view>
	</view>


	<view class="u-fix bottom">
		<my-button shape="circle" type="primary" @tap="save">保存</my-button>
	</view>

	<!-- 可预约日期范围选择 -->
	<my-pickerview :list="dateArea.list" :defaultIndex="dateArea.active" rangeKey="name" ref="refTime"
		:showTitle="false" @confirm="refTimeConfirm"></my-pickerview>


	<!-- 添加不可预约日期 -->
	<add-unpredictable-date @confirm="refNoUseDateConfirm" title="添加不可预约日期" ref="refNoUseDate"></add-unpredictable-date>
	<!-- 添加编辑规则说明 -->
	<add-rule-desc title="规则说明" @confirm="refRuleDescConfirm"  ref="refRuleDesc"></add-rule-desc>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import myButton from '@/components/my-components/my-button'
	import color from '@/commons/color.js'
	import mySwitch from '@/components/my-components/my-switch'
	import myPickerview from '@/components/my-components/my-pickerview'
	import addUnpredictableDate from './add-unpredictable-date'
	import addRuleDesc from './add-rule-desc'
	import go from '@/commons/utils/go.js'
	import {
		$weeks
	} from '@/commons/week.js'
	
	
	function toAddYuyueTime(){
		go.to('PAGES_RESERVE_SEAT_ADD_APPOINT_TIME')
	}
	function toAddSpeYuyueTime(){
		go.to('PAGES_RESERVE_SEAT_ADD_SPE_APPOINT_TIME')
	}
	
	function delUnpredictableDate(index) {
		uni.showModal({
			title: '提示',
			content: '确认删除此时间点',
			success: function(res) {
				if (res.confirm) {
					form.unpredictableDates.splice(index, 1)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	const refNoUseDate = ref(null)

	function refNoUseDateOpen() {
		refNoUseDate.value.open()
	}

	function refNoUseDateConfirm(e) {
		console.log(e);
		form.unpredictableDates.push(e)
	}

	const weeks = reactive({
		list: $weeks.map(v => {
			return {
				name: v,
				checked: false
			}
		})
	})

	function changeWeeksChecked(item) {
		item.checked = !item.checked
	}


	const unpredictableDate = {
		start: '',
		end: ''
	}
	const form = reactive({
		openYuyue: true,
		autoPass: false,
		openWeeks: false,
		openDisabledTimes: false,
		unpredictableDates: [],
		otherRequirements: [],
		rulesDescs:['1.支付定金订座成功后，不可取消；'],
		otherRequirementsIsEdit: false,
		initSetups:[1,2,3,4],
		initSetupsActive:0
	})
	function changeInitSetupsActive(index){
		form.initSetupsActive=index
	}
		
	
	//添加规则说明弹窗
	const refRuleDesc=ref(null)	
	function refRuleDescOpen(){
		refRuleDesc.value.open()
	}
	function refRuleDescConfirm(e){
		if(e.type==='add'){
			form.rulesDescs.push(e.data)
		}else{
			form.rulesDescs[e.index]=e.data
		}
	}
	function rulesDescsEdit(item,index){
		refRuleDesc.value.open({data:item,index})
	}
	//删除规则说明
	function delRulesDescs(index){
		form.rulesDescs.splice(index,1)
	}

	function delOtherRequirement(index) {
		form.otherRequirements.splice(index, 1)
	}

	function toggleOtherRequirementsIsEdit() {
		form.otherRequirementsIsEdit = !form.otherRequirementsIsEdit
	}

	function otherRequirementsIsBlur(e) {
		form.otherRequirementsIsEdit = false
		const val = e.detail.value.replace(/\s*/g, '')
		if (val !== '') {
			form.otherRequirements.push(val)
		}
	}

	function otherRequirementsIsConfirm(e) {
		console.log(e);
		form.otherRequirementsIsEdit = false
	}

	const dateAreaList = [{
			name: '7天内',
			value: 0
		},
		{
			name: '15天内',
			value: 1
		},
		{
			name: '30天内',
			value: 2
		},
		{
			name: '自定义',
			value: 3
		}
	]
	const dateArea = reactive({
		list: dateAreaList,
		active: [1],
		selItem: dateAreaList[1],
		days: 100
	})

	const refTime = ref(null)

	function refTimeOpen() {
		refTime.value.open()
	}

	function refTimeConfirm(e) {
		dateArea.selItem = e[0]
		console.log(dateArea.selItem);
	}

	function save() {

	}
</script>

<style lang="scss">
	.h-100 {
		height: 100%;
	}
	.initSetups{
		.item{
			padding: 8rpx 48rpx;
			border-radius: 8rpx;
			margin-right: 32rpx;
			margin-top: 24rpx;
			border: 1px solid transparent;
			background: #F7F7FA;
			color: #666;
		}
		.active{
			color: $my-main-color;
			background: #E6F0FF;
			border-color: $my-main-color;
		}
		.add-btn{
			background-color: #fff;
			border-color: $my-main-color;
			color: $my-main-color;
			padding: 8rpx 24rpx;
		}
	}
	.otherRequirements {
		.item {
			padding: 10rpx 60rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1px solid #E5E5E5;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			word-break: break-all;
		}

		.close {
			right: -8px;
			top: -8px;
		}

		.add-btn {
			width: 180rpx;
			height: 60rpx;
			overflow: hidden;
			box-sizing: border-box;
			// padding: 10rpx 60rpx;
			border: 1px solid $my-main-color;
			border-radius: 8rpx;
		}
	}

	.bottom {
		bottom: calc(env(safe-area-inset-bottom) + 32rpx);
		left: 110rpx;
		right: 110rpx;
	}

	.weeks {
		.item {
			padding: 10rpx 62rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1px solid #E5E5E5;
			color: #333;
			margin-right: 38rpx;
			margin-bottom: 24rpx;
			transition: all .2s ease;
		}

		.active {
			background-color: #E6F0FF;
			color: $my-main-color;
			border-color: $my-main-color;
		}

		.item:nth-of-type(3n) {
			margin-right: 0;
		}
	}
	
	.tips{
		background: #FCF2E6;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1px solid #FF9F2E;
		color: #FF9F2E;
		font-size: 24rpx;
	}
</style>