<template>
    <div class="department-role-page" :style="{height: viewHeight + 'px'}">
        <div class="department-role-lf">
            <div class="lf-header pl-15">所属部门</div>
            <el-tree
                :style="treeHeight"
                class="filter-tree"
                :data="departmentTreeList"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree2">
            </el-tree>
        </div>
        <div class="department-role-rg clear-float">
            <div class="title-pack clear-float pl-15 pr-15">
                拥有角色
            </div>
            <div class="rg-role pl-15 pr-15">
                <div class="text" v-for="(item, index) in roleList" :key="index">
                    {{item.name}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // 树型结构高度
                treeHeight: {},
                viewHeight: 0,
                tableHeight: 0,
                filterText: '',
                roleList: [],
                departmentTreeList: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        methods: {
            filterNode (value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            // 获取所有的用户组
            geDepartmentLine () {
                let query = {
                    userId: this.userId
                };
                this.$store.dispatch('UserView/geDepartmentLine', query).then((resData) => {
                    this.departmentTreeList = _.cloneDeep(resData)
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 获取所有的角色列表
            getRoleList () {
                let query = {
                    userId: this.userId
                };
                this.$store.dispatch('UserView/getUserRoleList', query).then((resData) => {
                    this.roleList = _.cloneDeep(resData)
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            }
        },
        props: {
            userId: {
                required: true
            }
        },
        watch: {
            userId (val) {
                this.getRoleList();
                this.geDepartmentLine();
            }
        },
        mounted () {
            setTimeout(() => {
                // 树形结构高度
                this.treeHeight = {'height': `${document.querySelector('.view-list-page').offsetHeight - 332}px`};
                this.viewHeight = `${document.querySelector('.view-list-page').offsetHeight - 282}`;
                this.tableHeight = `${document.querySelector('.view-list-page').offsetHeight - 332}px`;
            }, 0);
        }
    }
</script>

<style lang="scss" scoped>
    .department-role-page {
        width: 100%;
        position: relative;

        .department-role-lf {
            position: absolute;
            width: 300px;
            height: 100%;
            border: 1px solid #d2d3d5;
            background-color: #fff;

            .lf-header {
                height: 38px;
                font-weight: bold;
                line-height: 38px;
                border-bottom: 1px solid #d2d3d5;
            }
        }
        .department-role-rg {
            margin-left: 310px;
            height: 100%;
            border: 1px solid #d2d3d5;
            background-color: #fff;

            .title-pack {
                height: 38px;
                line-height: 38px;
                font-weight: bold;
                border-bottom: 1px solid #d2d3d5;
            }

            .rg-role {
                margin-top: 15px;
                width: 100%;
                height: 100%;
                overflow: auto;

                .text {
                    /*margin: 15px auto;*/
                    float: left;
                    margin: 15px 15px 0 0;
                    font-size: 14px;
                    text-align: center;
                    width: 200px;
                    border-radius: 7px;
                    box-shadow: 0 1px 0 1px rgba(0,0,0,0.3);
                    height: 40px;
                    line-height: 40px;
                    background: #f1f1f1;
                }

                .item {
                    /*padding: 10px 0;*/
                }

                .box-card {
                    width: 480px;
                }
            }
        }
    }
</style>
