<template>
    <!-- 添加或修改角色管理对话框 -->
    <el-dialog :title="authDialog.title" v-model="authDialog.visible" width="500px" append-to-body>
        <el-form ref="dataScopeRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="角色名称" >
                <el-input readonly v-model="form.name" disabled placeholder="请输入角色名称"/>
            </el-form-item>
            <el-form-item label="绑定用户" prop="userIds">
                <SelectUser multiple v-model="form.userIds"></SelectUser>
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button :loading="buttonLoading" type="primary" @click="handleSelectUser">提交</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {
    bindRoleUser
} from '@/api/system/role';
import {RoleForm, RoleQuery, RoleVO} from "@/api/system/role/types";
// import SelectUser from '@/components/SelectOrg/SelectUser.vue'
const emits = defineEmits(['ok'])

//获取当前实例
const {proxy} = getCurrentInstance() as ComponentInternalInstance;

const visible = ref(false);
const buttonLoading = ref(false);
const authDialog = reactive<DialogOption>({
    visible: false,
    title: ''
});

const initFormData: RoleForm = {
    id: undefined,
    name: undefined,
    userIds: [],
}
const form = reactive(initFormData);

const rules = reactive({
    userIds: [
        {
            required: true,
            message: '请选择要分配的用户',
            type: 'array',
            trigger: 'change'
        }
    ]
})
const show = (column: RoleVO) => {
    authDialog.visible = true;
    authDialog.title = '绑定用户'
    nextTick(()=>{
        form.id = column.id
        form.name = column.name
        form.userIds = column.userIds
    })

}
/**选择授权用户操作 */
const handleSelectUser = async () => {
    if (form?.userIds.length == 0) {
        proxy?.$modal.msgError('请选择要分配的用户');
        return;
    }
    buttonLoading.value = true;
    let data = {
        rid: form.id,
        uids: form.userIds
    }
    await bindRoleUser(data);
    proxy?.$modal.msgSuccess('分配成功');
    emits('ok')
    authDialog.visible = false;
    buttonLoading.value = false
}
const cancel = () => {
    authDialog.visible = false;
}

// 暴露
defineExpose({
    show,
});
</script>

<style scoped></style>
