<template>
    <div class="container">
        <div class="header">
            <p class="info">角色总览</p>
            <el-input class="searchBox" placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
        </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" height="400" style="width: 98%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="rolename" label="角色名称">
            </el-table-column>
            <el-table-column prop="role_desc" label="角色描述">
            </el-table-column>
            <el-table-column prop="role_members" label="角色成员">
            </el-table-column>
            <el-table-column prop="associated_ORN" label="关联组织">
            </el-table-column>
            <el-table-column prop="operation" label="操作">
                <el-button size="mini" type="text">查看</el-button>
                <el-button size="mini" type="text">编辑</el-button>
                <el-button size="mini" type="text">删除</el-button>
            </el-table-column>
        </el-table>
        <div class="bottom">
            <div class="bottom_button" v-show="show">
                <el-button class="delete" type="text">批量删除</el-button>
            </div>
            <page class="page" :paginationData="paginationData"></page>
        </div>
    </div>
</template>

<script>
import page from '@/components/pagination/index'
export default {
    components: { page },
    data() {
        return {
            filterText: '',
            data: [{
                label: '决策组',
                children: [{
                    label: '决策组',
                }, {
                    label: '管理员组'
                }, {
                    label: '普通用户组'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableData: [{
                rolename: '决策组',
                role_desc: '描述',
                role_members: '300人',
                associated_ORN: '3家',
            }, {
                rolename: '决策组-1',
                role_desc: '描述',
                role_members: '300人',
                associated_ORN: '3家',
            }, {
                rolename: '决策组-2',
                role_desc: '描述',
                role_members: '300人',
                associated_ORN: '3家',
            }],
            multipleSelection: [],
            show: true,
            currentPageSize: 10,
            currentPage: 1,
            paginationData: {
                pageSize: 10,
                pagerCount: 5,
                currentPage: 1,
                pageSizes: [5, 10, 20, 30],
                total: 30,
                currentChange: (val) => {
                    this.getTableData(val);
                },
                handleSizeChange: (val) => {
                    this.handleSizeChange(val);
                },
            },
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },

    methods: {
        cancleChecked() {
            //
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleClick() {
            //
        },
        handleNodeClick() {

        },
        handleSelectionChange() {

        },
        getTableData() {
            this.tableData = [];
            //
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPageSize = val;
            this.getTableData(this.currentPage);
        },
    }
}
</script>
<style lang="less" scoped>
.container {
    position: relative;
    height: 100%;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

    .header {
        padding-top: 20px;
        .info {
            text-align: left;
            padding: 20px;
            font-size: 25px;
        }

        .searchBox {
            position: absolute;
            top: 15px;
            right: 141px;
            bottom: 11px;
            width: 350px;
            height: 35px;
            line-height: 20px;
            border-radius: 3px;
            background-color: #F7F9FA;
            color: #D7D8D8;
            font-size: 14px;
            text-align: center;

            /deep/.el-input__inner {
                height: 35px;
            }
        }
    }

    .el-table {
        position: relative;
        top: 10px;
        margin-left: 1%;
        border: 1px solid #f0f2f2;
        font-size: 0.95rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #b2b2b2;
        background: rgba(255, 255, 255, 0.8);

        /deep/th {
            background: #f7fbff;
        }

        /deep/.el-checkbox {
            color: #b2b2b2;

            .el-checkbox__input.is-checked+.el-checkbox__label {
                color: #2ea8e6;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner::after {
                width: 70%;
                height: 70%;
                background: #2ea8e6;
                border-radius: 0;
                transform: rotate(0deg) scaleY(1);
                position: static;
                // border: 1px solid #8DD9FF;
            }

            .el-checkbox__inner {
                border: 1px solid #8dd9ff;
                background: rgba(0, 170, 255, 0);
                display: flex;
                align-items: center;
                justify-content: center;
                position: static;

                &::after {
                    transition: 0ms;
                }
            }

            .el-checkbox__label {
                padding-left: 0;
                font-size: 15px;
                position: absolute;
                top: 1px;
                left: 25px;
            }
        }
    }

    .bottom {
        position: absolute;
        left: 330px;
        right: 16px;
        bottom: 20px;
        height: 50px;
        line-height: 20px;
        background-color: rgba(255, 255, 255, 1);
        text-align: center;

        .checkbox {
            position: absolute;
            left: 30px;
            top: 15px;
            font-size: 14px;
        }

        .check-cancel {
            position: absolute;
            // line-height: 20px;
            font-size: 14px;
            text-align: center;
            left: 140px;
            top: 10px;
        }

        .bottom_button {
            position: absolute;
            left: 200px;
            margin-top: 15px;

            .delete {
                font-size: 14px;
                text-align: center;
                padding: 1px;
            }
        }
    }
}
</style>