<template>
    <div class="person">
        <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="searchVal">
                            <span>角色：</span>
                            <el-select v-model="searchRole" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in roleList"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </span>
                        <span class="searchVal">
                            <span>单位：</span>
                            <el-select v-model="searchUnit" placeholder="请选择" clearable>
                                <el-option
                                        v-for="item in unitList"
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </span>
                        <span class="button" @click="search">搜索</span>
                        <span class="button new" @click="addperson">新增人员</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="roleName"
                                    label="角色"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="unitName"
                                    label="单位"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="number"
                                    label="联系方式"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="查看"
                                    align="center">
                                <template slot-scope="scope">
                                    <span class="change" @click="read(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" @on-cancel="reset" :roleList="roleList" :unitList="unitList"></component>
        </el-dialog>
    </div>
</template>

<script>
import add from './addPerson';
export default {
    data () {
        return {
            currentPage: 1, // 分页第一页
            pagesize: 8,  // 每页个数
            totleLength: 0, // 获取后台传的所有数据的长度
            openModel: false, // 弹框开关
            components: '', // 当前弹框内容
            searchVal: '', // 搜索姓名
            searchRole: '', // 搜索角色
            searchUnit: '', // 搜索单位
            allData:[], // 列表内容
            roleList: [], // 角色列表
            unitList: [] // 单位列表
        }
    },
    created() {
    },
    mounted(){
        let val = this.$store.getters.getSidebar;
        if (val[val.length - 1].path !== 'person') {
            val.push(
                {
                    name: '人员管理',
                    path: 'person'
                }
            )
            this.$store.commit('changeSidebar', val);
        }
        this.$server.getRolefindAll().then((res) => { // 数据请求
            if (res.data.code === 200) {
                this.roleList = res.data.data;
                this.$server.getUnitfindAll().then((res) => { // 数据请求
                    if (res.data.code === 200) {
                        this.unitList = res.data.data;
                        if (this.$route.params.value !== undefined) { // 角色页面跳转过来所带参数
                            console.log(this.$route.params.value);
                            for (let item of this.roleList) {
                                if (item.name === this.$route.params.value.name) {
                                    this.searchRole = item.id
                                }
                            }
                        }
                        this.init()
                    }
                })
            }
        })
    },
    methods: {
        // 初始请求
        init() {
            let val;
            if (this.searchVal !== '' || this.searchRole !== '' || this.searchUnit !== '') {
                val = {
                    'page': this.currentPage,
                    'pageSize': this.pagesize,
                    't': {
                        'name': this.searchVal,
                        'roleId': this.searchRole,
                        'unitId': this.searchUnit
                    }
                }
            } else {
                val = {
                    'page': this.currentPage,
                    'pageSize': this.pagesize
                }
            }
            console.log(val);
            this.$server.postUserSearch(val).then((res) => { // 数据请求
                console.log(res.data.data)
                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();
        },
        // 关闭弹框
        reset() {
            this.init();
            this.openModel = false;
        },
        // 查看
        read(val) {
            this.$router.push({name: 'personPage',params:{'value': val}});
        },
        // 新增人员
        addperson() {
            this.openModel = true;
            this.components = 'add'
        }
    },
    components: {
        add
    },
    watch: {
    }
}
</script>
<style scoped>
    .person{
        background: #ebf0f8;
        width: 100%;
    }
    .person .content{
        margin: 40px;
        height: 841px;
        background: #fff;
        overflow: hidden;
    }
    .person .content .title{
        padding: 30px 0 0 60px;
        font-size: 20px;
        color: #233b6e;
    }
    .person .content .search{
        position: relative;
        margin-top: 36px;
        padding: 0px 70px 0px 70px;
        display: flex;
    }
    .person .content .searchVal{
        width: 280px;
        display: flex;
        font-size: 18px;
        color: #4663a6;
    }
    .person .content .searchVal>span{
        width: 66px;
        display: inline-block;
        line-height: 34px;
    }
    .person .content .searchVal:nth-child(2),.person .content .searchVal:nth-child(3){
        margin-left: 4%;
    }
    .person .content .change{
        color: #4877e6;
        cursor: pointer;
    }
    .person .content .change>img{
        margin-right: 3px;
    }
    .person .content .common-table{
        box-shadow: 4px 4px 5px rgba(72,119,230,0.1);
        border: .5px solid transparent;
        border-radius: 10px;
    }
    .person>>>.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;
    }
    .person>>>.el-select .el-input .el-select__caret{
        line-height: 25px;
    }
    .person .content .button{
        display: inline-block;
        width: 100px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background: #4877e6;
        cursor: pointer;
        margin-left: 30px;
        border-radius: 2px;
        color: #fff;
        font-size: 18px;
    }
    .person .content .button:hover{
        background: rgba(72,119,230,.6);
    }
    .person .content .new{
        position: absolute;
        right: 70px;
    }

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