<template>
    <div class="clockin-content">
        <div class="left-content">
            <!-- 筛选条件 -->
            <div class="filter-container">
                <el-cascader
                    v-model="areaId"
                    :options="orgs"
                    size="mini"
                    style="width:160px;margin-right:15px;"
                    :props="cascaderProps"
                    placeholder="请选择行政区划"
                    @change="handleChange">
                </el-cascader>
                <el-select v-model="listQuery.isonline"  @change="stateChange" placeholder="请选择在线状态" size="mini" style="width:160px;margin-right:15px;">
                    <el-option
                        v-for="item in stateOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                       
                        >
                    </el-option>
                </el-select>
                <!-- <el-button type="default" size="mini" @click="resetListQuery" icon="el-icon-refresh-left">重置</el-button> -->
                <el-button type="primary" size="mini" icon="el-icon-search" @click="getOnlineUserList()">查询</el-button>
            </div>
            <!-- 列表 -->
            <div style="height:calc(100% - 150px)">
                <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 style="flex:2;">操作</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="background-color:greenyellow;font-weight: 1000;font-size:14px;display: inline-block;width:10px;height:10px;border-radius: 50%;"></span>&nbsp;在线
                            </span>
                            <span v-else>
                                <span style="background-color:#f74d0a;font-weight: 1000;font-size:14px;display: inline-block;width:10px;height:10px;border-radius: 50%;"></span>&nbsp;离线
                            </span>
                            </div>
                            <div v-if="item.onLineTime == '0分钟前'">-&nbsp;-</div>
                            <div style="color:#F3A600;" v-else>{{item.onLineTime}}</div>
                            <div style="flex:2;">
                                <el-button type="primary" icon="el-icon-location-outline" size="mini" @click="toPosition(item)">位置</el-button>
                                <el-button type="primary" icon="el-icon-position" 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-size="listQuery.limit"
                            :page-sizes="[10, 20, 30, 50,100,200,500]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
                <!-- <userlist @toTrajectory="toTrajectory" @toPosition="toPosition"></userlist> -->
            </div>
            <!-- 分页 -->
        </div>

        <div class="right-content">
            <div class="map-container">
                <Map v-if="mapShow" :routerLine="routerLine" :currentStreet="currentStreet" :lnglat="lnglat" :listUpdate="listUpdate" @addClockInPoint="addClockInPoint" :listQuery="listQuery" @lookClockInData="lookClockInData" @editClockInData="editClockInData" :flyCenter="flyCenter" :trajectory="trajectory" :trajectoryIdRandom="trajectoryIdRandom" :rangePhone="rangePhone" :rangePhoneRandom="rangePhoneRandom"></Map>
            </div>
        </div>
    </div>
</template>

<script>
import { getMethodCommon, postMethodCommon } from '../../../api/common';
import Map from './widget/ditu.vue';
import clockInDia from './widget/clockIn.vue';
import { Main } from 'element-ui';
import { standardDeviationalEllipse } from '@turf/turf';
// import userlist from './widget/userlist.vue';
// import md5 from 'js-md5';
// alert(md5("fx13280580815").toUpperCase())
export default {
    components:{
        Map,
        // userlist
    },
    data(){
        return {
            onlineInfo:{},
            userlist:[],
            listQuery:{
                "page": 1,
                "limit": 500,
                "townname": "",
                "isonline": "全部"
            },
            total:0,
            clockInVisible:false,
            detailInfo:{},
            areaId:null,
            tasklist:[],
            clockDetail:{},
            clocklnglat:null,
            currentClockInfo:{
                lng:null,
                lat:null,
            },
            flyCenter:null,
            trajectory:null,
            trajectoryIdRandom:1,
            rangePhone:null,
            rangePhoneRandom:1,
            currentRouters:[],
            orgs:[],
            orgId:null,
            cascaderProps:{label:'name',value:'id',children:'child',checkStrictly: true},
            listUpdate:1,
            clockInList:[
           
            ],
            tabActive:1,
            cardDetailShow:false,
            currentStreet:"费县",
            onlineuserlistshow:false,
            mapShow:false,
            
            beginAndEndTime:[new Date(),new Date()],
            lnglat:null,
            routerLine:null,
            stateOptions:[
                {
                    label:"全部",
                    value:"全部"
                },{
                    label:"在线",
                    value:"在线"
                },{
                    label:"离线",
                    value:"离线"
                }
            ],
            userTimer:null,
        }
    },
    created(){
       
        let start = new Date();
        let end = new Date(start.getTime()-1000*60*60*24)
        this.beginAndEndTime = [end.getFullYear()+"-"+(end.getMonth()+1)+"-"+end.getDate()+" "+end.getHours()+":"+end.getMinutes()+":"+end.getSeconds(),start.getFullYear()+"-"+(start.getMonth()+1)+"-"+start.getDate()+" "+start.getHours()+":"+start.getMinutes()+":"+start.getSeconds()]

        this.gethlyList();

        
      if(this.userTimer){
        clearInterval(this.userTimer)
      }
      let _this = this;
      this.userTimer = setInterval(function(){
        _this.getOnlineUserList();
      },5000);

    },  
    methods:{
        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;
                }
            })
        },
        friendlyDate(time){
            if(time>60){
                return Math.ceil(time/60)+"小时前"
            }else{
                return time+"分钟前"
            }
        },
        handleSizeChange(e){
            this.listQuery.limit = e;
            this.getOnlineUserList();
        },
        handleCurrentChange(e){
            this.listQuery.page = e;
            this.getOnlineUserList();
        },

        toPosition(lnglat){
            this.lnglat = lnglat;
        },
        toTrajectory(userid){
            this.userid = userid;
            this.getRouteList(userid);
        },
        timeChange(e){
            
        },
        lookClockInData(val){
            this.lookClockInfo(val);
        },
        editClockInData(val){
            this.editClockInfo(val)
        },
        handleChange(e){
            if(e.length>1){
                this.listQuery.townname = e[1];
                this.currentStreet = e[1];
            }else if(e.length==1){
                this.currentStreet = e[0];
                this.listQuery.townname = "";
            }
            

            this.getOnlineUserList();
        },
        stateChange(e){
            this.listQuery.isonline = e;
            this.getOnlineUserList();
        },
        gethlyList(){  // 获取行政区划
            getMethodCommon("/FireGrid/LoadUsersArea").then(res =>{
                this.orgs = res.data;
                this.handleOrgs();
                // 设置当前乡镇县区名称
                if(this.orgs[0].child.length ==  1){
                    this.currentStreet = this.orgs[0].child[0].name;
                    this.listQuery.townname = this.currentStreet;
                    this.orgs[0].disabled = true;
                    this.areaId = ['费县',this.currentStreet]
                }else{
                    this.currentStreet = this.orgs[0].name;
                    this.areaId = ['费县']
                    this.listQuery.townname = "";
                }
                // 获取在线人员
                this.getOnlineUserList();
                // 展示地图
                this.mapShow = true;
            })
        },
        handleOrgs(orgs){
            for(let i=0;i<this.orgs[0].child.length;i++){
                this.orgs[0].id = this.orgs[0].name
                if(this.orgs[0].child[i]){
                    this.orgs[0].child[i].id = this.orgs[0].child[i].name
                    if(this.orgs[0].child[i].child){
                            this.orgs[0].child[i].child = null;
                        }
                    // for(let j=0;j<this.orgs[0].child[i].child.length;j++){
                        
                    // }
                }
                
            }
        },
        getTrajectoryData(item){
          
            this.trajectory = item;
            this.trajectoryIdRandom = Math.random();
        },
        getRange(phone){
            this.rangePhone = phone;
            this.rangePhoneRandom = Math.random();
        },
        clockInSuccess(){
            this.listUpdate = Math.random();
            this.clockInVisible = false;
            this.getTaskList();
        },
        addClockInPoint(e){
            this.clocklnglat = e;
            this.clockDetail = null;
            this.clockInVisible = true;
        },
        addSuccess(){

        },
        editClockInfo(item){
            this.clockDetail = item;
            this.clockInVisible = true;
        },
        lookClockInfo(item){
            this.currentClockInfo = item;
            this.flyCenter = [this.currentClockInfo.lng,this.currentClockInfo.lat];
            this.currentClockInfo.phones = item.userinfo && item.userinfo.split(",")
            this.currentClockInfo.users = item.usernames && item.usernames.split(",")
            this.currentRouters = [];
            // this.currentClockInfo.phones.forEach((item,index)=>{
            //     this.getRouteList(item);
            // })
            // this.getRouteList(item.userid);
            this.getClockInList(this.currentClockInfo.id);
            this.cardDetailShow = true;
        },
        getTaskList(){
            getMethodCommon("/FireGrid/GetCheckPoint",this.listQuery).then(res=>{
                if(res.code == 200){
                    this.tasklist = res.data;
                    if(this.tasklist.length>0){
                        this.currentClockInfo = this.tasklist[0];
                        // this.lookClockInfo(this.currentClockInfo);
                        this.flyCenter = [this.currentClockInfo.lng,this.currentClockInfo.lat];
                        this.currentClockInfo.phones = this.currentClockInfo.userinfo && this.currentClockInfo.userinfo.split(",")
                        this.currentClockInfo.users = this.currentClockInfo.usernames && this.currentClockInfo.usernames.split(",")
                    }
                    this.total = res.count;
                }
            })
        },
        getRouteList(item){

            let start = new Date();
            let end = new Date(start.getTime())
            let SAETime = [end.getFullYear()+"-"+(end.getMonth()+1)+"-"+end.getDate()+" 00:00:00",start.getFullYear()+"-"+(start.getMonth()+1)+"-"+start.getDate()+" "+start.getHours()+":"+start.getMinutes()+":"+start.getSeconds()]


            let query = {
                userId:item.createId,
                // userId:"8099b685-2477-45e1-abfe-1a49ce6a4fc3",
                beginTime:SAETime[0],
                endTime:SAETime[1],
            }
            getMethodCommon("/Patrol/LoadPatrolPointByTime",query).then(res=>{
                if(res.code == 200){
                    this.routerLine = res.data;
                    if(res.data.length==0){
                        this.$message({
                            type:"warning",
                            message:"暂无1小时内轨迹"
                        })
                        return null;
                    }
                }
            })
        },
        resetListQuery(){
            this.listQuery.page = 1;
            this.listQuery.limit = 50;
        },  
    }
}

</script>

<style scoped>
.clockin-content{
    width:100%;
    height: calc(100vh - 70px);
    padding:15px;
}

.sum-button{
    position:absolute;
    top:-30px;
    left:280px;
}

.left-content{
    width:42%;
    height:100%;
    background:#272d39;
    float:left;
    border-right:1px solid #636262;
    position:relative;
}
.filter-container{
    width:100%;
    padding:20px 20px 30px 20px;
    border-bottom:1px solid #636262;
}

.clock-item-container{
    width: calc( 100% - 10px);
    height: calc( 100% - 161px);
    padding:0px 15px;
    margin:15px 0px;
    color:#efefef;
    overflow: auto;
}


.clock-item{
    width:100%;
    height:150px;
    margin:10px 0px;
    padding:10px 15px;
    background:rgba(0,0,0,0.25);
}
.clock-item-icon{
    width:100px;
    height:80px;
    float:left;
}
.clock-item-icon img{
    width:80px;
    height:80px;
    margin-top:6px;
}
.clock-item-info{
    float:left;
    width: calc( 100% - 100px);
    height:100px;
    line-height:18px;
    font-size:12px;
}
.clock-item-info p{
    margin-bottom:0px;
    margin-top:10px;
}
.right-content{
    width: calc(58% - 1px);
    height:100%;
    float:right;
}

.online-user-list-container{
    width:400px;
    height:100px;
    overflow: hidden;
    position:absolute;
    bottom:15px;
    right:15px;
    z-index:10000;
}
.operation-button{
    width:80px;
    height:40px;
    position:absolute;
    top:0px;
    right:0px;
    color:#999;
    text-align: center;
    line-height:40px;
    cursor:pointer;
}

.addform-container{
    width:500px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.map-container{
    width:100%;
    height: 100%;
    background:#272d39;
    margin-bottom:15px;
}
.item-container{
    width:100%;
    height: 100%;
    float:left;
    background:#272d39;
    padding:30px;
    border-right:1px solid #636262;
    position:absolute;
    top:0px;
    left:0px;
}

.item-container-left{
    width:100%;
}

.item-container-right{
    width:100%;
    margin:0px 0px;
    padding:0px;
    position:relative;
}
.users-container{
    width:100%;
    padding-right:15px;
    height: calc(100vh - 440px);
    overflow-y:auto;
    margin-top:15px;
}
.clockIn-box{
    width:100%;
    height:80px;
    /* background:rgba(0,0,0,0.25); */
    border-bottom:1px solid #76838f;
    padding:5px;
    color:#efefef;
    border-radius:0px;
    margin-bottom:10px;
}
.item-container-right div{
    float:left;
}
.user-item{
    width:100%;
    padding:0px 0px;
    color:#fff;
    line-height:50px;
}
.history-line{
    width:100%;
    line-height:20px;
    margin-bottom:20px;
    text-indent:0px;
    cursor:pointer;
}
.history-line-button:hover{
    color:#108eff;
}
.history-line-button{

}
.user-item::after{
    content:"";
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
}

.user-photo{
    float:left;
    width:36px;
    height:36px;
    margin-top:6px;
    background-color:rgb(255, 255, 255);
    border-radius: 50%;
    line-height: 36px;
    text-align: center;
}
.user-photo img{
    width:32px;
    height:32px;
    margin:0px;
}
.user-name{
    width:70px;
    text-align: center;
    color:#fff;
}

.user-phone{
    width:100px;
    text-align: center;
}

.user-operation{
    float:right;
    
}

::v-deep .el-pagination__total{
    color:#fff;
}

::v-deep .el-pagination__jump{
    color:#fff;
}
::v-deep .el-descriptions__body{
    background:none;
    color:#fff;
}

::v-deep .el-descriptions-item__label.is-bordered-label{
    background:none;
}

::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell{
    border-color: #272d39;
}
::v-deep .el-divider__text{
    background:#272d39;
    color:#fff;
}
::-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);
}

::v-deep .el-descriptions-item__label.is-bordered-label{
    color:#efefef;
}

::v-deep .dialog-mini .el-dialog__header {
  background: rgba(10, 39, 78, 1);
}

::v-deep .dialog-mini .el-dialog__header .el-dialog__title {
  color: #fff;
}

::v-deep .el-dialog {
  background: rgba(10, 39, 78, 1);
}

::v-deep .el-loading-mask {
  background: rgba(0, 9, 34, 0.9);
}


::v-deep .el-input__inner {
    background: none;
    color: #fff;
    border-radius: 0px !important;
  }
::v-deep .el-range-editor--mini .el-range-input{
    background:none;
    color:#fff;
}

::v-deep .el-button{
    border-radius:0px;
}

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