<template>
<div class='userlist-container'>
    <div class="all-count">
        <div class="online-user-count">
            在线人数 <span style="font-size:24px;color:#108eff;margin-left:12px;">{{onlineInfo.online}}</span>
        </div>
        <div class="online-user-count">
            离线人数 <span style="font-size:24px;color:#108eff;margin-left:12px;">{{onlineInfo.offline}}</span>
        </div>
    </div>
    <div class="table-header">
        <div>乡镇/村庄</div>
        <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.townName}}</div>
            <div>{{item.name}}</div>
            <div>
              <span v-if="item.state == '在线'">
                <span style="color:greenyellow;font-weight: 1000;font-size:14px;">·</span> 在线
              </span>
              <span v-else>
                <span style="color:rgb(247, 77, 10);font-weight: 1000;font-size:14px;">·</span> 离线
              </span>
            </div>
            <div style="color:#F3A600;">{{item.onLineTime}}分钟</div>
            <div>
                <el-button type="primary" size="mini" @click="toPosition(item)">位置</el-button>
                <el-button type="primary" size="mini" @click="toTrajectory(item)">轨迹</el-button>
            </div>
        </div>
    </div>
    <div class="page-container">
      <el-pagination
        size="mini"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
</div>
</template>

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


export default {
   components: {},

   data() {
    return {
        onlineInfo:{},
        userlist:[],
        listQuery:{
          "page": 1,
          "limit": 10,
          "townname": "",
          "isonline": "全部"
        },
        total:0,
    };
   },
   computed: {},
   watch: {},
   methods: {
    toPosition(item){
      this.$emit("toPosition",[parseFloat(item.lng),parseFloat(item.lat)]);
    },
    toTrajectory(item){
      this.$emit("toTrajectory",item.createId);
      this.getRouteList(item.createId);
    },
    getRouteList(userid){
        let query = {
            userId:userid,
            beginTime:this.beginAndEndTime[0],
            endTime:this.beginAndEndTime[1],
        }
        getMethodCommon("/Patrol/LoadPatrolInfoByUserIdNew",query).then(res=>{
            if(res.code == 200){
                console.log("routerrouter",res);
            }
        })
    },
    getOnlineUserList(){  // 获取在线人员用户数据
      postMethodCommon("/FireManagement/GetPointUserOnLine",this.listQuery).then(res=>{
        if(res.code == 200){
          this.userlist = res.data.userinfo;
          this.userlist.forEach((item,index)=>{
            // this.userlist[index].onLineTime = this.friendlyDate(item.onLineTime);
          })
          this.onlineInfo = res.data;
          this.total = this.onlineInfo.offline + this.onlineInfo.online;
        }
      })
    },
    handleSizeChange(e){
        this.listQuery.limit = e;
        this.getOnlineUserList();
    },
    handleCurrentChange(e){
        this.listQuery.page = e;
        this.getOnlineUserList();
    },
    friendlyDate(time) {
      console.log(time);
      if(time>60){
        return Math.ceil(time/60)+"时"+time%60+"分前";
      }
    }
   },
   created() {
   
   },
   mounted() {
    this.getOnlineUserList();
   },
   destroyed() {
   
   },
}
</script>

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

.all-count div{
    width:40%;
    height:32px;
    line-height:32px;
    border-left:3px solid #409eff;
    float:left;
    margin-left:20px;
    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% -  155px);
    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);
}

.page-container{
    width: calc( 100% - 24px);
    margin:0px auto;
    height:70px;
    border-top:1px solid #636262;
    padding:20px 0px;
    overflow-x: auto;
    overflow-y:hidden;
}


</style>