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

.assignpmsdlg {
    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="assignpmsdlg">
        <el-tree ref="permissionTree" :check-strictly="true" default-expand-all show-checkbox node-key="id"
            :data="tableData.listData.items" :props="{ label: 'name' }" />
        <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 { getPermissionList } from "@/api/user"
import { getRoleById, updateRole } from "@/api/user"
import { tranListToTreeData } from "@/utils"

export default {
    name: 'assignpmsdlg',
    props: {
        id: {
            type: Number,
            require: true,
            default: 0
        }
    },
    data: function () {
        return {
            tableData: {
                listData: {
                    items: [],
                }
            },
            roleData: {
                permissionList: [],//角色权限
            }

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

            let param = { page_num: pageNum, page_size: pageSize, order_by: "id" }
            getPermissionList(param).then((res) => {
                this.tableData.listData.items = tranListToTreeData(res.data)
            }).catch((err) => {
                this.$message({ message: err, type: 'error' })
            })
        },
        getRoleById() {
            let paramData = {}
            if (parseInt(this.id) <= 0) {
                return
            }
            paramData.id = parseInt(this.id)
            getRoleById(paramData).then((res) => {
                this.roleData.permissionList = res.data.permission.split(",")
                this.$refs.permissionTree.setCheckedKeys(this.roleData.permissionList)//回填tree组件数据
            }).catch((err) => {
                this.$message({ message: err, type: 'error' })
            })
        },
        hSubmit() { //对话框确定按钮响应函数
            const idList = this.$refs.permissionTree.getCheckedKeys()//获得勾选数据
            if (idList.length > 0) {
                this.updateRole(idList)
            }
        },
        updateRole(idList) {//修改
            let paramData = {}

            if (parseInt(this.id) <= 0) {
                return
            }

            paramData.id = parseInt(this.id)
            paramData.permission = idList.join(",")//将数组连接成逗号分隔的字符串
            updateRole(paramData).then(() => {
                this.$message.success('分配权限成功', '提示')
                this.hClose()
            }).catch((err) => {
                this.$message({ message: err, type: 'error' })
            })
        }
    }
}
</script>
