<template>
    <div class="onebuttoncall-container">
        <div class="title">巡检轨迹</div>
        <div class="box-container">
            <div style="width:100%;text-align:center;padding:80px 0px;" v-if="list.length<=0"> 
                <img src="/img/no-data.png" style="width:140px;margin-bottom:20px;">
                <p style="color:#cfcfcf">暂无巡查轨迹</p>
            </div>
            <div class="item" v-for="(item,index) in list" :key="index">
                <p>护林员：{{item.name}}
                    <el-button type="primary" round size="mini" style="float:right;" icon="el-icon-map-location">轨迹</el-button>
                </p>
                <p>起点位置：{{item.startAddress}}，起始时间：{{item.startTime}}</p>
                <p>结束位置：{{item.startAddress}}，结束时间：{{item.endTime}}</p>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import { getMethodCommon, postMethodCommon } from '../../../api/common';
    export default {
      name: 'onebuttoncall',
      props:["phone"],
      data(){
          return {
              list:[
                 
              ],
              checkPhoneArr:[],
              checkRandom:1,
              checkList:[],
              checkNumber:[],
              total:0,
              callText:null,
              callTextShow:false,
              phones:null,
              markGraphicLayerArr:null,
          }
      },
      watch:{
        phone:function(e){
           this.getListData();
        }
      },
      created(){
        this.getListData();
      },
      mounted(){
  
      },
      methods:{
          checkChange(){
  
          },
          phoneCheckClick(item){
  
          },
          getListData(){
              postMethodCommon("/Patrol/LoadPatrolInfoByPhone?pageIndex=1&pageSize=999&phone="+this.phone).then(res=>{
                  if(res.code == 200){
                      this.list = res.data
                      this.total = res.count
                  }
              })
          },
          
      }
    }
  </script>
  
  <style scoped>
    .onebuttoncall-container{
        width:100%;
        height:100%;
        background-image: url(/img/biaohui.png);
        background-size:100% 100%;
    }
  
    .title{
        font-size:20px;
        color:#fff;
        text-indent:22px;
        height:50px;
        line-height:50px;
        text-indent:46px;
      }
      .filter-container{
          padding:15px 30px;
      }
      .box-container{
            width: calc( 100% - 0px);
            padding:0px 12px;
            height: calc( 100% - 60px);
            overflow-y:auto;
        }
        .table-header{
            width: calc( 100% - 10px);
            height:25px;
            color:#fff;
            text-align: center;
        }
        .table-header div{
            float:left;
            width:25%;
            border-bottom:1px dashed #00FFF0;
            padding-bottom:8px;
        }
        .table-body{
            width:100%;
            height: calc( 100% - 70px);
            overflow-y: auto;
        }
    
         .table-body .table-li{
             width: calc( 33% - 20px);
             margin:0px 10px;
             float:left;
             height:99px;
             background: #082929;
             margin-bottom: 8px;
             padding: 10px 10px;
         }
  
          .img-box{
              width:28px;
              margin:0px 4px;
              cursor:pointer;
              position:relative;
          }
         
   
        
       
    
         ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
      border: 0
    }
    
    ::-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, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
      background-color: #797979;
      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, .25);
      background-color: rgba(0, 0, 0, .4)
    }
    
    ::-webkit-scrollbar-thumb:active {
      -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
      background-color: rgba(0, 0, 0, .5)
    }
  
      .checkbox-container{
        width:18px;
        height:18px;
        position:relative;
        font-size:16px;
        line-height:18px;
        color:#fff;
        top:12px;
        margin-right:10px;
        float:left;
        background: rgba(2,0,77,0.4);
          box-shadow: inset 0px 0px 34px 0px #A15E01;
          border: 1px solid #F18B00;
        cursor: pointer;
    }
  
    ::v-deep .el-pager li{
        background:none;
        color:#fff;
    }
  
    .call-text-container{
       width:400px;
       height:300px;
       background-image:url(/img/goods.png);
       background-size:100% 100%;
       position:absolute;
       top:50%;
       left:50%;
       z-index:100000000000;
       transform: translate(-50%,-50%);
    }
      .call-title{
          width:100%;
          height:40px;
          line-height: 40px;
          color:#fff;
          text-indent:15px;
          z-index:1000000;
      }
    .callbox{
        width:100%;
        padding-top:15px;
    }
  
    ::v-deep .el-checkbox__label{
        color:#fff;
    }

    .item{
        width:100%;
        height:120px;
        padding:15px;
        background:rgba(10,165,154,0.4);
        color:#efefef;
        border-radius:8px;
        margin:8px 0px;
    }
  </style>
  