<template>
	<el-dialog v-model="showDialog" :title="formData.id ? t('updatePersonnel') : t('addPersonnel')" width="50%"
		class="diy-dialog-wrap" :destroy-on-close="true">

		<el-tabs v-model="activeTab" class="tab-pane-half">
			<!-- Tab 1: 基本信息 -->
			<el-tab-pane label="基本信息" name="base">

				<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form">

					<el-form-item :label="t('name')" prop="name">
						<el-input v-model="formData.name" clearable :placeholder="t('namePlaceholder')"
							class="input-width" />
					</el-form-item>

					<el-form-item :label="t('gender')">
						<el-radio-group v-model="formData.gender" :placeholder="t('genderPlaceholder')">
							<el-radio v-for="(item, index) in genderList" :key="index" :label="item.value">
								{{ item.name }}
							</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item :label="t('phone')" prop="phone">
						<el-input v-model="formData.phone" clearable :placeholder="t('phonePlaceholder')"
							class="input-width" />
					</el-form-item>

					<el-form-item :label="t('address')">
						<el-input v-model="formData.address" clearable :placeholder="t('addressPlaceholder')"
							class="input-width" />
					</el-form-item>

					<el-form-item :label="t('nativePlace')">
						<el-input v-model="formData.native_place" clearable :placeholder="t('nativePlacePlaceholder')"
							class="input-width" />
					</el-form-item>

					<el-form-item label="头像">
						<upload-image v-model="formData.head_img" />
					</el-form-item>

					<el-form-item :label="t('education')">
						<el-select class="input-width" v-model="formData.education" clearable
							:placeholder="t('educationPlaceholder')">
							<el-option label="请选择" value=""></el-option>
							<el-option v-for="(item, index) in educationList" :key="index" :label="item.name"
								:value="item.value" />
						</el-select>
					</el-form-item>

					<el-form-item :label="t('profile')">
						<el-input v-model="formData.profile" type="textarea" rows="4" clearable
							:placeholder="t('profilePlaceholder')" class="input-width" />
					</el-form-item>
					<el-form-item :label="t('emergencyContactPhone')">
						<el-input v-model="formData.emergency_contact_phone" clearable
							:placeholder="t('emergencyContactPhonePlaceholder')" class="input-width" />
					</el-form-item>

					<el-form-item :label="t('idCardFront')">
						<upload-image v-model="formData.id_card_front" />
					</el-form-item>

					<el-form-item :label="t('idCardBack')">
						<upload-image v-model="formData.id_card_back" />
					</el-form-item>

					<el-form-item :label="t('status')" prop="status">
						<el-select class="input-width" v-model="formData.status" clearable
							:placeholder="t('statusPlaceholder')">
							<el-option label="请选择" value=""></el-option>
							<el-option v-for="(item, index) in statusList" :key="index" :label="item.name"
								:value="item.value" />
						</el-select>
					</el-form-item>

					<el-form-item :label="t('isSysUser')" prop="is_sys_user">
						<el-radio-group v-model="formData.is_sys_user" :placeholder="t('isSysUserPlaceholder')">
							<el-radio v-for="(item, index) in is_sys_userList" :key="index" :label="item.value">
								{{ item.name }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			
			</el-tab-pane>
			
			<el-tab-pane label="详情信息" name="info">
				<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form">
				
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="花名" prop="info.name">
								<el-input v-model="formData.info.name" placeholder="请填写花名" class="input-width" />
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="门店" prop="info.store">
								<el-input v-model="formData.info.store" placeholder="请填写门店" class="input-width" />
							</el-form-item>
						</el-col>
						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="民族" prop="info.ethnicity">
								<el-input v-model="formData.info.ethnicity" placeholder="请填写民族" class="input-width" />
							</el-form-item>
						</el-col>
						
						<el-form-item label="生日日期" prop="info.birthday">
						  <el-date-picker
							v-model="formData.info.birthday"
							type="date"
							placeholder="请选择生日日期"
							class="input-width"
							value-format="YYYY-MM-DD"
						  />
						</el-form-item>

						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="年龄" prop="info.age">
								<el-input v-model="formData.info.age" placeholder="请填写年龄" class="input-width" />
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="司龄" prop="info.tenure">
								<el-input v-model="formData.info.tenure" placeholder="请填写司龄" class="input-width" />
							</el-form-item>
						</el-col>
						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							
							
							<el-form-item label="转正时间" prop="info.regular_date">
							  <el-date-picker
								v-model="formData.info.regular_date"
								type="date"
								placeholder="请选择转正时间"
								class="input-width"
								value-format="YYYY-MM-DD"
							  />
							</el-form-item>
							
							
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="是否转正" prop="info.is_regular">
							  <el-select
							    v-model="formData.info.is_regular"
							    placeholder="请选择是否转正"
							    class="input-width"
							    clearable
							  >
							    <el-option label="是" value="是" />
							    <el-option label="否" value="否" />
							  </el-select>
							</el-form-item>

						</el-col>
						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="政治面貌" prop="info.politics">
								<el-input v-model="formData.info.politics" placeholder="请填写政治面貌" class="input-width" />
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="毕业院校" prop="info.university">
								<el-input v-model="formData.info.university" placeholder="请填写毕业院校" class="input-width" />
							</el-form-item>
						</el-col>
						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="学历" prop="info.education">
								<el-input v-model="formData.info.education" placeholder="请填写学历" class="input-width" />
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="专业" prop="info.major">
								<el-input v-model="formData.info.major" placeholder="请填写专业" class="input-width" />
							</el-form-item>
						</el-col>
						
					</el-row>
					
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="毕业时间" prop="info.graduation_date">
							  <el-date-picker
								v-model="formData.info.graduation_date"
								type="date"
								placeholder="请选择毕业时间"
								class="input-width"
								value-format="YYYY-MM-DD"
							  />
							</el-form-item>
							
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="籍贯" prop="info.native_place">
								<el-input v-model="formData.info.native_place" placeholder="请填写籍贯" class="input-width" />
							</el-form-item>
						</el-col>
						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="户籍所在地" prop="info.household_place">
								<el-input v-model="formData.info.household_place" placeholder="请填写户籍所在地" class="input-width" />
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="户籍类型" prop="info.household_type">
								<el-input v-model="formData.info.household_type" placeholder="请填写户籍类型" class="input-width" />
							</el-form-item>
						</el-col>
						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="户籍地址" prop="info.household_address">
								<el-input v-model="formData.info.household_address" placeholder="请填写户籍地址" class="input-width" />
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="现居地址" prop="info.current_address">
								<el-input v-model="formData.info.current_address" placeholder="请填写现居地址" class="input-width" />
							</el-form-item>
						</el-col>
						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="紧急联系人" prop="info.emergency_contact">
								<el-input v-model="formData.info.emergency_contact" placeholder="请填写紧急联系人" class="input-width" />
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="紧急联系人联系电话" prop="info.emergency_phone">
								<el-input v-model="formData.info.emergency_phone" placeholder="请填写紧急联系人联系电话" class="input-width" />
							</el-form-item>
						</el-col>
						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							
							<el-form-item label="婚否" prop="info.marital_status">
							  <el-select
							    v-model="formData.info.marital_status"
							    placeholder="请选择婚否"
							    class="input-width"
							    clearable
							  >
							    <el-option label="已婚" value="已婚" />
							    <el-option label="未婚" value="未婚" />
							  </el-select>
							</el-form-item>
							
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="银行卡号" prop="info.bank_card">
								<el-input v-model="formData.info.bank_card" placeholder="请填写银行卡号" class="input-width" />
							</el-form-item>
						</el-col>
						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="开户行" prop="info.bank_name">
								<el-input v-model="formData.info.bank_name" placeholder="请填写开户行" class="input-width" />
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							
							<el-form-item label="合同到期时间" prop="info.contract_expire">
							  <el-date-picker
								v-model="formData.info.contract_expire"
								type="date"
								placeholder="请选择合同到期时间"
								class="input-width"
								value-format="YYYY-MM-DD"
							  />
							</el-form-item>
							
						</el-col>
						
					</el-row>
					
					
					<el-row :gutter="20">
						<el-col :span="12">
							
							<el-form-item label="是否复聘" prop="info.is_rehired">
							  <el-select
							    v-model="formData.info.is_rehired"
							    placeholder="请选择是否复聘"
							    class="input-width"
							    clearable
							  >
							    <el-option label="是" value="是" />
							    <el-option label="否" value="否" />
							  </el-select>
							</el-form-item>
							
							
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="备注" prop="info.remark">
								<el-input v-model="formData.info.remark" placeholder="请填写备注" class="input-width" />
							</el-form-item>
						</el-col>
						
					</el-row>
					
					
					
				</el-form>
			</el-tab-pane>
			
		</el-tabs>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showDialog = false">{{ t('cancel') }}</el-button>
					<el-button type="primary" :loading="loading"
						@click="confirm(formRef)">{{ t('confirm') }}</el-button>
				</span>
			</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed, watch } from 'vue'
	import { useDictionary } from '@/app/api/dict'
	import { t } from '@/lang'
	import type { FormInstance } from 'element-plus'
	import {
		addPersonnel,
		editPersonnel,
		getPersonnelInfo,
	} from '@/app/api/personnel'

	let showDialog = ref(false)
	const loading = ref(false)
	const activeTab = ref('base')
	/**
	 * 表单数据
	 */
	const initialFormData = {
		id: '',
		name: '',
		gender: '',
		head_img: '',
		phone: '',
		address: '',
		native_place: '',
		education: '',
		profile: '',
		emergency_contact_phone: '',
		id_card_front: '',
		id_card_back: '',
		status: '',
		is_sys_user: '',
		info:{
			name:'',
			store:'',
			ethnicity:'',
			birthday:'',
			age:'',
			tenure:'',
			regular_date:'',
			is_regular:'',
			politics:'',
			university:'',
			education:'',
			major:'',
			graduation_date:'',
			native_place:'',
			household_place:'',
			household_type:'',
			household_address:'',
			current_address:'',
			emergency_contact:'',
			emergency_phone:'',
			marital_status:'',
			bank_card:'',
			bank_name:'',
			contract_expire:'',
			is_rehired:'',
			remark:''

		}
	}
	const formData : Record<string, any> = reactive({ ...initialFormData })

	const formRef = ref<FormInstance>()

	// 表单验证规则
	const formRules = computed(() => {
		return {
			name: [{ required: true, message: t('namePlaceholder'), trigger: 'blur' }],
			gender: [
				{ required: true, message: t('genderPlaceholder'), trigger: 'blur' },
			],
			phone: [
				{ required: true, message: t('phonePlaceholder'), trigger: 'blur' },
			],
			address: [
				{ required: true, message: t('addressPlaceholder'), trigger: 'blur' },
			],
			native_place: [
				{ required: true, message: t('nativePlacePlaceholder'), trigger: 'blur' },
			],
			education: [
				{ required: true, message: t('educationPlaceholder'), trigger: 'blur' },
			],
			profile: [
				{ required: true, message: t('profilePlaceholder'), trigger: 'blur' },
			],
			emergency_contact_phone: [
				{
					required: true,
					message: t('emergencyContactPhonePlaceholder'),
					trigger: 'blur',
				},
			],
			id_card_front: [
				{ required: true, message: t('idCardFrontPlaceholder'), trigger: 'blur' },
			],
			id_card_back: [
				{ required: true, message: t('idCardBackPlaceholder'), trigger: 'blur' },
			],
			status: [
				{ required: true, message: t('statusPlaceholder'), trigger: 'blur' },
			],
			is_sys_user: [
				{ required: true, message: t('isSysUserPlaceholder'), trigger: 'blur' },
			],
		}
	})

	const emit = defineEmits(['complete'])

	/**
	 * 确认
	 * @param formEl
	 */
	const confirm = async (formEl : FormInstance | undefined) => {
		if (loading.value || !formEl) return
		let save = formData.id ? editPersonnel : addPersonnel

		await formEl.validate(async (valid) => {
			if (valid) {
				loading.value = true

				let data = formData

				save(data)
					.then((res) => {
						loading.value = false
						showDialog.value = false
						emit('complete')
					})
					.catch((err) => {
						loading.value = false
					})
			}
		})
	}

	// 获取字典数据
	let genderList = ref([])
	const genderDictList = async () => {
		genderList.value = await (await useDictionary('gender')).data.dictionary
	}
	genderDictList()
	watch(
		() => genderList.value,
		() => {
			formData.gender = genderList.value[0].value
		}
	)
	let educationList = ref([])
	const educationDictList = async () => {
		educationList.value = await (await useDictionary('education')).data.dictionary
	}
	educationDictList()
	watch(
		() => educationList.value,
		() => {
			formData.education = educationList.value[0].value
		}
	)
	let statusList = ref([])
	const statusDictList = async () => {
		statusList.value = await (
			await useDictionary('personnel_status')
		).data.dictionary
	}
	statusDictList()
	watch(
		() => statusList.value,
		() => {
			formData.status = statusList.value[0].value
		}
	)
	let is_sys_userList = ref([])
	const is_sys_userDictList = async () => {
		is_sys_userList.value = await (
			await useDictionary('global_true_or_false')
		).data.dictionary
	}
	is_sys_userDictList()
	watch(
		() => is_sys_userList.value,
		() => {
			formData.is_sys_user = is_sys_userList.value[0].value
		}
	)

	const setFormData = async (row : any = null) => {
		Object.assign(formData, initialFormData)
		loading.value = true
		if (row) {
			const data = await (await getPersonnelInfo(row.id)).data
			if (data)
				Object.keys(formData).forEach((key : string) => {
					if (data[key] != undefined) formData[key] = data[key]
				})
		}
		loading.value = false
	}

	// 验证手机号格式
	const mobileVerify = (rule : any, value : any, callback : any) => {
		if (value && !/^1[3-9]\d{9}$/.test(value)) {
			callback(new Error(t('generateMobile')))
		} else {
			callback()
		}
	}

	// 验证身份证号
	const idCardVerify = (rule : any, value : any, callback : any) => {
		if (
			value &&
			!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
				value
			)
		) {
			callback(new Error(t('generateIdCard')))
		} else {
			callback()
		}
	}

	// 验证邮箱号
	const emailVerify = (rule : any, value : any, callback : any) => {
		if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) {
			callback(new Error(t('generateEmail')))
		} else {
			callback()
		}
	}

	// 验证请输入整数
	const numberVerify = (rule : any, value : any, callback : any) => {
		if (!Number.isInteger(value)) {
			callback(new Error(t('generateNumber')))
		} else {
			callback()
		}
	}

	defineExpose({
		showDialog,
		setFormData,
	})
</script>

<style lang="scss" scoped></style>
<style lang="scss">
	.diy-dialog-wrap .el-form-item__label {
		height: auto !important;
	}
</style>