<template>
	<div class="system-edit-user-container">
		<el-dialog v-model="state.isShowDialog" width="769px" draggable title="修改用户">
			<el-form :model="state.ruleForm" label-width="90px" ref="ruleFormRef">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-divider content-position="left"><b class="formTitle">基本信息</b></el-divider>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="姓名" prop="name"
							:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.name" 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="userName"
							:rules="[{ required: true, message: '请输入登录账号', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.userName" disabled 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="phoneNo"
							:rules="[{ required: false, message: '请输入手机号', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.phoneNo" 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="gender"
							:rules="[{ required: false, message: '请选择性别', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.gender" placeholder="请选择性别" class="w100">
								<el-option v-for="item in state.genderList" :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="orgId"
							:rules="[{ required: true, 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.orgId"
								ref="cascaderRef" @change="getselKnowledgeList">
								<template #default="{ node, data }">
									<span>{{ data.orgName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="默认分机" prop="defaultTelNo"
							:rules="[{ required: false, message: '请选择默认分机', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.defaultTelNo" placeholder="请选择默认分机" class="w100">
								<el-option v-for="item in state.telsList" :key="item.no" :label="item.no"
									:value="item.no" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="邮箱" prop="email"
							:rules="[{ required: false, message: '请输入邮箱', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.email" placeholder="请输入邮箱" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-divider content-position="left"><b class="formTitle">角色配置</b></el-divider>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="工号" prop="staffNo"
							:rules="[{ required: true, message: '请输入工号', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.staffNo" placeholder="请输入工号" clearable></el-input>
						</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)" :loading="loading">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemEditUser">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { throttle } from '/@/utils/tools';
import { updateUser, getcanuseorg, getBaseData } from '/@/api/system/user';
import { getTelsList } from '/@/api/device/tels';
// 定义接口来定义对象的类型
interface UserState {
	isShowDialog: boolean;
	ruleForm: {
		phoneNo: string; // 手机号
		name: string; // 姓名
		userName: string; // 用户昵称
		gender: string | number; //性别
		orgId: string; // 组织id
		orgCode: string; //组织code
		staffNo: string; //工号
		defaultTelNo: string;//默认分机
		email: string;// 邮箱
	};
	OrgData: Array<any>;//可用组织
	telsList: Array<any>;// 所有分机
	genderList: Array<any>; //性别列表
}
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

// 定义变量内容
const state = reactive<UserState>({
	isShowDialog: false,
	ruleForm: {
		phoneNo: '', // 手机号
		gender: 0, //性别
		name: '', // 姓名
		userName: '', // 用户昵称
		orgId: '', // 组织id
		orgCode: '', //组织code
		staffNo: '', //工号
		defaultTelNo: '',//默认分机
		email: "", //邮箱
	},
	OrgData: [], //可用组织
	telsList: [], // 所有分机
	genderList: [] // 性别列表
});
const ruleFormRef = ref<FormInstance>()
let loading = ref<boolean>(false);
// 打开弹窗
const openDialog = (row: any) => {
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
	state.ruleForm = JSON.parse(JSON.stringify(row));
	getOrgListFn();
	getTelsListFn();
	getBaseDataFn();
	state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 获取可用组织
const getOrgListFn = () => {
	getcanuseorg().then((res: any) => {
		state.OrgData = res?.result ?? [];
	})
}
const cascaderRef = ref();
// 获取选择组织name值
const getselKnowledgeList = () => {
	let currentNode = cascaderRef.value.getCheckedNodes();
	state.ruleForm.orgCode = currentNode[0]?.data.orgCode ?? '';
}
// 获取分机列表
const getTelsListFn = () => {
	getTelsList().then((res: any) => {
		state.telsList = res?.result ?? [];
	})
}
// 查询页面基础信息
const getBaseDataFn = () => {
	getBaseData().then((res: any) => {
		state.genderList = res?.result?.genderOptions ?? [];
	})
}
// 新增
const onSubmit = throttle(async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			loading.value = true;
			updateUser(state.ruleForm).then(() => {
				ElMessage({
					message: '修改成功',
					type: 'success',
				})
				loading.value = false;
				closeDialog();
				emit("updateList")
			}).catch(() => { // 新增失败
				loading.value = false;
				closeDialog();
			})
		} else {
			// console.log('error submit!', fields)
		}
	})
}, 1000);
// 暴露变量
defineExpose({
	openDialog,
	closeDialog
});
</script>
