<template>
    <div class="box">
      <div class="box-title">线索合并</div>
      <div class="tip-title">将会对选中的火情线索进行合并，请您确定</div>
      <div class="box-container">
          <span v-for="(item,index) in  checkNumber" :key="index" @click="checkItem(index)"   class="check-tag" :style="{'color':item.selected?'#179fc8':'#ccc'}">
             <span :key="checkNumberRondom"> 编号：{{item.clueNo}}</span>
              <!-- <i class="el-icon el-icon-close"></i> -->
          </span>
      </div>
      <div style="text-align:right;margin:0px 28px;">
          <span style="margin-right:12px;color:#fff;">{{formData.lng}}&nbsp;&nbsp;{{formData.lat}}</span>
          <el-button type="success" size="mini" @click="selectPosition()">选择位置</el-button>
          <el-button type="warning" size="mini" @click="cancle()">取消操作</el-button>
          <el-button type="primary" size="mini" @click="merage()">确认合并</el-button>
      </div>
    </div>
  </template>
  
  <script>
  import AppConfigInfo from '../../../../public/config/app.json'
  import axios from 'axios'
  let BASE_URL = process.env.VUE_APP_BASE_API
  import { parse } from '../lib/handleGeojson';
    export default {
      name: 'mergebox',
      props:['checkList','checkNumber'],
      data(){
          return {
              active:1,
              list:[
                 
              ],
              formData:{
                  "address": "",
                  "lng": "",
                  "lat": "",
                  "ids": [],
                  "modifyId": localStorage.getItem("userId")
              },
              graphicLayer:null,
              graphicPoint:null,
              graphicWinodw:null,
              pathPointGraphicLayer:null,
              checkNumberRondom:1,
  
          }
      },
      watch:{
          checkList:function(e){
              
          }
      },
      created(){
          // this.getList();
          window.wuzi = this.wuzi
          window.shuiyuan = this.shuiyuan
      },
      mounted(){
  
      },
      methods:{
          checkItem(index){
              this.checkNumber.forEach((item,idx)=>{
                  this.checkNumber[idx].selected = false;
              })
  
              this.checkNumber[index].selected = true;
  
              let obj = this.checkNumber[index]
              this.formData.lng = parseFloat(obj.lng).toFixed(6);
              this.formData.lat = parseFloat(obj.lat).toFixed(6);
              this.formData.address = obj.address
  
              console.log("formData",this.formData);
              this.checkNumberRondom = Math.random();
          },
          selectPosition(){
              let _this = this;
              window.globalmap.once(mars3d.EventType.click, function (event) {
                  window.globalmap.setCursor(false)
                  const cartesian = event.cartesian
                  const point = mars3d.LngLatPoint.fromCartesian(cartesian)
                  point.format() 
                  _this.drawPoint(point.lng, point.lat, point.z);
                  _this.formData.lng = point.lng;
                  _this.formData.lat = point.lat;
  
                  let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + point.lng + "," + point.lat + "&extensions=base"
                  axios({
                      method: 'get',
                      url: url,
                  }).then(res => {
                      let name = res.data.regeocode.formatted_address
  
                      _this.formData.address = name;
                      
                  }).catch(err =>{
                      console.log('ee',err)
                  })
  
              })
          },
          drawPoint(lng,lat,z){
              if(this.pathPointGraphicLayer==null){
                  this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
                  window.globalmap.addLayer(this.pathPointGraphicLayer);
              }else{
                  this.pathPointGraphicLayer.clear();
              }
              let graphic = new mars3d.graphic.BillboardEntity({
                  position: [lng, lat, z],
                  style: {
                      image: "/img/huozai.png",
                      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                      clampToGround: true
                  },
                  attr: "合并后火点"
              })
              this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
          },
          shuiyuan(e){
              this.$emit("shuiyuan",e);
          },
          wuzi(e){
              this.$emit("wuzi",e);
          },
          getInfo(active){
              this.listQuery.state = active;
              this.active = active;
              this.getList();
          },
          merage(){
              this.checkNumber.forEach((item,index)=>{
              this.formData.ids.push(item.id);
              })
  
              if(this.checkList.length<1){
                  this.$message({
                      type:"warning",
                      message:"请选择至少1条线索",
                  })
                  return;
              }
  
              if(!this.formData.lng && !this.formData.lat){
                  this.$message({
                      type:"warning",
                      message:"请选择合并后火点",
                  })
                  return;
              }
  
              axios({
                  method:"post",
                  url:BASE_URL+"/FireManagement/MergeNewFireClueInfo",
                  data:this.formData,
                  headers:{
                      'X-Token':localStorage.getItem("X-Token")
                  }
              }).then(res=>{
                  if(res.data.code == 200){
                     if(this.pathPointGraphicLayer){
                          this.pathPointGraphicLayer.clear();
                      this.pathPointGraphicLayer = null;
                      }
                      this.$emit("success");
                  }
              })
          },
          cancle(){
              if(this.pathPointGraphicLayer){
                  this.pathPointGraphicLayer.clear();
              this.pathPointGraphicLayer = null;
              }
              this.$emit("clsoe");
          },
          getList(){
              axios({
                  method:"post",
                  url:BASE_URL+"/FireManagement/LoadFireClueInfoByAreaName",
                  params:this.listQuery,
                  headers:{
                      'X-Token':localStorage.getItem("X-Token")
                  }
              }).then(res=>{
                  if(res.data.code == 200){
                      this.list = res.data.data;
                  }
              })
          },
          toPosition(item){
              console.log(item);
              this.$emit("changeCurrentInfo",item);
              let _self  = this;
  
              if(!_self.graphicLayer){
                   _self.graphicLayer = new this.mars3d.layer.GraphicLayer({
                      pid:88,
                  })
                  window.globalmap.addLayer(_self.graphicLayer)
              }
              if(_self.graphicPoint && _self.graphicWinodw){
                  _self.graphicLayer.clear();
                  _self.graphicPoint = null;
                  _self.graphicWinodw = null;
              }
              _self.graphicPoint = new mars3d.graphic.DivLightPoint({
                  position: [parseFloat(item.lng),parseFloat(item.lat)],
                  style: {
                      color: "#f33349",
                      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
                      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                  },
                  })
              _self.graphicLayer.addGraphic(_self.graphicPoint)
          
              _self.graphicWinodw = new mars3d.graphic.DivGraphic({
                  position: [parseFloat(item.lng),parseFloat(item.lat)],
                  style: {
                      html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
                  <div class="marsTiltPanel-wrap">
                      <div class="area">
                          <div class="arrow-lt"></div>
                          <div class="b-t"></div>
                          <div class="b-r"></div>
                          <div class="b-b"></div>
                          <div class="b-l"></div>
                          <div class="arrow-rb"></div>
                          <div class="label-wrap">
                              <div class="title">${item.address}</div>
                              <div class="label-content">
                                  <div class="data-li">
                                      <div class="data-label">火情描述：${item.describe}</div>
                                  </div>
                                  <div class="data-li">
                                      <div class="data-label">上报时间：</div>
                                      <div class="data-value"><span id="lablYeWei"  class="label-num">${item.reportTime}</span><span class="label-unit"></span>
                                      </div>
                                  </div>
                                  <div class="data-li">
                                      <div class="data-value">
                                          <span id="lablSBZT1"  class="label-tag data-value-status-1" title="中间状态">人员调度</span>
                                          <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);"  class="label-tag data-value-status-0"  >物资调度</span>
                                          <span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])"  class="label-tag data-value-status-2">附近水源</span>
                                          <span id="lablSBZT1"  class="label-tag data-value-status-1" title="中间状态">路线规划</span>
  
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="b-t-l"></div>
                      <div class="b-b-r"></div>
                  </div>
                  <div class="arrow" ></div>
              </div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
                      scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
                      clampToGround: true
                  },
                  attr: { remark: "示例10" },
                  // 可以传入自定义测试点样式
                  // testPoint: {
                  //   color: '#ff0000',
                  //   pixelSize: 8,
                  // },
                  pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
              })
              _self.graphicLayer.addGraphic(_self.graphicWinodw);
  
              _self.graphicWinodw.flyTo();
          },
          
      }
    }
  </script>
  
  <style scoped>
    .box{
        width:100%;
        height:100%;
        background-image: url(/img/hebing-bg.png);
        background-size:100% 100%;
    }
  
    .box-title{
        width:100%;
        height:45px;
        overflow: hidden;
        line-height:40px;
        color:#eee;
        text-align: center;
        font-size:18px;
    }
    .tip-title{
        width:280px;
        margin:0px auto;
        height:80px;
        padding-top:20px;
        font-size: 22px;
          font-family: OPPOSans-M, OPPOSans;
          font-weight: normal;
          color: #179fc8;
          line-height: 32px;
  
    }
    .tab-container{
        width:210px;
        height:60px;
        border-bottom:1px solid #2F5D55;
        padding-top:10px;
        margin:0px auto;      
    }
    .tab-button{
        width:70px;
        font-size:12px;
        height:50px;
        line-height:50px;
        color:#0ABFB5;
        float:left;
        cursor:pointer;
    }
      .check-tag{
          cursor:pointer;
          margin:4px 10px;background: #112A26;border: 1px solid #1C4741;float:left;padding:3px 6px 3px 6px;border-radius: 19px 0px 19px 19px;
      }
    .box-container{
        width: calc( 100% - 20px);
        margin:0px 15px;
        margin-bottom:10px;
        height: calc( 100% - 190px);
        overflow-y:auto;
    }
    .news{
        width: calc( 100% - 10px);
        line-height:18px;
        padding:6px 15px 10px 15px;
        text-align:left;
        color:#ccc;
        background:rgba(0,0,0,0.5);
        margin:6px 0px;
        border:1px dashed #999;
    }
    .news::after{
        content:"";
        clear:both;
        display:block;
        height:0px;
        overflow: hidden;
    }
  .checkbox-container{
      width:18px;
      height:18px;
      position:relative;
      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;
  }
    .news-container{
        width: calc( 100% - 30px);
        float:left;
    }
    .news .title{
        line-height:40px;
        color:#E48F19;
        margin-bottom:12px;
        position: relative;
    }
  
    .news .title::after{
        content:"";
        width:100%;
        height:0px;
        border: 0.5px solid;
        position:absolute;
        bottom:0px;
        left:0px;
          border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
    }
  
    .news .desc{
        font-size:12px;
        color:#fff;
        margin-bottom:6px;
    }
  
       ::-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)
  }
  
  </style>