<template>
	<a-modal v-model:visible="openAddModel" title="新增家政类型" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="50%" style="top: 20px">
		<a-form :model="createForm" :label-col="{span: 4}" labelAlign="right">
			<a-row gutter="20">
				<a-col span="24">
					<a-form-item required label="职位名称" name="name">
						<a-input v-model:value="createForm.name" placeholder="请输入职位名称" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="职位代称" name="value">
						<a-input v-model:value="createForm.value" placeholder="请输入职位代称" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="排序" name="sort_number">
						<a-input-number :min="0" type="number" v-model:value="createForm.sort_number"
							placeholder="排序" style="width: 100%;" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { PostHousekeepingtypeAdd, PostHousekeepingtypeUpdate } from '@/apis/models';
	import { message } from 'ant-design-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal } = useCommon();
	let props = defineProps(['edit_record']);
	const emit = defineEmits();
	
	openAddModel = computed(() => {
		// return true;
		return store.state.openAddModel;
	})

	watch(() => props.edit_record, (newVal) => {
		if (newVal) {
			createForm.value = {
				id: newVal.id,
				"name": newVal.name,
				"value": newVal.value,
				"sort_number": newVal.sort_number,
			}
		}
	})



	let createForm : companyListType.addrFormType = ref({
		  name: "",
		  value: "",
		  sort_number: 1
	})

	
	onMounted(async () => {
		

	})


	const sumbitForm = () => {
		if (createForm.value.name && createForm.value.value) {
			if (!createForm.value.id) {
				PostHousekeepingtypeAdd(createForm.value).then(res => {
					message.success('新增家政类型成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			} else {
				PostHousekeepingtypeUpdate(createForm.value).then(res => {
					message.success('修改家政类型成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			}

		} else {
			message.warning('请补充完整信息');
		}
	}

	const resetForm = () => {
		
		createForm.value = {
			name: "",
			value: "",
			sort_number: 1
		}
	}
	const cancelModal = () => {
		emit('closeAdd');
		resetForm();
		hideModal();
	}


	// const hideModal = () => {
	// 	resetForm();
	// 	emit('closeAdd', { show: false });
	// }
</script>

<style>
</style>