<template>
<div class='personal-info-container'>
    <div class="header">
        
        <span :style="{'color':tabActive == 1 ? '#409eff':'#fff','cursor':'pointer'}" @click="tabActive=1">巡查轨迹</span>
        &nbsp;&nbsp;&nbsp;&nbsp;  
        <span :style="{'color':tabActive == 2 ? '#409eff':'#fff','cursor':'pointer'}" @click="tabActive=2">打卡记录</span>

        <el-date-picker
            v-model="beginAndEndTime"
            size="mini"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
            style="width:360px;margin-left:100px;"
            value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>

        <span style="float:right;font-size:22px;" @click="$emit('close')">
            <i class="el-icon el-icon-close"></i>
        </span>

    </div>
    <div class="content-container">
        <div class="list-container">
            <div class="users-container" v-show="tabActive == 1">
                <div class="history-line" v-for="(it,idx) in list" :key="idx">
                    <div class="user-item">
                        <div class="user-photo">
                            <img src="/img/gridman/user.png" alt="">
                        </div>
                        <div class="user-name">{{it.name}}</div>
                        <div class="user-phone">{{it.phone}}</div>

                        <el-button type="primary" size="mini" round @click="getTrajectoryData(it)" style="float:right;">轨迹</el-button>
                        
                        <!-- <el-button type="primary" size="mini" round @click="getRange(it.phone)" style="float:right;position:relative;top:8px;left:-12px;">范围</el-button> -->
                    </div>
                    {{it.startAddress}} <span style="color:#ccc;font-size:12px;">({{it.startTime}})</span>
                    &nbsp;&nbsp;<img src="/img/go.png" style="width:28px;"/>&nbsp;&nbsp;
                    {{it.endAddress}} <span style="color:#ccc;font-size:12px;">({{it.endTime}})</span>
                </div>
            </div>

            <div class="users-container" v-show="tabActive == 2">
                <div class="clockIn-box" v-for="(item,idx) in clockInList" :key="idx">
                    <p><span style="color:rgb(204, 204, 204)"><i class="el-icon el-icon-user-solid"></i> 打卡人员：</span>{{ item.Name }}  <span style="color:rgb(204, 204, 204)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon el-icon-time"></i>打卡时间：</span>{{ item.clockontime }}</p>
                    <p><span style="color:rgb(204, 204, 204)"><i class="el-icon el-icon-location"></i> 打卡位置：</span>{{ parseFloat(item.lng).toFixed(6) }},{{ parseFloat(item.lat).toFixed(6) }}</p>
                </div>
            </div>
            <!-- <div class="page-container">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listQuery.pageIndex"
                    :page-sizes="[10,20, 30, 50, 100]"
                    :page-size="listQuery.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div> -->
        </div>

        <div class="map-contianer">
            <!-- <Map  :trajectoryIdRandom="trajectoryIdRandom" :trajectoryId="trajectoryId"></Map> -->
            <Map v-if="mapShow" :currentStreet="currentStreet"  :listQuery="listQuery" :flyCenter="flyCenter" :trajectory="trajectory" :trajectoryIdRandom="trajectoryIdRandom"></Map>
        </div>
    </div>  
</div>
</template>

<script>
import { postMethodCommon, getMethodCommon } from "../../../../api/common";
import Map from "./map.vue"
export default {
   components: {
    Map
   },
   props:["userid","currentStreet"],
   data() {
    return {
        tabActive:1,
        flyCenter:null,
        list:[],
        listQuery:{
            pageIndex:1,
            pageSize:10,
            phone:null,
        },
        total:null,
        trajectoryId:null,
        trajectoryIdRandom:1,
        beginAndEndTime:[new Date(),new Date()],
        mapShow:true,
        clockInList:[],
    };
   },
   computed: {},
   watch: {},
   methods: {
        // 获取打卡点数据
        getClockInList(pointid){
            let query = {
                userid:this.userid,
                beginTime:this.beginAndEndTime[0],
                endTime:this.beginAndEndTime[1],
            }
            getMethodCommon("/FireGrid/GetCheckInfoByUserId",query).then(res=>{
                if(res.code == 200){
                    this.clockInList = res.data
                }
            })
        },
        timeChange(e){
            this.getRouteList();
            this.getClockInList();
        },
        getRouteList(){
            let query = {
                userId:this.userid,
                beginTime:this.beginAndEndTime[0],
                endTime:this.beginAndEndTime[1],
            }
            getMethodCommon("/Patrol/LoadPatrolInfoByUserIdNew",query).then(res=>{
                if(res.code == 200){
                    this.list = res.data;
                }
            })
        },
        getTrajectoryData(item){
            this.trajectory = item;
            this.trajectoryIdRandom = Math.random();
        },
        handleSizeChange(e){
            this.listQuery.pageSize = e;
            this.getList();
        },
        handleCurrentChange(e){
            this.listQuery.pageIndex = e;
            this.getList();
        }
   },
   created() {
    let start = new Date();
    let end = new Date()
    this.beginAndEndTime = [end.getFullYear()+"-"+(end.getMonth()+1)+"-"+end.getDate()+" 00:00:00",start.getFullYear()+"-"+(start.getMonth()+1)+"-"+start.getDate()+" "+start.getHours()+":"+start.getMinutes()+":"+start.getSeconds()]

    this.getRouteList();
    this.getClockInList();
   },
   mounted() {
   
   },
   destroyed() {
   
   },
}
</script>
<!--  -->
<style scoped>
.personal-info-container{
    width:100%;
    height:100%;
}
.header{
    width:100%;
    height:70px;
    background:#2d3041;
    border-bottom:1px solid #777;
    line-height:70px;
    color:#fff;
    padding:0px 15px;
}

.page-container{
    padding-top:20px;
}
.content-container{
    width:100%;
    padding:20px;
    height: calc( 100% - 50px);
}

.list-container{
    width:60%;
    height:100%;
    float:left;
}

.users-container{
    width:100%;
    padding-right:15px;
    height: calc(100vh - 280px);
    overflow-y:auto;
}
.item-container-right div{
    float:left;
}
.user-item{
    width:100%;
    padding:0px 0px;
    color:#fff;
    height:50px;
    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:120px;
    text-align: center;
    color:#fff;
}

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

.user-operation{
    float:right;
    
}

.map-contianer{
    width:40%;
    height:100%;
    float:left;
}

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


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