<template>
    <div class="clockin-content">
        <!-- 在线人员 -->
        <div class="online-user-list-container" :style="{'height': onlineuserlistshow ? '500px':'100px'}" v-if="false">
            <div class="operation-button" @click="onlineuserlistshow = !onlineuserlistshow" >
                <span v-if="!onlineuserlistshow">
                    展开
                    <i class="el-icon el-icon-arrow-down"></i>
                </span>
                <span v-else>
                    收起
                    <i class="el-icon el-icon-arrow-up"></i>
                </span>
            </div>
            <userlist v-drag></userlist>
        </div>  

        <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-input type="text" v-model="listQuery.name" placeholder="请输入搜索关键字" style="width:160px;margin-right:15px;" size="mini" round></el-input>
                
                <!-- <el-button type="default" size="mini" @click="resetListQuery">重置</el-button> -->
                <el-button type="primary" size="mini" icon="el-icon-search" @click="getTaskList()">查询</el-button>
                <el-button type="primary" size="mini" icon="el-icon-pie-chart" @click="toStatic">统计</el-button>
                <el-button type="primary" size="mini" icon="el-icon-s-claim" @click="toRealTime">巡检</el-button>
                <!-- <el-button type="primary" size="mini" icon="el-icon-plus">创建任务</el-button> -->
            </div>
            <div class="clock-item-container">
                <div class="clock-item" v-for="(item,index) in tasklist" :key="index">
                    <div class="clock-item-icon">
                        <img src="/img/clockIn-bg.png" />
                    </div>
                    <div class="clock-item-info">
                        <p>打卡点名称：{{ item.pointname }}</p>
                        <p>创建时间：{{ item.createtime }}</p>
                        <p>负责人员：{{item.usernames}}</p>
                        <p style="text-align:right;">
                            <el-popconfirm
                            title="确定删除吗？"
                            @confirm="deleteTask(item.id)"
                            >
                                <el-button slot="reference" type="default" round size="mini" icon="el-icon-delete" style="margin-right:15px;">删除</el-button>
                            </el-popconfirm>
                            <el-button type="primary" round size="mini" icon="el-icon-edit" @click="editClockInfo(item)">编辑</el-button>
                            <el-button type="primary" round size="mini" icon="el-icon-location-outline" @click="lookClockInfo(item)">查看</el-button>

                        </p>
                    </div>
                </div>
            </div>
            <div class="page-container">
                <el-pagination
                size="mini"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="listQuery.pageIndex"
                :page-sizes="[5,10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
            <div class="item-container" v-if="cardDetailShow">
                <div style="padding:0px 0px 0px 0px;">
                    <el-button size="mini" type="primary" round icon="el-icon-back" @click="cardDetailShow = false;">返回</el-button>
                </div>
                <div class="item-container-left">
                    <el-divider content-position="left">打卡点信息</el-divider>
                    <el-descriptions class="margin-top"  :column="1" :size="'mini'" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                打卡点名称：
                            </template>
                            {{currentClockInfo.pointname}}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-time"></i>
                                创建时间：
                            </template>
                            {{currentClockInfo.createtime}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-place"></i>
                                打开点位置：
                            </template>
                            {{currentClockInfo.lng}},{{currentClockInfo.lat}}&nbsp;&nbsp;
                            <!-- <el-button type="primary" size="mini" round icon="el-icon-location-outline" @click="lookClockInfo(currentClockInfo)">定位</el-button> -->
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="item-container-right" >

                    <div style="padding:0px 20px;margin:0px 0px 15px 0px;position: absolute;top:10px;right:10px;background:#272d39;z-index:100000;" v-if="tabActive == 1">
                        <el-date-picker
                        v-model="beginAndEndTime"
                        size="mini"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="timeChange"
                        style="width:360px;"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        >
                        </el-date-picker>
                    </div>
                    

                    <el-divider content-position="left">
                        <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-divider>
                    

                    <div style="width:100%;text-align:center;padding:100px 0px;" v-if="currentRouters.length<=0 && tabActive == 1"> 
                        <img src="/img/no-data.png" style="width:140px;margin-bottom:20px;">
                        <p style="color:#cfcfcf">暂无巡查轨迹</p>
                    </div>

                    <div class="users-container" v-show="tabActive == 1">
                        <div class="history-line" v-for="(it,idx) in currentRouters" :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>
                                <el-button type="primary" size="mini" round @click="getTrajectoryData(it)" style="float:right;position:relative;top:8px;">轨迹</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.startTime}}
                            &nbsp;&nbsp;<img src="/img/go.png" style="width:28px;"/>&nbsp;&nbsp;
                            {{it.endTime}} 
                        </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>
            </div>
        </div>

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

        <!-- 添加打卡 -->
        <el-dialog
        width="40%"
        height="60%"
        top=" calc(50vh - 340px)"
        class="dialog-mini"
        v-el-drag-dialog
        title="打卡"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="clockInVisible"
        >
        <clockInDia
            :lnglat="clocklnglat"
            :clockdata="clockDetail"
            @clockInSuccess="clockInSuccess"
            @close="clockInVisible = false"
            v-if="clockInVisible"
        ></clockInDia>
        </el-dialog>

    </div>
</template>

<script>
import { getMethodCommon, postMethodCommon } from '../../../api/common';
import Map from './widget/ditu.vue';
import clockInDia from './widget/clockIn.vue';
import userlist from './widget/userlist.vue';

export default {
    components:{
        Map,
        clockInDia,
        userlist
    },
    data(){
        return {
            clockInVisible:false,
            detailInfo:{},
            listQuery:{
                pageSize:10,
                pageIndex:1,
                name:null,
                areaId:null,
            },
            areaId:null,
            total:0,
            tasklist:[],
            userlist:[],
            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()],
        }
    },
    created(){
       
        let start = new Date();
        let end = new Date(start.getTime()-1000*60*60*24*7)
        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.getTaskList();
        this.gethlyList();
    }, 
    methods:{
        timeChange(e){
            this.getRouteList();
        },
        // 获取打卡点数据
        getClockInList(pointid){
            getMethodCommon("/FireGrid/GetCheckInfoByPointId?pageIndex=1&pageSize=999&pointid="+pointid).then(res=>{
                if(res.code == 200){
                    this.clockInList = res.data
                }
            })
        },
        toStatic(){
            this.$router.push({'path':'/gridman_statistics'})
        },
        toRealTime(){
            this.$router.push({'path':'/gridman_realtime'})
        },
        // 
        lookClockInData(val){
            this.lookClockInfo(val);
        },
        editClockInData(val){
            this.editClockInfo(val)
        },
        handleChange(e){
            this.listQuery.areaId = e && e[e.length-1];
            this.getTaskList();
        },
        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.mapShow = true;
            })
        },
        handleOrgs(orgs){
            for(let i=0;i<this.orgs[0].child.length;i++){
                if(this.orgs[0].child[i]){
                    for(let j=0;j<this.orgs[0].child[i].child.length;j++){
                        if(this.orgs[0].child[i].child[j].child){
                            this.orgs[0].child[i].child[j].child = null;
                        }
                    }
                }
                
            }
        },
        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(userid){
            let query = {
                userId:this.currentClockInfo.userid,
                beginTime:this.beginAndEndTime[0],
                endTime:this.beginAndEndTime[1],
            }
            getMethodCommon("/Patrol/LoadPatrolInfoByUserIdNew",query).then(res=>{
                if(res.code == 200){
                    this.currentRouters = res.data;
                }
            })
        },
        resetListQuery(){
            this.listQuery.areaId= null;
            this.areaId = null;
            this.listQuery.name = null;
            this.listQuery.pageIndex = 1;
            this.listQuery.pageSize = 10;
            this.getTaskList();
        },  
        deleteTask(id){
            postMethodCommon("/FireGrid/DeleteCheckPoint?id="+id).then(res=>{
                if(res.code == 200){
                    this.$message({
                        type:"success",
                        message:res.message
                    })
                    this.listUpdate = Math.random();
                    this.getTaskList();
                }
            })
        },  
        handleSizeChange(e){
            this.listQuery.pageSize = e;
            this.getTaskList();
        },
        handleCurrentChange(e){
            this.listQuery.pageIndex = e;
            this.getTaskList();
        }
    }
}
</script>

<style scoped>
.clockin-content{
    width:100%;
    height: calc(100vh - 100px);
    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%;
    height:60px;
    padding:15px;
    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;
}

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