<template>
    <div class="personnelRole" :style="pageHeight">
        <div class="personnelRoleBtn" :style="MainHeight">
            <p class="titleSty">用户统计</p>
            <div class="fileSeach">
                <div class="exceed">
                    <span style="margin-top: 3px;;width:100px">用户名称：</span>
                    <el-input v-model="usernames" placeholder="请输入用户名称"></el-input>
                </div>
                <el-button type="primary" style="margin-left: 10px;" @click="getSeachData">搜索</el-button>
                <el-button style="margin-left: 10px;" @click="reset">重置</el-button>
            </div>
            <el-collapse v-model="activeName" accordion>
                <el-collapse-item v-for="(item,index) in userMap" :key="index" :name="index">
                    <template #title>
                        <span style="width:180px;display:inline-block;font-size:16px;font-weight:600;">{{item.userName}}</span>
                        <span style="font-weight:600">登录次数：</span>
                        <span style="color:red">{{item.loginNumber}}</span>
                    </template>
                    <div class="personnelRoleTableData">
                        <el-table :data="item.sysLogininfors" border style="width: 100%">
                            <el-table-column label="用户名称">
                                <template #default="scope">
                                    <span>{{scope.row.loginName}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="登录时间">
                                <template #default="scope">
                                    <span>{{scope.row.loginTime}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="登录时长">
                                <template #default="scope">
                                    <span>{{scope.row.loginDuration ? showDuration(scope.row.loginDuration) : '正在登录或未正常退出'}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item>
            </el-collapse>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-size="page.pagesize"
                layout="total, prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { apiGetuserList } from '../../api/api'
export default {
    data() {
        return {
            userMap: {},
            activeName: '1',
            usernames: '',
            page:{
                pagesize: 13,
                currentPage: 1,
                total: 0
            }
        }
    },
    computed: {
        pageHeight() {
            return {
                'height': document.documentElement.clientHeight-100 + 'px'
            }
        },
        MainHeight() {
            return {
                'height': document.documentElement.clientHeight-120 + 'px'
            }
        }
    },
    mounted() {
        this.getuserList()
    },
    methods:{
        getSeachData() {
            this.page.currentPage = 1
            this.getuserList('sea')
        },
        reset() {
            this.usernames = ''
            this.getuserList()
        },
        getuserList(type) {
            let that = this
            let params = {
                pageNum: that.page.currentPage,
                pageSize: that.page.pagesize
            }
            if (type) {
                params.userName = that.usernames
            }
            apiGetuserList(params).then(datas =>{
                if (datas && datas.rows) {
                    that.userMap = datas.rows
                    that.page.total = datas.total
                }
            })
        },
        showDuration(time) {
            let hour = ''
            let min = ''
            let ss = ''
            if (time > 3600) {
                hour = Math.floor(time/3600)
                min = Math.floor(time%3600)
                if (min > 60) {
                    let mins = Math.floor(min/60)
                    let sss = Math.floor(min%60)
                    min = mins
                    ss = sss
                } else {
                    min = 0
                    ss = Math.floor(time%3600)
                }
            } else {
                hour = 0
                if (time > 60) {
                    min = Math.floor(time/60)
                    ss = Math.floor(time%60)
                } else {
                    min = 0
                    ss = time
                }
            }
            return hour + '时' + min + '分' + ss + '秒'
        },
        handleSizeChange(val){
            this.page.pagesize = val
            if (this.usernames != '') {
                this.getuserList('sea')
            } else {
                this.getuserList()
            }
        },
        handleCurrentChange(val){
            this.page.currentPage =val
            if (this.usernames != '') {
                this.getuserList('sea')
            } else {
                this.getuserList()
            }
        }
    }
}
</script>

<style lang="less">
.personnelRole{
    width: calc(100% - 20px);
    padding: 10px 0 10px 20px;
    background: #edeffb;
    border-radius: 10px;
    .personnelRoleBtn{
        width: calc(100% - 60px);
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
        padding: 20px 20px 0 20px;
        overflow-y: auto;
        .fileSeach{
            display: flex;
            margin:20px;
                .exceed{
                    display: flex;
                    margin-right:20px;
                    .el-select{
                        width: 200px;
                        margin-right:10px;
                        .el-input__inner{
                            line-height:30px;
                        }
                        .el-input__suffix{
                            .el-select__caret{
                                line-height:30px;
                            }
                        }
                    }
                    .el-input__inner{
                        height:30px;
                    }
                }
        }
        .titleSty{
            border-left: 4px solid #2996da;
            padding-left: 5px;
            font-size: 14px;
            margin-left:20px;
        }
        span{
            font-size:14px;
        }
        .personnelRoleBtns{
            padding-left: 10px;
        }
        .el-select{
            width: 160px;
            margin-right:10px;
            .el-input__inner{
                height:30px;
            }
            .el-input__suffix{
                .el-select__caret{
                    line-height:30px;
                }
            }
        }
        .el-button{
            height: 30px;
            // width:100px;
            padding: 0 30px ;
            // padding-top: 8px;
            span{
                margin:0;
            }
        }
        .el-pagination{
            margin: 20px 0;
            text-align: end;
            position: relative;
        }
        .el-collapse{
                margin: 0 20px 30px 20px;
                .personnelRoleTableData{
                    padding: 10px 20px;
                    .el-table{
                    .el-table__body-wrapper{
                        max-height:400px;
                        overflow-y: auto;
                        .el-table__empty-block{
                        height: 550px !important;
                        }
                    }
                    .el-input__inner{
                        height: 30px !important;
                    }
                    .el-radio__label{
                        display: none;
                    }
                    .el-button{
                        height: 20px !important;
                        padding: 0;
                    }
                    }
                    .el-pagination{
                        margin-top: 20px;
                        text-align: end;
                        position: relative;
                    }
                }
        }
    }
    .el-dialog__wrapper{
        .el-dialog{
                margin-top: 18vh !important;
            .el-dialog__body{
                padding: 30px 60px 30px 20px !important;
            }
        }
        .personnelRoleFrom{
            .el-select, .el-input{
                width: 100%;
            }
            .el-date-editor{
                width: 100%;
            }
        }
    }
}
</style>