<template>
	<el-dialog title="修改部门" v-model="state.dialogVisible" width="769px" draggable>
		<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="80px">
			<el-row :gutter="35">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="部门名称" prop="orgName" :rules="[{ required: true, message: '请输入部门名称', trigger: 'blur' }]">
						<el-input v-model="state.ruleForm.orgName" placeholder="请输入部门名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="部门简称" prop="orgShortName" :rules="[{ required: true, message: '请输入部门简称', trigger: 'blur' }]">
						<el-input v-model="state.ruleForm.orgShortName" placeholder="请输入部门简称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="上级部门" prop="parentId" :rules="[{ required: false, message: '请选择上级部门', trigger: 'change' }]">
						<el-cascader
							:options="state.orgData"
							filterable
							:props="{ checkStrictly: true, value: 'id', label: 'orgName', emitPath: false }"
							placeholder="请选择上级部门"
							clearable
							class="w100"
							v-model="state.ruleForm.parentId"
							ref="cascadeRef"
							@change="getKnowledgeList"
							disabled
						>
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="所属区域" prop="areaCode" :rules="[{ required: true, message: '请选择所属区域', trigger: 'change' }]">
						<el-cascader
							:options="state.areaOptions"
							filterable
							:props="{ value: 'id', label: 'areaName', emitPath: false, checkStrictly: true }"
							placeholder="请选择所属区域"
							class="w100"
							v-model="state.ruleForm.areaCode"
							ref="areaRef"
							@change="changeArea"
						>
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="部门类别" prop="orgType" :rules="[{ required: true, message: '请选择部门类别', trigger: 'change' }]">
						<el-select v-model="state.ruleForm.orgType" placeholder="请选择部门类别" class="w100">
							<el-option v-for="item in state.orgType" :key="item.key" :label="item.value" :value="item.key" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="是否启用" prop="isEnable">
						<el-switch v-model="state.ruleForm.isEnable" inline-prompt active-text="启" inactive-text="禁" disabled></el-switch>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit(ruleFormRef)" v-waves="'light'" :loading="state.loading">修 改 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="systemEditOrg">
import { reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import mittBus from '/@/utils/mitt';
import { auth } from '/@/utils/authFunction';
import { excludeSelfById } from '/@/utils/tools';
import other from '/@/utils/other';
import { updateOrg, getOrgById } from '/@/api/system/organize';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

// 定义变量内容
const ruleFormRef = ref<FormInstance>();
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: {
		orgName: '', // 部门名称
		orgCode: '', // 部门编码
		parentId: '', // 上级部门id
		parentName: '', // 上级部门名称
		orgShortName: '', // 部门简称
		orgType: '', // 部门类别
		areaName: '', // 所属区域名称
		areaCode: '', // 所属区域编码
		isEnable: true, // 是否启用
		children: [], // 子部门
	},
	orgData: [], // 上级部门数据
	orgType: [], // 部门类型
	loading: false, // 按钮loading
	telsList: [], // 分机列表
});
// 打开弹窗
const openDialog = async (row: any, orgData: any, orgType: any, areas: any) => {
	if (!auth('system:organize:detail')) ElMessage.error('抱歉，您没有获取部门详情的权限！');
	else {
		try {
			ruleFormRef.value?.resetFields();
			state.orgData = other.deepClone(orgData);
			state.orgType = orgType;
			state.orgData = excludeSelfById(state.orgData, row.id);
			const res: any = await getOrgById(row.id);
			state.ruleForm = res.result;
			state.areaOptions = areas ?? []; //省市区数据
			state.dialogVisible = true;
		} catch (error) {
			console.log(error);
		}
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
const cascadeRef = ref<RefType>();
// 获取选择name值
const getKnowledgeList = () => {
	const currentNode = cascadeRef.value.getCheckedNodes();
	state.ruleForm.areaName = currentNode[0].pathLabels.join('');
};
// 修改
const onSubmit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		updateOrg(state.ruleForm)
			.then(() => {
				emit('updateList');
				closeDialog(); // 关闭弹窗
				ElMessage.success('修改成功');
				mittBus.emit('clearCache', 'systemUser');
				state.loading = false;
			})
			.catch(() => {
				state.loading = false;
			});
	});
};
// 省市区选择
const areaRef = ref<RefType>();
const changeArea = () => {
	const currentNode = areaRef.value.getCheckedNodes();
	state.ruleForm.areaName = currentNode[0].pathLabels.join('');
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
