<template>
	<!-- <Dialog v-model="dialogVisible" title="分配角色"> -->
	<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="120px" :class="{ 'view': isDetail,'mobile-card':mobile }" :disabled="isDetail" style="padding: 10px;">
		<el-row>
			<el-col :span="12">
				<el-form-item label="用户名称">
					<el-input v-model="formData.username" :disabled="true" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="用户昵称">
					<el-input v-model="formData.nickname" :disabled="true" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-form-item label="角色">
					<el-select style="width:150px" v-model="formData.roleIds" multiple placeholder="请选择角色">
						<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
	<!-- <template #footer>
			<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</template>
</Dialog> -->
</template>
<style lang="scss" scoped>
.el-row {
	.el-input {
		width: 150px
	}
}
</style>
<script lang="ts" setup>
import * as PermissionApi from '@/api/system/permission'
import * as UserApi from '@/api/system/user'
import * as RoleApi from '@/api/system/role'
import { useAppStore } from '@/store/modules/app'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const user = wsCache.get(CACHE_KEY.USER)
const isAdmin = computed(() => {
  return user.user.id  === 1;
})

const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)
defineOptions({ name: 'SystemUserAssignRoleForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
	id: -1,
	nickname: '',
	username: '',
	roleIds: []
})
const formRef = ref() // 表单 Ref
const roleList = ref([] as RoleApi.RoleVO[]) // 角色的列表
const props = defineProps({
	isDetail: {
		type: Boolean,
		default: false
	},
	obj: {
		default: undefined
	}
})
/** 打开弹窗 */
const open = async (row: UserApi.UserVO) => {
	dialogVisible.value = true
	resetForm()
	// 设置数据
	formData.value.id = row.id
	formData.value.username = row.username
	formData.value.nickname = row.nickname
	// 获得角色拥有的菜单集合
	formLoading.value = true
	try {
		formData.value.roleIds = await PermissionApi.getUserRoleList(row.id)
	} finally {
		formLoading.value = false
	}
	// 如果不是admin 就把第一个选项-超级管理员移除
	let res = await RoleApi.getSimpleRoleList({categoryId:1})
	if(!isAdmin.value){
		res.shift()
	}
	// 获得角色列表
	roleList.value = res
}
onMounted(() => {
	open(props.obj)
})
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
	const result = ref(false)

	// 校验表单
	if (!formRef) return
	const valid = await formRef.value.validate()
	if (!valid) return
	// 提交请求
	formLoading.value = true
	try {
		await PermissionApi.assignUserRole({
			userId: formData.value.id,
			roleIds: formData.value.roleIds
		})
		message.success(t('common.updateSuccess'))
    result.value = true
		
	} finally {
		formLoading.value = false
	}
  return result.value

}
defineExpose({ submitForm }) 

/** 重置表单 */
const resetForm = () => {
	formData.value = {
		id: -1,
		nickname: '',
		username: '',
		roleIds: []
	}
	formRef.value?.resetFields()
}
</script>
<style src="@/styles/PcComponents.css"  lang="scss" scoped></style>
