<style lang="scss">
@import '@/styles/index.scss'; //导入样式

.assignroledlg {
    width: 100%;
    margin: auto;

    &__item {
        width: 100%;
        display: flex;

        &-left {
            flex: 1;
        }

        &-right {
            flex: none;
            width: 100px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-left: 15px;
            text-align: right;
        }
    }
}
</style>

<template>
    <div class="assignroledlg">
        <el-checkbox-group v-model="roleData.checkedList">
            <el-checkbox :label="item.id" :key="item.id" v-for="(item) in tableData.listData.items">{{ item.name
                }}</el-checkbox>
        </el-checkbox-group>
        <div style="padding-top: 10px;text-align:right">
            <el-button type="success" @click="hSubmit">确定</el-button>
            <el-button type="warning" @click="hClose">取消</el-button>
        </div>
    </div>
</template>

<script>
import { getRolePageList } from "@/api/user"
import { getOperatorById, updateOperator } from "@/api/user"

export default {
    name: 'assignroledlg',
    props: {
        id: {
            type: Number,
            require: true,
            default: 0
        }
    },
    data: function () {
        return {
            tableData: {
                listData: {
                    items: [],
                }
            },
            roleData: {
                checkedList: [],//选择项列表
            }

        }
    },
    watch: {
    },
    computed: {
        controlSize() {
            return this.$store.getters.controlSize
        }
    },
    mounted() {
        this.$nextTick(function () {
            this.init()
        })
    },
    methods: {
        init() {
            this.getRolePageList()
            this.getOperatorById()
        },
        hClose() {//关闭对话框
            this.$emit("closeAssign")
        },
        getRolePageList() {//获得项目资料
            let pageNum = 1
            let pageSize = 1000

            let param = { page_num: pageNum, page_size: pageSize, order_by: "id" }
            getRolePageList(param).then((res) => {
                this.tableData.listData.items = res.data.items
            }).catch((err) => {
                this.$message({ message: err, type: 'error' })
            })
        },
        getOperatorById() {
            if (this.id <= 0) {
                return
            }

            let paramData = {}
            paramData.id = parseInt(this.id)
            getOperatorById(paramData).then((res) => {
                this.roleData.checkedList = res.data.role.split(",").map(Number)
            }).catch(err => {
                this.$message({ message: err, type: 'error' })
            })

        },
        hSubmit() {
            this.updateOperator()
        },
        updateOperator() {
            if (this.id <= 0 || this.roleData.checkedList.length <= 0) {
                return
            }

            let paramData = {}
            paramData.id = parseInt(this.id)

            let roleList = []
            this.roleData.checkedList.forEach(element => {
                let tmp = parseInt(element)
                if (tmp > 0) {
                    roleList.push(tmp)
                }
            })


            paramData.role = roleList.join(",")
            updateOperator(paramData).then(() => {
                this.$message.success('分配角色成功', '提示')
                this.hClose()
            }).catch(err => {
                this.$message({ message: err, type: 'error' })
            })
        }
    }
}
</script>
