<template>
    <div class="role">
        <el-row>
            <el-col :span="24">
                <div class="content">
                    <p class="title">角色管理</p>
                    <p class="search">
                        <span class="searchVal">
                            <span>角色名称：</span>
                            <el-input v-model="searchVal" size="medium" placeholder="请输入"></el-input>
                        </span>
                        <span class="button" @click="search">搜索</span>
                        <span class="button new" @click="addrole">新增角色</span>
                    </p>
                    <div class="common-table">
                        <el-table
                                highlight-current-row
                                max-height="840"
                                :data="allData"
                                stripe
                                style="width: 100%;margin-bottom: 10px;">
                            <el-table-column
                                    prop="name"
                                    label="角色"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="id"
                                    label="人员"
                                    align="center">
                                <template slot-scope="scope">
                                    <span class="change" @click="readPerson(scope.row)"><img src="./img/look.png">查看</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="authorityList"
                                    label="权限"
                                    align="center">
                                <template slot-scope="scope">
                                    <span class="change" @click="readAuthority(scope.row)"><img src="./img/look.png">查看</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- 分页 -->
                    <div class="block" v-if="this.totleLength >= 10">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage"
                                :page-size="pagesize"
                                background
                                layout="prev, pager, next"
                                :total="totleLength">
                        </el-pagination>
                    </div>
                    <!-- 分页 -->
                </div>
            </el-col>
        </el-row>
        <!-- 新增 / 编辑 公用弹窗 -->
        <el-dialog :visible.sync="openModel" class="model">
            <img src="../../../assets/img/close.png" class="closeModel" @click="reset()">
            <component :is="components" :name="rolename" :list="roleList" @on-cancel="reset" @on-name="getName"></component>
        </el-dialog>
    </div>
</template>

<script>
import newRole from './newRole';
import authority from './authority'
export default {
    data () {
        return {
            searchVal: '',
            currentPage: 1, // 分页第一页
            pagesize: 8,  // 每页个数
            totleLength: 0, // 获取后台传的所有数据的长度
            openModel: false, // 弹框开关
            components: '', // 当前弹框内容
            rolename: '', // 角色名称
            roleList: '', // 角色内容
            allData:[] // 列表内容
        }
    },
    created() {
    },
    mounted(){
        let val = this.$store.getters.getSidebar;
        if (val[val.length - 1].path !== 'role') {
            val.push(
                {
                    name: '角色管理',
                    path: 'role'
                }
            )
            this.$store.commit('changeSidebar', val);
        }
        this.init()
    },
    methods: {
        // 初始请求
        init() {
            let val;
            if (this.searchVal !== '') {
                val = {
                    'page': this.currentPage,
                    'pageSize': this.pagesize,
                    't': {
                        'name': this.searchVal
                    }
                }
            } else {
                val = {
                    'page': this.currentPage,
                    'pageSize': this.pagesize
                }
            }
            this.$server.postsearch(val).then((res) => { // 数据请求
                if (res.data.code === 200) {
                    this.allData = res.data.data.rows;
                    this.totleLength = res.data.data.total;
                }
            })
        },
        // 搜索栏
        search() {
            this.init();
        },
        // 点击分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        // 当前页数
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.init();
        },
        // 添加角色
        addrole() {
            this.openModel = true;
            this.components = 'newRole';
        },
        // 关闭弹框
        reset() {
            this.init();
            this.openModel = false;
            this.components = '';
            this.rolename = '';
            this.roleList = '';
        },
        // 查看权限
        readAuthority(row) {
            this.openModel = true;
            this.components = 'authority';
            this.roleList = row;
        },
        // 获取角色名称
        getName(val) {
            if (val !== '') {
                this.rolename = val;
                this.components = 'authority';
            }
        },
        // 跳转到人员列表
        readPerson(row) {
            this.$router.push({name: 'person',params:{'value': row}});
        }
    },
    components: {
        newRole,
        authority
    },
    watch: {
    }
}
</script>
<style scoped>
    .role{
        background: #ebf0f8;
        width: 100%;
    }
    .role .content{
        margin: 40px;
        height: 841px;
        background: #fff;
        overflow: hidden;
    }
    .role .content .title{
        padding: 30px 0 0 60px;
        font-size: 20px;
        color: #233b6e;
    }
    .role .content .search{
        position: relative;
        margin-top: 36px;
        padding: 0px 70px 0px 70px;
        display: flex;
    }
    .role .content .searchVal{
        width: 280px;
        display: flex;
        font-size: 18px;
        color: #4663a6;
    }
    .role .content .searchVal>span{
        width: 140px;
        display: inline-block;
        line-height: 34px;
    }
    .role .content .change{
        color: #4877e6;
        cursor: pointer;
    }
    .role .content .change>img{
        margin-right: 3px;
    }
    .role .content .common-table{
        box-shadow: 4px 4px 5px rgba(72,119,230,0.1);
        border: .5px solid transparent;
        border-radius: 10px;
    }
    .role>>>.el-input__inner{
        border: 1px solid rgba(8,104,157,.3);
        border-radius: 2px;
        font-size: 18px;
        color: #999;
        height: 34px;
        line-height: 34px;
        width: 180px;
    }
    .role .content .button{
        display: inline-block;
        width: 100px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background: #4877e6;
        cursor: pointer;
        margin-left: 100px;
        border-radius: 2px;
        color: #fff;
        font-size: 18px;
    }
    .role .content .button:hover{
        background: rgba(72,119,230,.6);
    }
    .role .content .new{
        position: absolute;
        right: 70px;
    }

    /*表格样式*/
    .role .content .common-table{
        margin: 24px 70px 0 70px;
    }
    .role .content .common-table>>>.el-table th > .cell{
        font-size: 18px;
        color: #333;
        font-weight: normal;
    }
    .role .content .common-table>>>.el-table th.is-leaf{
        height: 70px;
    }
    .role .content .common-table>>>.el-table tr{
        font-size: 18px;
    }
    .role .content .common-table>>>.el-table{
        color: #233b6e;
    }
    .role .content .common-table>>>.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
        background-color: #fff;
    }
    .role .content .common-table>>>.el-table--enable-row-hover .el-table__body tr:hover>td{
        background-color: #f5f8fd;
    }
    .role .content .common-table>>>.el-table th.is-leaf, .el-table td {
        border-bottom: 1px solid #d5e3ff;
    }
    .role .content .common-table>>>.el-table__body tr, .el-table__body td {
        padding: 0;
        height: 60px;
        background: #f5f8fd;
    }
    .role .content .block{
        text-align: right;
        padding: 30px 70px 0 0;
    }
    .role .content>>>.el-pagination.is-background .el-pager li{
        background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
        color: #fff;
    }
    .role .content>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
        background-image: linear-gradient(to bottom, #7a9eeb,#274acf);
        color: #fff;
    }
    .role .content>>>.el-table td{
        border-bottom: 1px solid #d5e3ff;
    }
    .role .content>>>.btn-prev,.role .content>>>.btn-next{
        background: #c5d5f7;
        background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
        color: #fff;
    }
    .role .content>>>.btn-prev:disabled,.dynamicList .content>>>.btn-next:disabled{
        color: #C0C4CC;
    }
    .role .content>>>.el-table__body tr.current-row > td{
        background: #f5f8fd;
    }
</style>
