<template>
	<el-dialog :title="form.id ? '编辑台桌' : '添加台桌'" v-model="dialogVisible" @open="tbShopAreaGet" @close="reset">
		<el-form ref="refForm" :model="form" :rules="rules" label-width="120px" label-position="left">
			<el-form-item label="选择区域" prop="areaId">
				<el-select v-model="form.areaId" placeholder="请选择区域">
					<el-option :label="item.name" :value="item.id" v-for="item in areaList" :key="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="台桌状态" prop="status" v-if="form.id">
				<el-select v-model="form.status" placeholder="请选择台桌状态">
					<el-option :label="item.label" :value="item.value" v-for="item in statusList" :key="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="台桌标识" prop="sign" v-if="!form.id">
				<div class="u-flex">
					<div class="u-flex" style="width: 57px">
						<el-input v-model="form.sign" placeholder="A"></el-input>
					</div>

					<div class="u-flex u-m-l-30">
						<div class="u-flex">
							<div class="u-m-r-4">起始</div>
							<el-input v-model="form.start" style="width: 57px" placeholder="请输入起始值"></el-input>
						</div>

						<div style="
								background-color: #d9d9d9;
								height: 1px;
								width: 32px;
								border-radius: 1px;
							" class="u-m-l-16 u-m-r-16"></div>
						<div class="u-flex">
							<span class="u-m-r-4">结束</span>
							<el-input v-model="form.end" style="width: 57px" placeholder="请输入结束值"></el-input>
						</div>
					</div>
				</div>
			</el-form-item>
			<el-form-item label="台桌名称" prop="name" v-if="form.id">
				<el-input v-model="form.name" placeholder="请输入台桌名称"></el-input>
			</el-form-item>
			<el-form-item label="客座数">
				<el-input-number v-model="form.maxCapacity" :min="0" controls-position="right"></el-input-number>
			</el-form-item>
			<!-- <el-form-item label="清台管理">
				<el-radio-group v-model="form.autoClear">
					<el-radio-button :value="0">手动清台</el-radio-button>
					<el-radio-button :value="1">自动清台</el-radio-button>
				</el-radio-group>
			</el-form-item> -->
			<el-form-item v-if="form.id" label="网络预定开关">
				<el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
			</el-form-item>
			<el-form-item v-if="form.id" label="网络预定台桌支付金额">
				<el-input-number v-model="form.predateAmount" :min="0" controls-position="right"></el-input-number>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" :loading="loading" @click="onSubmitHandle">
					确 定
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import shopAreaApi from "@/api/account/shopArea";
import tableApi from "@/api/account/table";
import status from "../status.js";
let dialogVisible = ref(false);
let resetForm = {};
let loading = ref(false);

let statusList = Object.entries(status).map(([key, value]) => {
	// key = 原对象的键（如 'unbound'），value = 原对象的键值（如 {label: '未绑定', type: '#909090'}）
	return {
		value: key, // 原键名作为新的 value
		label: value.label, // 继承原 label
		type: value.type, // 继承原 type
	};
});

const form = reactive({
	areaId: "",
	sign: "",
	start: 1,
	end: 10,
	maxCapacity: 0,
	autoClear: 1,
	isPredate: "",
	predateAmount: "",
});
const rules = {
	areaId: [
		{
			required: true,
			message: "请选择区域",
			trigger: ["blur", "change"],
		},
	],
	sign: [
		{
			required: true,
			message: "请输入台桌标识",
			trigger: ["blur", "change"],
		},
	],
};
let areaList = ref([]);
onMounted(() => {
	resetForm = { ...form };
});

//解决selectc值改变后未验证问题
const refForm = ref(null);
const emits = defineEmits(["success"]);
function onSubmitHandle() {
	refForm.value.validate(async (valid) => {
		if (valid) {
			loading.value = true;
			try {
				let res = form.id ? await tableApi.edit(form) : await tableApi.add(form);
				console.log(res);
				emits("success", res);
				ElNotification({
					title: "成功",
					message: `${form.id ? "编辑" : "添加"}成功`,
					type: "success",
				});
				loading.value = false;
				close();
			} catch (error) {
				loading.value = false;
				console.log(error);
			}
		}
	});
}
function show(obj) {
	dialogVisible.value = true;
	if (obj && obj.id) {
		Object.assign(form, obj);
	}
}
function close() {
	dialogVisible.value = false;
}
function reset() {
	delete form.id;
	Object.assign(form, resetForm);
	console.log(form);
}
// 获取区域
async function tbShopAreaGet() {
	try {
		const data = await shopAreaApi.getList({});
		areaList.value = data.records;
	} catch (error) {
		console.log(error);
	}
}

defineExpose({
	show,
	close,
});
</script>
