<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="departmentTreeRef">
            </el-tree>
        </div>
        <div class="department-role-rg clear-float">
            <div class="rg-header pl-15">可查看人员</div>
            <div class="rg-table pl-15 pr-15">
                <el-table
                    stripe
                    border
                    :height="tableHeight"
                    :data="userList"
                    style="width: 100%">
                    <el-table-column
                        label="姓名">
                        <template slot-scope="scope">
                            <span v-if="scope.row.name === null || scope.row.name === ''">暂无</span>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="职位">
                        <template slot-scope="scope">
                            <span v-if="scope.row.post === null || scope.row.post === ''">暂无</span>
                            <span v-else>{{scope.row.post}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="工号">
                        <template slot-scope="scope">
                            <span v-if="scope.row.no === null || scope.row.no === ''">暂无</span>
                            <span v-else>{{scope.row.no}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="手机">
                        <template slot-scope="scope">
                            <span v-if="scope.row.contact === null || scope.row.contact === ''">暂无</span>
                            <span v-else>{{scope.row.contact}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="邮箱">
                        <template slot-scope="scope">
                            <span v-if="scope.row.email === null || scope.row.email === ''">暂无</span>
                            <span v-else>{{scope.row.email}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!--<div class="pagination-pack" style="text-align: center;">-->
                    <!--<el-pagination-->
                        <!--background-->
                        <!--@size-change="sizeChange"-->
                        <!--@current-change="currentChange"-->
                        <!--:current-page="currentPage"-->
                        <!--:page-sizes="[20, 50, 100, 200]"-->
                        <!--:page-size="size"-->
                        <!--layout="prev, pager, next, sizes, jumper"-->
                        <!--:total="total">-->
                    <!--</el-pagination>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // 树型结构高度
                treeHeight: {},
                userList: [],
                total: 4,                           // 数据总数
                currentPage: 1,                     // 开始页面
                size: 20,                           // 当前页面显示条数
                viewHeight: 0,
                tableHeight: 0,
                filterText: '',
                departmentTreeList: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        methods: {
            filterNode (value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            // 2、页数事件
            currentChange (currentPage) {
                this.currentPage = currentPage;
                // this.getDataPermissionList();
            },
            // 3、个数事件
            sizeChange (size) {
                this.size = size;
                this.currentPage = 1;
                // this.getDataPermissionList();
            },
            // 获取所有的用户组
            geDepartmentLine () {
                let query = {
                    userId: this.userId
                };
                this.$store.dispatch('UserView/getDataDepartment', query).then((resData) => {
                    this.departmentTreeList = _.cloneDeep(resData)
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            },
            // 获取所有的用户数据权限
            getDataPermissionList () {
                let query = {
                    userId: this.userId
                };
                this.$store.dispatch('UserView/getDataPermissionList', query).then((resData) => {
                    this.userList = _.cloneDeep(resData)
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            }
        },
        props: {
            userId: {
                required: true
            }
        },
        watch: {
            userId (val) {
                this.geDepartmentLine();
                this.getDataPermissionList();
            }
        },
        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 - 383}px`;
            }, 0);
        }
    }
</script>

<style lang="scss" scoped>
    $border: 1px solid #d2d3d5;

    .department-role-page {
        width: 100%;
        position: relative;

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

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

            .rg-header {
                height: 38px;
                line-height: 38px;
                font-weight: bold;
                border-bottom: $border;
            }

            .rg-table {
                margin-top: 15px;

                .pagination-pack {
                    margin-top: 7px;
                }
            }
        }
    }
</style>
