<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="formRef" label-width="100px"
				 label-position="right">
			<el-form-item label="账号" prop="username">
				<el-input v-model="form.username" placeholder="用于登录系统" clearable></el-input>
			</el-form-item>
			<el-form-item label="名称" prop="nickname">
				<el-input v-model="form.nickname" placeholder="请输入名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input v-model="form.email" placeholder="请输入邮箱" clearable></el-input>
			</el-form-item>
			<el-form-item label="电话" prop="phone">
				<el-input v-model="form.phone" placeholder="请输入联系电话" clearable></el-input>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input type="password" v-model="form.password" clearable show-password></el-input>
			</el-form-item>
			<el-form-item label="所属部门" prop="dept_id">
				<el-cascader ref="deptRef" v-model="form.dept_id" :options="depts" :props="deptsProps" clearable
							 style="width: 100%;"></el-cascader>
			</el-form-item>
			<el-form-item label="所属岗位" prop="posts">
				<el-select v-model="form.posts" multiple filterable style="width: 100%">
					<el-option v-for="item in groups2" :key="item.post_id" :label="item.post_name"
							   :value="item.post_id"/>
				</el-select>
			</el-form-item>
			<el-form-item label="所属角色" prop="roles">
				<el-select v-model="form.roles" multiple filterable style="width: 100%">
					<el-option v-for="item in groups" :key="item.role_id" :label="item.role_name"
							   :value="item.role_id"/>
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>
<script setup>
import {ref, onMounted, getCurrentInstance} from 'vue'
import api from "@/api/index"
import tools from "@/utils/tools.js";

defineExpose({
	open
})

const {proxy} = getCurrentInstance()
const emit = defineEmits(['success', 'closed'])
const formRef = ref(null)
const deptRef = ref(null)
let mode = ref('add')
let titleMap = ref({
	add: '新增',
	edit: '编辑',
	show: '查看'
})
let visible = ref(false)
let isSaveing = ref(false)
const form = ref({
	account_id: null,
	username: "",
	email: '',
	phone: '',
	password: "",
	dept_id: 0,
	roles: [],
	posts: []
})
const rules = ref({
	username: [
		{required: true, message: '请输入登录账号'}
	],
	realname: [
		{required: true, message: '请输入真实姓名'}
	],
	dept_id: [
		{required: true, message: '请选择所属部门'}
	],
	roles: [
		{required: true, message: '请选择所属角色', trigger: 'change'}
	]
})
let groups = ref([])
let groups2 = ref([])
let depts = ref([])
let deptsProps = ref({
	value: "dept_id",
	label: "dept_name",
	checkStrictly: true
})

onMounted(() => {
	getGroup()
	getGroup2()
})

function open(m = 'add', data = {}, d = []) {
	mode.value = m;
	if (data) {
		Object.assign(form.value, data)
		form.value.roles = data.roles.map(item => item.role_id)
		form.value.posts = data.posts.map(item => item.post_id)
	}
	depts.value = d
	visible.value = true
}

//加载树数据
async function getGroup() {
	const res = await api.system.role.option();
	groups.value = res.data;
}

async function getGroup2() {
	const res = await api.system.post.option();
	groups2.value = res.data;
}

//表单提交方法
async function submit() {
	// 校验登录
	const validate = await formRef.value.validate().catch(() => {
	});
	if (!validate) {
		return false
	}
	// 部门获取最后一项
	form.value.dept_id = deptRef.value.getCheckedNodes()[0].data.dept_id
	if (form.value.password) form.value.password = tools.md5(form.value.password)
	isSaveing.value = true;
	const res = form.value.account_id ? await api.system.account.edit(form.value) : await api.system.account.add(form.value);
	isSaveing.value = false;
	emit('success')
	visible.value = false;
	proxy.$message.success(res.msg)
}
</script>
