<template>
	<xn-form-container
		:title="formData.id ? '编辑员工' : '增加员工'"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		:body-style="{ 'padding-top': '0px' }"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-divider orientation="left">个人基本信息</a-divider>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="员工工号：" name="nickName">
						<a-input v-model:value="formData.nickName" placeholder="请输入员工工号" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="员工姓名：" name="userName">
						<a-input v-model:value="formData.userName" placeholder="请输入员工姓名" allow-clear />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="性别：" name="sex">
						<a-select v-model:value="formData.sex">
							<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="12">
					<a-form-item label="身份证号：" name="idCard">
						<a-input v-model:value="formData.idCard" placeholder="请输入身份证号" maxlength="18" allow-clear />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="个人电话：" name="phone">
						<a-input v-model:value="formData.phone" placeholder="请输入个人电话"  allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="紧急联系人电话：" name="publicPhone">
						<a-input v-model:value="formData.publicPhone" placeholder="请输入紧急联系人电话"  allow-clear />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="所在区域：" name="province">
						<a-cascader
							placeholder="请输入所在区域"
							v-model:value="formData.provinceList"
							@change="areaChange"
							:options="area"
							:fieldNames="{ label: 'name', value: 'name', children: 'children' }"></a-cascader>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="详细地址：" name="address">
						<a-input v-model:value="formData.address" placeholder="请输入详细地址"  allow-clear />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="员工照片" name="imgUrl">
						<x-img-upload @onImgChange="onImgChange"></x-img-upload>
					</a-form-item>
				</a-col>
			</a-row>
			<a-divider orientation="left">工作信息</a-divider>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="入职时间" name="entryDate">
						<a-date-picker v-model:value="formData.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="工作状态">
						<a-select v-model:value="formData.workStatus">
							<a-select-option :value="0">在职</a-select-option>
							<a-select-option :value="1">离职</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="工作岗位" name="job">
						<a-input v-model:value="formData.job" placeholder="请输入工作岗位" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="所属部门" name="department">
						<a-tree-select
							v-model:value="formData.department"
							style="width: 100%"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择所属部门"
							allow-clear
							tree-default-expand-all
							:tree-data="treeData"
							:field-names="{
								children: 'children',
								label: 'name',
								value: 'id'
							}"
							selectable="false"
							tree-line
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="12">
					<a-form-item label="工作地点" name="workLocation">
						<a-input v-model:value="formData.workLocation" placeholder="请输入工作地点" allow-clear />
					</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="staffForm">
	import bizStaffApi from "@/api/biz/bizStaffApi";
	import bizDepartmentApi from "@/api/biz/bizDepartmentApi";
	import XImgUpload from "@/components/XnUpload/XImgUpload.vue"
	import { required, rules } from '@/utils/formRules'
	import { cloneDeep } from "lodash-es";
	import area from '@/assets/json/area.json'
	import tool from '@/utils/tool'
	// 默认是关闭状态
	const visible = ref(false)
	const formRef = ref()
	const emit = defineEmits({ successful: null })
	const submitLoading = ref(false)
	const formData = ref({})
	const formRules = ref({
		nickName: [required('请输入员工工号')],
		userName: [required('请输入员工姓名')],
		sex: [required('请选择性别')],
		idCard: [required('请输入身份证号'), rules.idCard],
		phone: [required('请输入个人电话'), rules.phone],
		publicPhone: [required('请输入紧急联系人电话'), rules.phone],
		province: [required('请选择所属区域')],
		address: [required('请输入详细地址')],
		imgUrl: [required('请上传员工照片')],
		entryDate: [required('请选择入职时间')],
		workStatus: [required('请选择工作状态')],
		job: [required('请输入工作岗位')],
		department: [required('请选择所属部门')],
		workLocation: [required('请输入工作地点')]
	})

	const treeData = ref([])


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

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

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
			formData.value.provinceList = recordData.province.split('-')
		}
		bizDepartmentApi.getDepartmentTree().then((res) => {
			treeData.value = res
		})
	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {}
		visible.value = false
	}

	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			if (formData.value.id) {
				const fileData = new FormData()
				fileData.append('id', formData.value.id)
				fileData.append('nickName', formData.value.nickName)
				fileData.append('userName', formData.value.userName)
				fileData.append('sex', formData.value.sex)
				fileData.append('idCard', formData.value.idCard)
				fileData.append('phone', formData.value.phone)
				fileData.append('publicPhone', formData.value.publicPhone)
				fileData.append('province', formData.value.province)
				fileData.append('address', formData.value.address)
				fileData.append('entryDate', formData.value.entryDate)
				fileData.append('workStatus', formData.value.workStatus)
				fileData.append('job', formData.value.job)
				fileData.append('department', formData.value.department)
				fileData.append('workLocation', formData.value.workLocation)
				fileData.append('imgUrl', formData.value.imgUrl)
				fileData.append('orgId', tool.data.get('SNOWY_ORG_ID'))
				bizStaffApi
					.editStaff(fileData)
					.then(() => {
						onClose()
						emit('successful')
					})
					.finally(() => {
						submitLoading.value = false
					})
			} else {
				const fileData = new FormData()
				fileData.append('nickName', formData.value.nickName)
				fileData.append('userName', formData.value.userName)
				fileData.append('sex', formData.value.sex)
				fileData.append('idCard', formData.value.idCard)
				fileData.append('phone', formData.value.phone)
				fileData.append('publicPhone', formData.value.publicPhone)
				fileData.append('province', formData.value.province)
				fileData.append('address', formData.value.address)
				fileData.append('entryDate', formData.value.entryDate)
				fileData.append('workStatus', formData.value.workStatus)
				fileData.append('job', formData.value.job)
				fileData.append('department', formData.value.department)
				fileData.append('workLocation', formData.value.workLocation)
				fileData.append('imgUrl', formData.value.imgUrl)
				fileData.append('orgId', tool.data.get('SNOWY_ORG_ID'))
				bizStaffApi
					.addStaff(fileData)
					.then(() => {
						onClose()
						emit('successful')
					})
					.finally(() => {
						submitLoading.value = false
					})
			}
		})
	}

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

<style scoped>
.childAddButton {
	margin-bottom: 10px;
}
.form-row {
	background-color: var(--item-hover-bg);
	margin-left: 0px !important;
}
.form-row-con {
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 15px;
}
.dashedButton {
	margin-top: 10px;
	width: 100%;
}
.form-div {
	padding-top: 10px;
}
</style>
