<template>
<div class='userlist-container'>
    <div class="all-count">
        <div class="online-user-count">
            在线人数 <span style="font-size:24px;color:#108eff;margin-left:12px;">{{userlist.length}}</span>
        </div>
        <div class="online-user-count">
            离线人数 <span style="font-size:24px;color:#108eff;margin-left:12px;">876</span>
        </div>
    </div>
    <div class="table-header">
        <div>在线人员</div>
        <div>电话</div>
        <div>状态</div>
        <div>时间</div>
    </div>

    <div class="user-list-content">
        <div class="user-item" v-for="(item,index) in userlist" :key="index">
            <div>{{item.name}}</div>
            <div>{{item.phone}}</div>
            <div><span style="color:greenyellow;font-weight: 1000;font-size:14px;">·</span> 在线</div>
            <div style="color:#F3A600;">32分钟</div>
        </div>
    </div>
</div>
</template>

<script>
import { getMethodCommon } from '../../../../api/common';


export default {
   components: {},

   data() {
    return {
        userlist:[]
    };
   },
   computed: {},
   watch: {},
   methods: {
    getOnlineUserList(){  // 获取在线人员用户数据
      getMethodCommon("/FireManagement/GetPointByUserType?pageIndex=1&pageSize=12&type=2").then(res=>{
        if(res.code == 200){
          this.userlist = res.data;
        }
      })
    },
   },
   created() {
   
   },
   mounted() {
    this.getOnlineUserList();
   },
   destroyed() {
   
   },
}
</script>

<style scoped>
.userlist-container{
    width:100%;
    height:100%;
    background:#272d39;
}
.all-count{
    width:100%;
    padding:40px 20px;
    padding-bottom:60px;
    background:#1d222b;
    color:#eee;
}

.all-count div{
    width:140px;
    height:32px;
    line-height:32px;
    border-left:2px solid #409eff;
    float:left;
    margin-right:40px;
    text-indent: 20px;
    box-shadow: 0px 0px 5px #1d222b;
}

.table-header{
    width:100%;
    height:40px;
    background:#272d39;
    display: flex;
    flex-direction:row;
    margin:12px 0px;
}
.table-header div{
    flex:1;
    text-align: center;
    line-height:40px;
}

.user-list-content {
    width:100%;
    height: calc(100% -  185px);
    overflow-y: auto;
    padding:0px 10px;
}
.user-list-content .user-item{
    width:100%;
    height:60px;
    background:#1d222b;
    display: flex;
    flex-direction:row;
    margin:6px 0px;
    position: relative;
}

.user-list-content .user-item::after{
    content:"";
    position:absolute;
    bottom:0px;
    right:0px;
    border-left:8px solid #1d222b;
    border-top:8px solid #1d222b;
    border-right:8px solid #409eff;
    border-bottom:8px solid #409eff;
    width:0px;
    height:0px;
}
.user-list-content .user-item div{
    flex:1;
    text-align: center;
    line-height:60px;
    color:#fff;
    font-size:12px;
}


::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
  background-color: rgba(0,0,0,0.2);
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
  background-color: rgba(0, 0, 0, 0.5);
}


</style>