<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="title">
						<a-input v-model:value="createForm.title" placeholder="请输入标题" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="选择家政类型" name="type_id">
						<a-select v-model:value="createForm.type_id" @change="typeChange" placeholder="请选择家政类型">
							<a-select-option v-for="item in type_list" :key="item.id"
								:value="item.id">{{item.name}}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="性别要求" name="sex">
						<a-radio-group v-model:value="createForm.sex" button-style="solid">
							<a-radio-button value="男">男</a-radio-button>
							<a-radio-button value="女">女</a-radio-button>
							<a-radio-button value="不限">不限</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="学历">
						<a-xuanze :dict="2006" placeholder="请选择学历" @saveSelect="saveDegree"
							:select_content="createForm.degree"></a-xuanze>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="薪资范围" name="pay_range">
						<a-xuanze :dict="2005" placeholder="请选择月薪要求范围" @saveSelect="savePayRange"
							:select_content="createForm.pay_range"></a-xuanze>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="需求说明" name="requisition">
						<a-input v-model:value="createForm.requisition" placeholder="请输入需求说明,长度必须为10个字符" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="联系人" name="contact">
						<a-input v-model:value="createForm.contact" placeholder="请输入联系人,长度必须为5个字符" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="电话" name="phone">
						<a-input v-model:value="createForm.phone" placeholder="请输入电话" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="邮箱" name="email">
						<a-input v-model:value="createForm.email" placeholder="请输入邮箱" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="工作地址" name="address">
						<a-input v-model:value="createForm.address" placeholder="请输入工作地址" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="来源" name="origin">
						<a-radio-group v-model:value="createForm.origin" button-style="solid">
							<a-radio-button :value="1">自主添加</a-radio-button>
							<a-radio-button :value="2">后台添加</a-radio-button>
						</a-radio-group>
					</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 { PostHousekeepingAdd, PostHousekeepingUpdate, GetHousekeepingtypeList } 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) {
			console.log(newVal)
			createForm.value = {
				id: newVal.id,
				title: newVal.title,
				type_id: newVal.type_id,
				sex: newVal.sex,
				degree: newVal.degree,
				pay_range: newVal.pay_range,
				requisition: newVal.requisition,
				contact: newVal.contact,
				phone: newVal.phone,
				email: newVal.email,
				address: newVal.address,
				origin: newVal.origin,
			}
		}
	})



	let createForm : companyListType.addrFormType = ref({
		title: "",
		type_id: '请选择家政类型',
		sex: "不限",
		degree: 0,
		pay_range: 0,
		requisition: "",
		contact: "",
		phone: "",
		email: "",
		address: "",
		origin: 0
	})


	onMounted(() => {
		getHousekeepingtypeList()
	})

	// 家政类型
	let type_list = ref([])
	const getHousekeepingtypeList = (val) => {
		GetHousekeepingtypeList({ keyword: val }).then(res => {
			type_list.value = res.data.housekeepingtypes;
		})
	}
	const typeChange = (val) => {
		createForm.value.type_id = val;
	}

	// 学历
	const saveDegree = (data) => {
		createForm.value.degree = data.val.key;
	}
	// 薪资范围
	const savePayRange = (data) => {
		createForm.value.pay_range = data.val.key;
	}


	const sumbitForm = () => {
		console.log(createForm.value)
		if (!createForm.value.id) {
			PostHousekeepingAdd(createForm.value).then(res => {
				message.success('新增家政需求成功');
				hideModal();
				resetForm();
				emit('successAdd');
			}).catch(err => {
			})
		} else {
			PostHousekeepingUpdate(createForm.value).then(res => {
				message.success('修改家政需求成功');
				hideModal();
				resetForm();
				emit('successAdd');
			}).catch(err => {
			})
		}

	}

	const resetForm = () => {
		createForm.value = {
			title: "",
			type_id: '请选择家政类型',
			sex: "不限",
			degree: 0,
			pay_range: 0,
			requisition: "",
			contact: "",
			phone: "",
			email: "",
			address: "",
			origin: 0
		}
	}
	const cancelModal = () => {
		emit('closeAdd');
		resetForm();
		hideModal();
	}


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

<style>
</style>