<template>
	<div class="system-add-user-container">
		<el-dialog v-model="state.isShowDialog" width="500px" 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-form-item label="角色" prop="roleIds"
							:rules="[{ required: false, message: '请选择角色', trigger: 'change' }]">
							<el-select-v2 v-model="state.ruleForm.roleIds" filterable multiple :options="state.options"
								class="w100" placeholder="请选择角色" clearable />
						</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()" :loading="loading">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemSetRole">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import { throttle } from '/@/utils/tools';
import { getRoles, setRole, getCurrentRoles } from '/@/api/system/user';

// 定义接口来定义对象的类型
interface UserState {
	isShowDialog: boolean;
	ruleForm: {
		roleIds: Array<any>
	};
	options: Array<any>;
	currentRow: any,

}

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

// 定义变量内容
const state = reactive<UserState>({
	isShowDialog: false,
	ruleForm: {
		roleIds: [], // 角色id
	},
	options: [],
	currentRow: {}
});
let loading = ref<boolean>(false);
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
// 打开弹窗
const openDialog = (row: any) => {
	state.ruleForm.roleIds = <any>[];
	state.currentRow = row;
	getRolesFn();
	if (userInfos.value.authBtnList.includes('100106')) { // 校验是否有权限 页面基础信息
		getCurrentRoles(row.id).then((res: any) => {
			res.result?.forEach((element: any) => {
				state.ruleForm.roleIds.push(element.id);
			});
		})
	} else {
		ElMessage.warning('您没有权限查看分页用户角色');
	}
	state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 获取角色
const getRolesFn = () => {
	getRoles({ PageIndex: 1, PageSize: 999 }).then((res: any) => {
		state.options = res?.result.items ?? [];
		state.options = state.options.map((item) => ({
			value: item.id,
			label: item.displayName,
		}))
	})
}
// 新增
const ruleFormRef = ref();
const onSubmit = throttle(() => {
	ruleFormRef.value.validate((valid: boolean) => {
		if (valid) {
			loading.value = true;
			let req = {
				roleIds: state.ruleForm.roleIds,
				userId: state.currentRow.id
			}
			setRole(req).then(() => {
				ElMessage({
					message: '操作成功',
					type: 'success',
				})
				loading.value = false;
				closeDialog();
				emit("updateList")
			}).catch(() => { // 新增失败
				loading.value = false;
				closeDialog();
			})
		} else {
			return false;
		}
	});
}, 1000);
// 暴露变量
defineExpose({
	openDialog,
	closeDialog
});
</script>
