<template>
    <div class="authManage_container">
        <div class="auth_cont_top">
            <div>
                <span>角色</span>
                <el-select v-model="role" placeholder="请选择角色" style="width:360px;marginLeft:30px;">
                    <el-option v-for="item in roleList" :key="item.RoleId" :label="item.RoleName" :value="item.RoleId">
                    </el-option>
                </el-select>
            </div>
            <el-button type="primary" style="marginRight:50px;width:140px;" @click="saveAuth" v-if="!isLook">确定
            </el-button>
        </div>
        <div class="auth_bot">
            <div class="menu_auth_cont">
                <h3 style="color:#333;fontSize:14px;">权限设置</h3>
                <div class="auth-wrap">
                    <el-tree ref="checkboxTree" :data="authList" :props="{label:'Name',children:'Children',disabled:(node,data)=>{node.disabled=true}}"
                        :default-expand-all="false" show-checkbox node-key="MenuId"
                        :default-checked-keys="defaultCheckedKeys">
                    </el-tree>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {departInterence} from '@/api/api.js';
import {mockList} from './mock';
export default {
    name: '',
    components: {},
    data() {
        return {
            role: '', //角色
            roleList: [], //角色列表
            authList: [], //权限列表
            defaultCheckedKeys: [],
            loading: null, //loading
            isLook: false, //是否仅查看
        };
    },
    watch: {
        // 监测角色改变对应的权限也改变
        role() {
            this.loading = this.$loading({
                lock: true,
                target: '.authManage_container',
                text: '切换角色中...',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.8)'
            });
            this.getAuthList();
        }
    },
    methods: {
        /* 获取已有角色列表 */
        getRoles() {
            departInterence.getRole().then(res => {
                if (res.Ret === 200) {
                    this.roleList = res.Data.List;
                    if (res.Data.List.length && !this.role) {
                        this.role = res.Data.List[0].RoleId
                    }
                }
            })
        },
        /* 根据角色id获取已有权限 */
        getAuthList() {
            this.authList = mockList
            this.loading&&this.loading.close()
            /* departInterence.getRoleAuth({
                RoleId: Number(this.role)
            }).then(res => {
                if (res.Ret !== 200) return
                this.loading && this.loading.close()
                if (!res.Data) return
                const {
                    List,
                    ChoiceList = [],
                    HalfChoiceList = []
                } = res.Data
                this.authList = List || []
                this.defaultCheckedKeys = ChoiceList.filter((item) => !HalfChoiceList.some((halfItem) =>
                    item === halfItem))
            }) */
        },
        // 保存
        saveAuth() {}
    },
    created() {
        //只查看权限 不可编辑
        if (this.$route.query.id) {
            this.role = Number(this.$route.query.id);
            this.isLook = true;
        }
    },
    mounted() {
        this.getRoles();
    },
}
</script>
<style lang='scss'>
.authManage_container {
    * {
        box-sizing: border-box;
    }
    .auth_cont_top {
        font-size: 16px;
        color: #333;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        border: 1px solid #ECECEC;
        padding: 20px 30px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
        justify-content: space-between;
    }

    .auth_bot {
        min-height: calc(100vh - 224px);
        padding: 30px;
        background: #fff;
        margin-top: 20px;
        position: relative;
        border: 1px solid #ECECEC;
        border-radius: 4px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);

        .el-tree {
            border-top: 1px solid #E5E7ED;
            border-left: 1px solid #E5E7ED;
            border-right: 1px solid #E5E7ED;
            width: 98%;
            margin-bottom: 40px;

            .el-tree-node__label {
                margin: 10px;
            }

            .el-tree-node__content {
                min-width: 200px;
                width: 200px;
                white-space: normal;
                box-sizing: border-box;
            }

            .el-tree-node {
                .el-tree-node {
                    .el-tree-node__children {
                        width: 100%;
                    }

                    .el-tree-node {
                        &:not(:first-child) {
                            /* .el-tree-node__content{
                        border-right: 1px solid #E5E7ED;
                    } */
                            border-top: 1px solid #E5E7ED;
                        }

                        .el-tree-node__content {
                            border-right: 1px solid #E5E7ED;
                        }
                    }

                }
            }

            .el-tree-node__content {
                padding: 5px 10px !important;
                height: auto;

                .el-tree-node__expand-icon.el-icon-caret-right {
                    //display: none;
                }
            }

            >.el-tree-node {
                padding: 0 !important;
                display: flex;
                border-bottom: 1px solid #E5E7ED;

                >.el-tree-node__children {
                    width: 100%;

                    >.el-tree-node {
                        &:not(:first-child) {
                            border-top: 1px solid #E5E7ED;
                        }

                        >.el-tree-node__content {
                            border-left: 1px solid #E5E7ED;
                            border-right: 1px solid #E5E7ED;
                        }
                    }
                }
            }

            .el-tree-node__children {
                display: flex;
                flex-direction: column;

                .el-tree-node {
                    display: flex;
                    padding: 0px !important;

                    .el-tree-node__content {
                        border-bottom: none;

                        .custom-tree-node {
                            height: 24px;
                            display: flex;
                            align-items: center;

                            .tree-btn {
                                margin-left: 10px;
                                display: none;
                            }

                            .el-button {
                                padding: 0px !important;
                                border-radius: 4px;
                                background: #363554;
                                color: #ffffff;
                            }
                        }
                    }

                    .el-tree-node__children {
                        .el-tree-node {
                            &:not(:first-child) {
                                .el-tree-node__content {
                                    //border-left: none;
                                }
                            }
                        }
                    }
                }
            }
        }
        .auth-wrap{
            margin-top: 20px;
        }
    }
}
</style>