<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="parent_id">
				<el-cascader v-model="form.parent_id" :options="groups" :props="groupsProps" :show-all-levels="false"
							 clearable style="width: 100%;" placeholder="默认一级部门"></el-cascader>
			</el-form-item>
			<el-form-item label="部门名称" prop="dept_name">
				<el-input v-model="form.dept_name" placeholder="请输入部门名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="排序" prop="rank">
				<el-input-number v-model="form.rank" controls-position="right" :min="1" :max="9999"
								 style="width: 100%;"></el-input-number>
			</el-form-item>
			<el-form-item label="是否有效" prop="status">
				<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
			</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";

defineExpose({
	open
})

const emit = defineEmits(['success', 'closed'])
const formRef = ref(null)
const {proxy} = getCurrentInstance()

let mode = ref('add')
let titleMap = ref({
	add: '新增',
	edit: '编辑',
	show: '查看'
})
let visible = ref(false)
let isSaveing = ref(false)
let form = ref({
	dept_id: "",
	parent_id: 0,
	dept_name: "",
	rank: 1,
	status: 1,
	remark: ""
})
let rules = ref({
	rank: [
		{required: true, message: '请输入排序', trigger: 'change'}
	],
	dept_name: [
		{required: true, message: '请输入部门名称'}
	]
})
let groups = ref([])
let groupsProps = ref({
	value: "dept_id",
	label: "dept_name",
	emitPath: false,
	checkStrictly: true
})

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

//显示
function open(m = 'add', data = null) {
	mode.value = m;
	visible.value = true;
	Object.assign(form.value, data)
	return {setParent}
}

function setParent(parent_id=0) {
	form.value.parent_id = parent_id
}

//加载树数据
async function getGroup() {
	const res = await api.system.dept.list();
	groups.value = tools.makeTreeData(res.data, 0, "dept_id", "parent_id");
}

//表单提交方法
async function submit() {
	// 校验登录
	const validate = await formRef.value.validate().catch(() => {
	});
	if (!validate) {
		return false
	}
	isSaveing.value = true;
	const res = form.value.dept_id ? await api.system.dept.edit(form.value) : await api.system.dept.add(form.value);
	isSaveing.value = false;
	emit('success')
	visible.value = false;
	proxy.$message.success(res.msg)
}

</script>

<style>
</style>
