<template>
    <div class="container">
        <div class="header">
            <el-button ref="buttonFocus" class="onlineUser" @click="activeShow()">
                <i class="el-icon-user-solid"></i>在用账户
            </el-button>
            <el-button class="disableUser" @click="deactiveShow()">
                <i class="el-icon-user"></i>停用账户
            </el-button>
                <el-input class="searchBox" v-model="input" placeholder="用户名；手机；单位" suffix-icon="el-icon-search"></el-input>
            <el-button class="addUser">
                <i class="el-icon-user"></i>添加用户
            </el-button>
        </div>
        <div class="showTable">
            <activeuser v-show="show"></activeuser>
            <deactiveuser v-show="show1"></deactiveuser>
        </div>
    </div>
</template>

<script>
import activeuser from './tables/activeUser'
import deactiveuser from './tables/deactiveUser'
import table3 from './tables/table3'
import userinfo from './messageDialog/userInfo'


export default {
    name: "personManagement",
    components: { activeuser, deactiveuser, table3, userinfo, },
    data() {
        return {
            input: '',
            tabledata: [],
            show: true,
            show1: false,
            total: 0,
            currentPage: 1
        };
    },
    methods: {
        activeShow() {
            this.show = true;
            this.show1 = false;
            this.$refs.buttonFocus.$el.focus();
        },
        deactiveShow() {
            this.show = false;
            this.show1 = true;
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    position: fixed;
    left: 218px;
    top: 77px;
    right: 16px;
    height: -webkit-fill-available;
    margin-bottom: 20px;
    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 {
        height: 59px;
        left: 218px;
        top: 125px;
        right: 16px;

        .onlineUser {
            position: absolute;
            top: 15px;
            left: 20px;
            bottom: 4px;
            width: 100px;
            height: 35px;
            line-height: 20px;
            border-radius: 20px;
            background-color: #FFFFFF;
            color: #C8C8C8;
            font-size: 14px;
            text-align: center;
            padding: 5px;
        }
        .onlineUser:focus{
            background-color: #2EA8E6;
            color:#FFFFFF;
        }

        .disableUser {
            position: absolute;
            top: 15px;
            left: 135px;
            bottom: 4px;
            width: 100px;
            height: 35px;
            line-height: 20px;
            border-radius: 20px;
            background-color: #FFFFFF;
            color: #C8C8C8;
            font-size: 14px;
            text-align: center;
            padding: 5px;
        }
        .disableUser:focus{
            background-color: #2EA8E6;
            color:#FFFFFF;
        }

        .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;
            } 
        }

        .addUser {
            position: absolute;
            right: 16px;
            top: 15px;
            width: 100px;
            height: 35px;
            background-color: #2EA8E6;
            color: #FFFFFF;
            font-size: 14px;
            text-align: center;
            padding: 5px;
            border-radius: 5px;
        }
    }

    .showTable {
        padding: 10px 16px 0 20px;
        //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    }
}
</style>