<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" width="60%" @close="close" @keyup.enter.native=""
			v-model="visible" @open="handleOpen">
			<el-form :model="inputForm" :rules="rules" ref="inputForm" v-loading="loading"
				:class="method === 'view' ? 'readonly' : ''"
				:disabled="status === 'audit' || status === 'taskFormDetail' || method === 'view'" label-width="150px"
				@submit.native.prevent>
				<el-divider content-position="left"><i class="el-icon-user"></i> 基本信息</el-divider>
				<el-row :gutter="15">
					<el-col :span="12">
						<el-form-item label="员工名称" prop="name">
							<el-tooltip content="请输入员工真实姓名" placement="top">
								<el-input placeholder="请填写员工名称" v-model="inputForm.name"></el-input>
							</el-tooltip>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工号" prop="jobNumber">
							<el-input placeholder="请填写工号" v-model="inputForm.jobNumber"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机号" prop="mobile">
							<el-input placeholder="请填写手机号" v-model="inputForm.mobile"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否隐藏手机号" prop="hideMobile">
							<el-switch v-model="inputForm.hideMobile" size="large" active-text="是" inactive-text="否" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left"><i class="el-icon-office-building"></i> 职位信息</el-divider>
				<el-row :gutter="15">
					<el-col :span="12">
						<el-form-item label="职位" prop="title">
							<el-input placeholder="请填写职位" v-model="inputForm.title"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="办公地点" prop="workPlace">
							<el-input placeholder="请填写办公地点" v-model="inputForm.workPlace"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="所属部门" prop="deptIdList">
							<el-tree-select style="width: 100%;" v-model="inputForm.deptIdList" node-key="deptId"
								:props="props" check-strictly default-expand-all :data="deptList" show-checkbox
								check-on-click-node multiple />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="入职时间" prop="hiredDate">
							<el-date-picker v-model="inputForm.hiredDate" type="date" placeholder="请填写入职日期"
								format="YYYY/MM/DD" value-format="x" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left"><i class="el-icon-message"></i> 联系方式</el-divider>
				<el-row :gutter="15">
					<el-col :span="12">
						<el-form-item label="邮箱" prop="email">
							<el-input placeholder="请填写邮箱" v-model="inputForm.email"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="企业邮箱" prop="orgEmail">
							<el-input placeholder="请填写企业邮箱" v-model="inputForm.orgEmail"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" :rows="3" placeholder="请填写备注"
								v-model="inputForm.remark"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
					<el-button type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check"
						v-noMoreClick>确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import ddService from "@/api/test/dd/dd.js"
import { ElDatePicker } from 'element-plus';
// eslint-disable-next-line no-unused-vars
import moment from 'moment'
export default {
	props: {
		formReadOnly: {
			type: Boolean,
			default: false
		},
		status: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			props: {
				label: 'name',
				children: 'children',
			},
			title: '',
			method: '',
			loading: false,
			visible: false,
			inputForm: {
				userid: '',
				name: '',
				deptIdList: []
			},
			deptList: [],
			rules: {
				deptIdList: [
					{ required: true, message: "请选择所属部门", trigger: "change" },
				],
				name: [
					{ required: true, message: "请填写员工名称", trigger: "blur" },
					{ min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
				],
				mobile: [
					{ required: true, message: "请填写手机号", trigger: "blur" },
					{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号格式", trigger: "blur" }
				],
				email: [
					{ type: "email", message: "请输入正确的邮箱格式", trigger: "blur" }
				],
				orgEmail: [
					{ type: "email", message: "请输入正确的邮箱格式", trigger: "blur" }
				],
				jobNumber: [
					{ required: true, message: "请填写工号", trigger: "blur" }
				],
				title: [
					{ required: true, message: "请填写职位", trigger: "blur" }
				],
				hiredDate: [
					{ required: true, message: "请选择入职日期", trigger: "change" }
				]
			},
		}
	},
	created() {
	},
	mounted() {
	},
	activated() {
	},
	components: {
		ElDatePicker,
	},
	methods: {
		load(node, resolve) {
			ddService.deptList({
				deptId: node.data.deptId
			}).then(res => {
				resolve(res.result)
			})

		},
		handleGetById() {
			this.loading = true
			ddService.selectUserById({
				id: this.inputForm.userid
			}).then(res => {
				console.log(res);
				this.inputForm = res.result
				this.loading = false
			})
		},
		init(method, id) {
			this.method = method
			this.visible = true
			if (method === 'add') {
				this.title = `创建用户`
			} else if (method === 'edit') {
				this.inputForm.userid = id
				this.title = '修改用户'
			}
			this.visible = true
			this.$nextTick(() => {
				this.loading = true
				this.$refs.inputForm.resetFields()
				// ddService.deptList(1).then(res => {
				// 	res.unshift({
				// 		deptId: 1,
				// 		name: '顶级部门节点',
				// 		parentId: 0
				// 	})
				// 	this.deptList = this.buildTree(res)
				if (this.commonJS.isNotEmpty(this.inputForm.userid)) {
					this.handleGetById()
				} else {
					this.loading = false

				}
				// })

			})
		},
		buildTree(data) {
			const map = new Map();
			const tree = [];
			console.log(data);

			// 先把所有项存到 Map 里，并初始化 children
			data.forEach(item => {
				map.set(item.deptId, { ...item, children: [] });
			});
			// 组装树结构
			data.forEach(item => {
				if (item.parentId) {
					// 找到父级并添加到 children
					const parent = map.get(item.parentId);
					if (parent) {
						parent.children.push(map.get(item.deptId));
					}
				} else {
					// parentId 为空的就是根节点
					tree.push(map.get(item.deptId));
				}
			});

			return tree;
		},
		// 表单提交
		async doSubmit() {
			this.loading = true
			this.$refs['inputForm'].validate(async (valid) => {
				if (valid) {
					this.loading = true
					console.log(this.inputForm);

					if (this.inputForm.userid) {
						//将数组转成字符串，以逗号分隔
						this.inputForm.deptIdList = this.inputForm.deptIdList.join(',');
						const res = await ddService.updateUser(this.inputForm)
						if (res.errcode == 0) {
							this.visible = false
							this.$emit('refreshList')
							this.$refs.inputForm.resetFields()
							this.$message.success("修改成功");
							this.loading = false
						} else {
							this.$message.error("添加失败,请重试");
							this.loading = false
						}
					} else {
						const res = await ddService.addUser(this.inputForm)
						if (res.errcode == 0) {
							this.visible = false
							this.$emit('refreshList')
							this.$refs.inputForm.resetFields()
							this.$message.success("添加成功");
							this.loading = false
						} else {
							this.$message.error("添加失败,请重试");
							this.loading = false
						}
					}
				} else {
					this.loading = false
				}
			})
		},
		close() {
			this.inputForm = {
				id: '',
			}
			this.visible = false
		},
	}

}
</script>
<style scoped>
/deep/ .el-input-number .el-input__inner {
	text-align: left;
}

/deep/ .vxe-footer--row .vxe-footer--column:nth-child(1) .vxe-cell--item {
	font-weight: 700;
}
</style>
