<template>
	<el-drawer
		:title="titleMap[mode]"
		v-model="visible"
		:size="1000"
		destroy-on-close
		@closed="closeDrawer"
	>
		<el-container v-loading="loading">
			<!--<sc-title title="详细信息"></sc-title>-->
			<el-main style="padding: 0 20px 20px 20px">
				<el-form
					ref="dialogForm"
					:model="form"
					:rules="rules"
					:disabled="mode==='show'"
					label-width="120px"
				>
					<el-row>
						<el-col :md="12" :sm="24">
							<el-form-item label="姓名" prop="name">
								<el-input v-model="form.name" placeholder="请输入真实姓名" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="手机号" prop="phone">
								<el-input v-model="form.phone" placeholder="请输入手机号" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="身份证号" prop="id_number">
								<el-input v-model="form.id_number" placeholder="请输入身份证号" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :md="12" :sm="24">
							<el-form-item label="人员编号" prop="number">
								<el-input v-model="form.number" placeholder="请输入人员编号" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="所属部门">
								<el-cascader
									v-model="form.dept"
									:options="depts"
									:props="deptsProps"
									clearable
									style="width: 100%;">
								</el-cascader>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="在职状态">
								<el-select v-model="form.job_state" style="width: 100%">
									<el-option
										v-for="item in job_states"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="系统账号">
								<el-input v-model="form.user" placeholder="请输入系统账号" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="邮箱">
								<el-input v-model="form.email" placeholder="请输入邮箱" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="学历">
								<el-input v-model="form.qualification" placeholder="学历" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="生日">
								<el-date-picker
									v-model="form.birthday"
									type="date"
									placeholder="生日"
								/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="在岗状态展示">
								<el-switch v-model="form.show_atwork"/>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="性别">
								<el-radio-group v-model="form.gender">
									<el-radio label="男" size="large">男</el-radio>
									<el-radio label="女" size="large">女</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="证件照">
								<sc-upload v-model="form.photo" :modelValue="form.photo" title="证件照"></sc-upload>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="签名照">
								<sc-upload v-model="form.signature" title="签名照"></sc-upload>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-main>
			<el-footer v-if="mode!=='show'">
				<el-button
					type="primary"
					:loading="isSaveing"
					@click="submit"
				>
					保存
				</el-button>
				<el-button @click="visible = false">取消</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	import {genTree} from "@/utils/verificate";
	const defaultForm = {
		id: null,
		phone: '',
		name: '',
		email: '',
		number: '',
		photo: '',
		id_number: '',
		gender: '男',
		signature: '',
		birthday: null,
		qualification: '',
		job_state: 10,
		show_atwork: true,
		belong_dept: '',
		user: '',
	};
	export default {
		emits: ["success", "closed"],
		data() {
			return {
				loading: false,
				mode: "add",
				titleMap: {
					add: '新增员工',
					edit: '员工信息编辑',
					show: '员工信息查看'
				},
				job_states: [
					{id: 10, name: "在职"},
					{id: 20, name: "离职"},
				],
				visible: false,
				isSaveing: false,
				form: defaultForm,

				//验证规则
				rules: {
					phone: [
						{required: true, message: '请输入手机号'}
					],
					name: [
						{required: true, message: '请输入姓名'}
					],
					number: [
						{required: true, message: '请输入人员编号'}
					],
					photo: [
						{required: true, message: '请上传证件照'}
					],
					id_number: [
						{required: true, message: '请输入身份证号', trigger: 'blur'},
						{pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确'},
						/*{
                            validator: (rule, value, callback) => {
                                if (this.form.id_number.length !== 18) {
                                    callback(new Error('请输入正确的身份证号!'));
                                }
                                callback();
                            }
                        }*/
					],
				},
				addForm: {
					name: "",
					sort: "",
					user: "",
					post: "",
					dept: [],
				},
				groupsProps: {
					// value: "id",
					multiple: false,
					emitPath: false,
					checkStrictly: true,
				},
				group: [],
				postOptions: [],
				selectionFilters: [],
				filtersAddTemplate: {
					text: "",
					value: "",
				},
				setFiltersVisible: false,
			};
		},
		mounted() {
			this.getPosts();
			this.getGroup();
			this.getUserPostList();
		},
		methods: {
			getPosts(){
				this.$API.system.post.list.req({page:0}).then(res=>{
					if(res.err_msg){
						this.$message.error(res.err_msg)
					}else{
						this.postOptions = res;
					}
				})
			},
			//加载树数据
			async getGroup() {
				let res = await this.$API.system.dept.list.req({page: 0});
				this.group =genTree(res);
			},
			//显示
			open(mode) {
				this.mode = mode;
				this.visible = true;
				return this;
			},
			closeDrawer() {
				this.visible = false;
				this.$emit('closed');
			},
			//表单提交方法
			submit() {
				this.$refs.dialogForm.validate((valid) => {
					if (valid) {
						this.isSaveing = true;
						// this.addForm.dept = this.addForm.dept[1];
						if (this.mode === 'add') {
							this.$API.hrm.employee.create.req(this.form)
								.then(res => {
									this.isSaveing = false;
									this.visible = false;
									this.$emit("success", this.form, this.mode);
									this.$message.success("操作成功");
									return res
								}).catch(err => {
								this.isSaveing = false;
								return err
							})
						} else {
							this.$API.hrm.employee.update.req(this.form.id, this.form)
								.then(res => {
									this.isSaveing = false;
									this.visible = false;
									this.$emit("success", this.form, this.mode);
									this.$message.success("操作成功");
									return res
								}).catch(err => {
								this.isSaveing = false;
								return err
							})
						}

					}
				});
			},
			//表单注入数据
			setData(data) {
				//debugger;
				console.log(defaultForm);
				// this.form = defaultForm;
				Object.assign(this.form, data);
			},
			//设置过滤项
			setFilters(filters) {
				this.selectionFilters = filters;
				this.setFiltersVisible = true;
			},
		},
	};
</script>

<style>
</style>
