<template>
	<sc-dialog v-model="visible" :title="titleMap[mode]" :width="800" @closed="$emit('closed')">
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="90px">
			<el-row :gutter="15">
				<el-col :md="12" :xs="24">
					<el-form-item label="角色:" prop="roles">
						<el-select v-model="form.roles" multiple collapse-tags collapse-tags-tooltip clearable placeholder="请选择角色">
							<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="所属组织:" prop="dept.id">
						<tree-select v-model="form.dept.id" :apiObj="$API.system.dept" isDept check-strictly clearable placeholder="请选择所属组织"></tree-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="姓名:" prop="nickName">
						<el-input v-model="form.nickName" placeholder="请输入姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="账号:" prop="username">
						<el-input v-model="form.username" placeholder="请输入账号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="岗位:">
						<el-select v-model="form.jobs" multiple collapse-tags collapse-tags-tooltip clearable placeholder="请选择岗位">
							<el-option v-for="item in jobList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="手机号:" prop="phone">
						<el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="邮箱:">
						<el-input v-model="form.email" clearable placeholder="请输入邮箱"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="身份证号:">
						<el-input v-model="form.features.idcard" clearable placeholder="请输入身份证号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :md="12" :xs="24">
					<el-form-item label="性别:">
						<el-radio-group v-model="form.gender">
							<el-radio label="男"></el-radio>
							<el-radio label="女"></el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit">确 定</el-button>
		</template>
	</sc-dialog>
</template>

<script>
	export default {
		emits: ["success", "closed"],

		data() {
			return {
				mode: "add",
				titleMap: {
					add: "新增成员",
					edit: "编辑成员"
				},
				visible: false,
				isSaveing: false,
				jobList: [],
				roleList: [],

				form: {
					id: null,
					nickName: null,
					username: null,
					dept: {
						id: null
					},
					jobs: [],
					roles: [],
					phone: null,
					gender: null,
					email: null,
					features: {
						idcard: null
					},
					projectUserType: "USER_TYPE_ENTERPRISE",
					enabled: true
				},

				rules: {
					nickName: [{ required: true, message: "请输入姓名" }],
					username: [{ required: true, message: "请输入账号" }],
					"dept.id": [{ required: true, message: "请选择所属组织" }],
					roles: [{ required: true, message: "请选择角色" }],
					phone: [{ required: true, message: "请输入手机号" }]
				}
			}
		},

		mounted() {
			this.getRoles();
			this.getJobs();
		},

		methods: {
			// 显示
			open(mode = "add") {
				this.mode = mode;
				this.visible = true;
				return this;
			},

			// 表单注入数据
			setData(data) {
				for (const key in this.form) {
					if (key == "dept") this.form[key].id = data.deptId || null;
					else if (key == "jobs") this.form[key] = data[key] && data[key].map(j => j.id) || [];
					else if (key == "roles") this.form[key] = data[key] && data[key].map(r => r.id) || [];
					else if (key == "features") this.form[key].idcard = data[key] && JSON.parse(data[key]) && JSON.parse(data[key]).idcard || null;
					else this.form[key] = data[key] || null;
				}
			},

			async getRoles() {
				this.roleList = await this.$API.system.role.all({ sort: "level,asc" });
			},

			async getJobs() {
				this.jobList = await this.$API.system.job.all({ orderBy: "jobSort_asc" });
			},
			
			// 表单提交方法
			submit() {
				this.$refs.dialogForm.validate(valid => {
					if (valid) {
						const data = Object.assign({}, this.form);
						data["roles"] = this.form.roles.map(id => ({ id }));
						data["jobs"] = this.form.jobs.map(id => ({ id }));
						data["features"] = JSON.stringify(this.form.features);

						this.isSaveing = true;
						this.$API.system.user[this.mode](data).then(() => {
							this.isSaveing = false;
							this.$message.success("操作成功");
							this.visible = false;
							this.$emit("success", this.mode);
						}).catch(() => this.isSaveing = false);
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.el-form {
  padding: 10px 30px 0 0;
}

@media (max-width: 992px) {
  .el-form {
    padding: 10px;
  }
}
</style>