<template>
    <div>
        <!-- 选择班级模态框 -->
        <a-modal :visible="visible" @ok="handOK" :confirmLoading="confirmLoading" @cancel="closeBtn" okText="确认"
            cancelText="取消" :maskClosable="false" :destroyOnClose="true" width="500px">
            <span slot="title"> 分配角色 </span>
            <a-form :form="form" @submit="handOK" layout="horizontal">
                <a-form-item label="用户姓名：" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                    {{ record.fullName }}
                </a-form-item>
                <a-form-item label="手机号码：" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                    {{ record.phoneNumber }}
                </a-form-item>
                <a-form-item label="学科：" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                    {{ subjectText(record.userDisciplines) }}
                </a-form-item>
                <a-form-item label="拥有角色：" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
    import {
        RoleGetAll,
        UserSetRoles
    } from "@/api/api";
    export default {
        data() {
            return {
                visible: false,
                confirmLoading: false,
                form: this.$form.createForm(this),
                record: {},
                plainOptions: [],
                checkedList: [],
            };
        },
        computed: {
            subjectText() {
                return (data) => {
                    let str = '', arr = []
                    if (data && data.length > 0 && data != null) {
                        data.forEach(item => {
                            arr.push(item.educationCategory + item.discipline)
                        })
                        str = arr.toString();
                        return str
                    } else {
                        return '';
                    }
                }
            }
        },
        mounted() {
            this._RoleGetAll();
        },
        methods: {
            //获取所有角色
            _RoleGetAll() {
                let data = {
                    KeyWord: '',
                    SkipCount: 0,
                    MaxResultCount: 99999,
                }
                RoleGetAll(data).then(res => {
                    console.log(res, '角色列表')
                    res.items.forEach((item) => {
                        item.label = item.displayName;
                        item.value = item.normalizedName;
                    });
                    this.plainOptions = res.items;
                })
            },
            showModal(record) {
                console.log(record, 'record')
                this.visible = true;
                this.record = record;
                this.checkedList = record.roleNames;
            },
            closeBtn() {
                this.checkedList = [];
                this.visible = false;
            },
            handOK(e) {
                var _self = this;
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.confirmLoading = true;
                        let params = [];
                        this.checkedList.forEach(item => {
                            this.plainOptions.forEach(v => {
                                if (item == v.normalizedName) {
                                    params.push(v.name)
                                }
                            })
                        })
                        console.log(params, 'params')
                        UserSetRoles(params, {
                            userId: _self.record.id,
                        }).then((res) => {
                            _self.$message.success("重置成功！");
                            _self.closeBtn();
                            _self.$parent._UserGetAll();
                            this.confirmLoading = false;
                        }).catch(err => {
                            this.confirmLoading = false;
                        });
                    }
                });
            },
            onChange(value) {
                console.log(value);
            },
        },
        beforeDestroy() { },
    };
</script>
<style scoped>
    .file-row {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
</style>