<template>
	<my-model ref="model" :title="title" :borderRadius="16"  @confirm="submit" :confirmClickClose="false">
		<template #desc>
			<view>
				<uni-forms ref="refform" label-position="left" :model="form" label-align="left" :label-width="400"
					:rules="rules">
					<view class="form">
						<view class="border-bottom u-p-b-10 u-p-t-10">
							<uni-forms-item required label="" name="areaId">
								<template #label>
									<view class="u-text-left ">
										<text class="color-red">*</text>
										<text class="color-333 u-font-28">选择区域</text>
									</view>
								</template>
								<picker @change="areaChange" 
								:value="area.selIndex"
								range-key="name" :range="area.list">
									<view class="  u-flex u-row-between   u-relative  ">
										<view class="zhezhao u-absolute  position-all" style="z-index: 1;"></view>
										<view class="u-flex-1">
											<uni-easyinput :inputBorder="false" paddingNone v-model="area.sel.name"
												placeholder="请选择区域"></uni-easyinput>

										</view>
										<uni-icons type="right" size="18" color="#999"></uni-icons>
									</view>

								</picker>

							</uni-forms-item>
						</view>
						<view class="border-bottom u-p-b-10 u-p-t-10">
							<uni-forms-item required label="" name="status">
								<template #label>
									<view class="u-text-left ">
										<!-- <text class="color-red">*</text> -->
										<text class="color-333 u-font-28">桌台状态</text>
									</view>
								</template>
								<picker @change="statusChange" range-key="label" 
								:value="status.selIndex"
								:range="status.list">
									<view class="  u-flex u-row-between   u-relative  ">
										<view class="zhezhao u-absolute  position-all" style="z-index: 1;"></view>
										<view class="u-flex-1">
											<uni-easyinput :inputBorder="false" paddingNone v-model="status.sel.label"
												placeholder="请选择桌台状态"></uni-easyinput>
										</view>
										<uni-icons type="right" size="18" color="#999"></uni-icons>
									</view>

								</picker>

							</uni-forms-item>
						</view>
						<view class="border-bottom u-p-b-10">
							<uni-forms-item required label="" name="name">
								<template #label>
									<view class="u-text-left">
										<text class="color-333 u-font-28">桌台名称</text>
										<!-- <text class="color-red">*</text> -->
									</view>
								</template>
								<view class="u-flex-1">
									<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
										placeholder="请输入桌台名称"></uni-easyinput>
								</view>
							</uni-forms-item>
						</view>

						<view class="border-bottom u-p-b-10">
							<uni-forms-item required label="" name="maxCapacity">
								<template #label>
									<view class="u-text-left">
										<text class="color-333 u-font-28">客座数</text>
										<!-- <text class="color-red">*</text> -->
									</view>
								</template>
								<view class="u-flex-1">
									<uni-number-box v-model="form.maxCapacity"></uni-number-box>
								</view>
							</uni-forms-item>
						</view>
						<view class="border-bottom u-p-b-10">
							<uni-forms-item required label="" name="isPredate">
								<template #label>
									<view class="u-text-left">
										<text class="color-333 u-font-28">网络预定开关</text>
										<!-- <text class="color-red">*</text> -->
									</view>
								</template>
								<view class="u-flex-1 u-flex u-row-right">
									<my-switch v-model="form.isPredate"></my-switch>
								</view>
							</uni-forms-item>
						</view>
						<view class="border-bottom u-p-b-10">
							<uni-forms-item required label="" name="types">
								<template #label>
									<view class="u-text-left">
										<text class="color-333 u-font-28">类型</text>
										<!-- <text class="color-red">*</text> -->
									</view>
								</template>
								<view class="u-flex-1">
									<my-tabs @change="tabsChange" :list="tabs.list" v-model="tabs.sel"></my-tabs>
								</view>
							</uni-forms-item>
						</view>
						<view class="border-bottom u-p-b-10">
							<uni-forms-item required label="" name="types">
								<template #label>
									<view class="u-text-left">
										<text class="color-333 u-font-28">清台管理</text>
										<!-- <text class="color-red">*</text> -->
									</view>
								</template>
								<view class="u-flex-1">
									<my-tabs @change="autoClearsChange" :list="autoClears.list" v-model="form.autoClear"></my-tabs>
								</view>
							</uni-forms-item>
						</view>
						<template v-if="tabs.sel==1">
							<view class=" u-p-b-10">
								<uni-forms-item required label="" >
									<template #label>
										<view class="u-text-left">
											<text class="color-333 u-font-28">每小时收费</text>
											<!-- <text class="color-red">*</text> -->
										</view>
									</template>
									<view class="u-flex-1">
										<uni-easyinput :inputBorder="false" paddingNone v-model="form.perhour" type="number"
											placeholder="请输入每小时收费"></uni-easyinput>
									</view>
								</uni-forms-item>
							</view>
						</template>
						<template v-else>
							<view class=" u-p-b-10">
								<uni-forms-item required label="" >
									<template #label>
										<view class="u-text-left">
											<text class="color-333 u-font-28">最低消费</text>
											<!-- <text class="color-red">*</text> -->
										</view>
									</template>
									<view class="u-flex-1">
										<uni-easyinput :inputBorder="false" paddingNone v-model="form.amount" type="number"
											placeholder="请输入最低消费"></uni-easyinput>
									</view>
								</uni-forms-item>
							</view>
						</template>
						
					</view>
				</uni-forms>
			</view>
		</template>

	</my-model>
</template>

<script setup>
	import {
		$tableArea,$table
	} from '@/http/yskApi/table.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		$status
	} from '@/commons/table-status.js'
	import {objToArrary} from '@/commons/utils/returrn-data.js'
	import infoBox from '@/commons/utils/infoBox.js'
	const emits= defineEmits(['update'])
	const tabs=reactive({
		list:['低消','计时'],
		sel:1
	})
	//清台管理
	const autoClears=reactive({
		list:['手动清台','自动清台']
	})
	function autoClearsChange(i){
		form.autoClearsChange=i
	}
	const status = reactive({
		list:objToArrary($status),
		sel: '',
		selIndex:0
	})
	console.log(status.list);
	const props = defineProps({
		title: {
			type: String,
			default: '编辑桌台'
		}
	})
	const model = ref(null)
	const area = reactive({
		list: [],
		sel: '',
		selIndex:0
	})
	async function getArea() {
		const {
			content
		} = await $tableArea.get({
			page: 0,
			size: 300
		})
		area.list = content.map(v => {
			return {
				...v,
				name: v.name,
				value: v.id,
				label: v.name
			}
		})
		console.log(area.list);
		
	}
	
	function tabsChange(e){
		if(e){
			form.type=2
		}else{
			form.type=0
		}
	}
	function statusChange(e){
		status.sel = status.list[e.detail.value]
		form.status = status.sel.key
	}
	function areaChange(e) {
		console.log(e);
		area.sel = area.list[e.detail.value]
		form.areaId = area.sel.id
	}
	onMounted(()=>{
		getArea()
	})
	function open(tableData) {
		Object.assign(form,tableData)
		getArea()
		model.value.open()
		if(tableData){//编辑
			const {areaId,type}=tableData
			area.sel=area.list.find(v=>v.id==areaId)
			area.selIndex=area.list.findIndex(v=>v.id==areaId)
			status.sel=status.list.find(v=>v.key==tableData.status)
			status.selIndex=status.list.findIndex(v=>v.key==tableData.status)
			tabs.sel=form.type==2?1:0
		}
	}

	function close() {
		model.value.close()
	}
	defineExpose({
		open,
		close
	})


	function unitChange(e) {
		units.current = e.detail.value
		form.unit = units.list[e.detail.value].name
	}

	const refform = ref(null)
	const form = reactive({
		id: '',
		name: '',
		areaId: '',
		status:'',
		maxCapacity: 0,
		isPredate: 1,
		type: 2,
		perhour: 0,
		amount: 0
	})
	// 校验规则
	const rules = {
		areaId: {
			rules: [{
				required: true,
				errorMessage: '请选择区域'
			}]
		},
		name: {
			rules: [{
				required: true,
				errorMessage: '请输入桌台名称'
			}]
		}
	}

	function submit() {
		refform.value.validate(res => {
			console.log(res)
			console.log(form);
			$table.update({...form,qrcode:form.tableId}).then(Response=>{
				infoBox.showSuccessToast('更新成功')
				close()
				emits('update')
			})
		}).catch(err => {
			console.log(err);
		})
	}
	const page = reactive({
		type: 'add'
	})

	function cancel() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.border-bottom {
		padding: 10rpx 0;
	}

	.form {
		margin-top: 32rpx;
		background-color: #fff;
		padding: 32rpx 24rpx 32rpx 24rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;

		.u-text-left {
			min-width: 160rpx;
		}

		// background-color: transparent;
	}

	::v-deep.uni-forms-item {
		min-height: 80rpx;
	}

	::v-deep.uni-forms-item .uni-forms-item__label {
		font-size: 28rpx !important;
	}

	::v-deep.uni-easyinput__placeholder-class {
		font-size: 28rpx;
	}

	::v-deep.uni-forms-item__error {
		display: none;
	}
</style>