<template>
	<xn-form-container
		:title="formData.id ? '编辑员工' : '新增员工'"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		:body-style="{ 'padding-top': '20px' }"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="员工工号" name="userId">
						<a-input v-model:value="formData.userId" placeholder="输入员工工号"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="员工姓名" name="userName">
						<a-input v-model:value="formData.userName" placeholder="请输入员工姓名"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="性别" name="gender">
						<a-select v-model:value="formData.gender" placeholder="请选择性别">
							<a-select-option :value="0">男性</a-select-option>
							<a-select-option :value="1">女性</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="身份证号码" name="cardNum">
						<a-input v-model:value="formData.cardNum" placeholder="请输入身份证号码"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="出生日期" name="birthday">
						<a-date-picker style="width: 100%;" v-model:value="formData.birthday" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</a-form-item>
				</a-col>
				<a-col :span="8" v-if="!formData.id">
					<a-form-item label="上传图片" name="imgUrl">
						<x-img-upload @onImgChange="onImgChange"></x-img-upload>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="个人电话" name="userPhone">
						<a-input v-model:value="formData.userPhone" placeholder="请输入个人电话"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="联系人电话" name="publicPhone">
						<a-input v-model:value="formData.publicPhone" placeholder="请输入联系人电话"></a-input>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="省市区" name="sheng">
						<a-cascader
							placeholder="请输入所在区域"
							v-model:value="formData.shengList"
							@change="areaChange"
							:options="area"
							:fieldNames="{ label: 'name', value: 'name', children: 'children' }"></a-cascader>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="详细地址" name="xxdz">
						<a-input v-model:value="formData.xxdz" placeholder="请输入详细地址"></a-input>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="入职时间" name="entryTime">
						<a-date-picker style="width: 100%;" v-model:value="formData.entryTime" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="工作岗位" name="job">
						<a-select v-model:value="formData.job" mode="multiple" placeholder="请选择工作岗位">
							<a-select-option v-for="item in jobList" :value="item.id" :key="item.id">{{item.label}}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="工作地点" name="workLocationType">
						<a-select v-model:value="formData.workLocationType" placeholder="请选择工作地点" @change="locationChange">
							<a-select-option v-for="item in locationList" :key="item.locationName" :value="item.locationType">{{item.locationName}}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="washPersonForm">
	import { required, rules } from "@/utils/formRules";
	import XImgUpload from "@/components/XnUpload/XImgUpload.vue";
	import washEntranceApi from "@/api/wash/washEntranceApi";
	import area from '@/assets/json/area.json'
	import tool from "@/utils/tool";
	import { cloneDeep } from "lodash-es";
	const visible = ref(false)
	const formRef = ref()
	const emit = defineEmits({ successful: null })
	const submitLoading = ref(false)
	const jobList = ref([
		{
			id: 1,
			label: '场长'
		},
		{
			id: 2,
			label: '紧急入场管理员'
		},
		{
			id: 3,
			label: '安全负责人'
		},
		{
			id: 4,
			label: 'PCR检测人员'
		},
		{
			id: 5,
			label: '洗消站点工作人员'
		}
	])
	const locationList = ref([])
	const formData = ref({})
	const formRules = ref({
		userId: [required('请输入员工工号')],
		userName: [required('请输入员工姓名')],
		gender: [required('请选择性别')],
		cardNum: [required('请输入身份证号码'), rules.idCard],
		birthday: [required('请输入出生日期')],
		imgUrl: [required('请选择上传图片')],
		userPhone: [required('请输入个人电话')],
		publicPhone : [required('请输入联系人电话')],
		sheng: [required('请选择省市区')],
		xxdz: [required('请输入详细地址')],
		entryTime: [required('请选择入职时间')],
		department: [required('请选择部门')],
		job: [required('请选择工作岗位')],
		jobType: [required('请选择工作性质')],
		workLocationType: [required('请选择工作地点')]
	})

	const areaChange = (value) => {
		formData.value.sheng = value.join('-')
	}

	const onImgChange = (item) => {
		formData.value.imgUrl = item[0]
	}

	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {}
		visible.value = false
		submitLoading.value = false
	}

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
			formData.value.job = record.job.split(',').map(Number)
		}
		initLocation()
	}

	const initLocation = () => {
		washEntranceApi.getPersonLocation().then(res => {
			locationList.value = res
		})
	}

	const locationChange = (val, options) => {
		formData.value.workLocation = options.key
	}

	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			if(formData.value.id) {
				let params = {
					id: formData.value.id,
					userId: formData.value.userId,
					userName: formData.value.userName,
					gender: formData.value.gender,
					cardNum: formData.value.cardNum,
					birthday: formData.value.birthday,
					userPhone: formData.value.userPhone,
					sheng: formData.value.sheng,
					xxdz: formData.value.xxdz,
					entryTime: formData.value.entryTime,
					job: formData.value.job.join(','),
					workLocation: formData.value.workLocation
				}
				washEntranceApi.editPersonPage(params).then(() => {
					onClose()
					emit('successful')
				}).finally(() => {
					submitLoading.value = false
				})
			} else {
				let form = new FormData()
				form.append('userId', formData.value.userId)
				form.append('userName', formData.value.userName)
				form.append('gender', formData.value.gender)
				form.append('cardNum', formData.value.cardNum)
				form.append('birthday', formData.value.birthday)
				form.append('imgUrl', formData.value.imgUrl)
				form.append('userPhone', formData.value.userPhone)
				form.append('publicPhone', formData.value.publicPhone)
				form.append('sheng', formData.value.sheng)
				form.append('xxdz', formData.value.xxdz)
				form.append('entryTime', formData.value.entryTime)
				form.append('job', formData.value.job.join(','))
				form.append('workLocation', formData.value.workLocation)
				form.append('workLocationType', formData.value.workLocationType)
				form.append('farmId', tool.data.get('SNOWY_ORG_ID'))
				washEntranceApi.addPersonPage(form).then(() => {
					onClose()
					emit('successful')
				}).finally(() => {
					submitLoading.value = false
				})
			}
		})
	}

	// 抛出函数
	defineExpose({
		onOpen
	})
</script>

<style scoped>

</style>
