<template>
  <div class="box">
    <div class="box-title" >
        <el-input type="text" size="mini" style="width:160px;float:left;margin-right:12px;" v-model="listQuery.wuzi"></el-input>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="getWaterList">查询</el-button>
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="addtaskShow = true">添加任务</el-button>

    </div>
    <div class="box-container">
        <div class="table-body" v-show="!addtaskShow">
            <div class="item" v-for="(item,index) in waterPoints" :key="index">
                <div>{{item.street}}{{item.name}}</div>
                <div>{{item.info}}</div>
                <div class="float:right;text-align:right;">
                  <i class="el-icon el-icon-position" @click="flyToPosition(item)"></i>
                </div>
            </div>
        </div>

        <!-- 添加任务 -->
        <div class="add-task-box" v-show="addtaskShow">

            <el-form ref="form" size="mini" :model="form" label-width="100px">
                
                <el-form-item label="接收人">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="任务详情">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="任务地点">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

            </el-form>
        </div>
    </div>
  </div>
</template>

<script>
import appConfig from '../../../../public/config/app.json'
import { parse } from '../lib/handleGeojson'
import * as turf from '@turf/turf'
import axios from "axios";
let BASE_URL = process.env.VUE_APP_BASE_API
  export default {
    name: 'monitorbox',
    props:['globalmap','endLngLat'],
    data(){
        return{
            addtaskShow:false,
            startLngLat:null,
            list:[],
            listQuery:{
                wuzi:null,
                areaname:localStorage.getItem("areaName") == 'feixian' ? '费县' : '平邑县'
            },
            waterPoints:null,
            nestWaterPoints:[],
            echartsLayer:null,
            pathPointGraphicLayer:null,
            goodsGraphicLayer:null,
            form:{
                name:"hello world"
            }
        }
    },
    watch:{
      endLngLat:function(e){
          
      }
    },
    created(){
        this.getWaterList();
    },
    methods:{
        getWaterList(){
            axios({
                method: 'get',
                url: BASE_URL+"/FirePrevention/Loadwuzichubei",
                params:this.listQuery,
                headers:{
                    "X-Token":localStorage.getItem("X-Token"),
                }
            }).then(res => {
                this.waterPoints = res.data.data;
                this.addGoodsLayer();
            })
        },
        flyToPosition(item){
            let lngLat = parse(item.geom).coordinates;
            this.startLngLat = lngLat;
            this.getRoutePath();
            this.globalmap.flyToPoint(lngLat,{radius:400,"pitch":-90});
        },

    }
  }
</script>

<style scoped>
  .box{
        width: 100%;
        height: calc( 100% - 180px);
        overflow: hidden;
        text-align:left;
        z-index: 99;
  }
  .box-title{
        width:100%;
        height:40px;
        line-height:50px;
        text-indent:20px;
        color: #00FFF0;
    }
    .box-container{
        width: calc( 100% - 0px);
        padding:0px 12px;
        height: calc( 100% - 60px);
    }

    .add-task-box{
        width: calc( 100% - 0px);
        padding:0px 12px;
        height: calc( 100% - 60px);
    }
    .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% - 0px);
        overflow-y: auto;
    }

     .table-body .item{
         width:100%;
         height:36px;
         background: #00ffee2f;
         font-size:12px;
         text-align: center;
         line-height:36px;
         cursor:pointer;
     }

     .table-body .item:nth-child(2n){
         background:#00ffee50;
     }
    
    .table-body .item div{
        float:left;
        width:33%;
        height:36px;
        color:#eee;
        overflow: hidden;
    }
    .table-body .item div:nth-of-type(2){
        width:53%;
    }
    .table-body .item div:nth-of-type(3){
        width:13%;
    }

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

::v-deep .el-input__inner{
    background:none;
    color:#fff;
    margin-top:4px;
}

::v-deep .el-input__inner{
    border-radius:0px;
    position:relative;
    top:1px;
}

::v-deep .el-button{
    border-radius:0px;
}
</style>