<template>
	<a-modal v-model:visible="openAddModel" :title="title" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="50%">
		<a-form :model="createForm" layout="vertical">
			<a-row gutter="20">
				<a-col span="24">
					<a-form-item required label="选择企业" name="company_id">
						<search-select placeholder="请搜索选择企业" :list="company_list" :select_value="addOtherForm.full_name"
							@searchData="companySearch" @getSelectValue="getCompanyValue" :select_disabled="selectDisabled"></search-select>
					</a-form-item>
				</a-col>
				<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="contact">
						<a-input v-model:value="createForm.contact" placeholder="请输入联系人" />
					</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="mobile">
						<a-input v-model:value="createForm.mobile" 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-row>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { PostCompanyDepartmentAdd, PostCompanyDepartmentEdit, getCompanyList, GetCompanyDepartmentInfo } from '@/apis/models';
	import { dataForm, otherDataForm, reset } from '@/views/company/department/add/data.js';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal, message } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['edit_record']);
	let title = ref<String>('新增部门');
	let selectDisabled = ref<Boolean>(false)

	let createForm = ref<CompanyDepartmentType.addFormType>(dataForm)
	let addOtherForm = ref<CompanyDepartmentType.addOtherFormType>(otherDataForm)


	onMounted(() => {
		companySearch({ page: 1, pagesize: 10 })
	})


	// 选择企业
	let company_list = ref<Object[]>([])
	const companySearch = (val : Object) => {
		getCompanyList(val).then((res : object) => {
			const data = res.data.list.map((item : object) => ({
				label: item.full_name,
				value: item.id,
			}));
			company_list.value = data;
		})
	}
	const getCompanyValue = (val : Object) => {
		createForm.value.company_id = val.key;
	}


	const sumbitForm = () => {
		if (createForm.value.name && createForm.value.company_id && createForm.value.contact && createForm.value.phone && createForm.value.mobile && createForm.value.email) {
			if (!createForm.value.id) {
				PostCompanyDepartmentAdd(createForm.value).then(res => {
					message.success('创建部门成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			} else {
				PostCompanyDepartmentEdit(createForm.value).then(res => {
					message.success('修改企业信息成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			}

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

	}

	const resetForm = () => {
		addOtherForm.value = reset().otherDataForm;
		createForm.value = reset().dataForm;
	}
	const cancelModal = () => {
		emit('closeAdd');
		resetForm();
		hideModal();
	}


	openAddModel = computed(() => {
		return store.state.openAddModel;
	})

	watch(() => props.edit_record, (newVal) => {
		if (newVal) {
			title.value = '编辑部门';
			selectDisabled.value = true;
			GetCompanyDepartmentInfo({id: newVal.id}).then(res => {
				addOtherForm.value = {
					full_name: res.data.company_name
				}
				createForm.value = {
					id: res.data.id,
					name: res.data.name,
					company_id: res.data.company_id,
					contact: res.data.contact,
					phone: res.data.phone,
					mobile: res.data.mobile,
					email: res.data.email,
				}
			})
		} else {
			title.value = '新增部门';
			selectDisabled.value = false;
		}
	})
</script>

<style>

</style>