<template>
  <div class="box">
    <div class="box-name">水源</div>
    <div class="close-button" @click="close">
      <i class="el-icon el-icon-close"></i>
    </div>
    <div class="box-container">
      <div class="flex" style="margin: 10px 0">
        <span style="width: 80px; text-align: right; color: #fff">距离：</span>
        <div>
          <el-radio-group v-model="distanceradio" @input="radioChange">
            <el-radio :label="1" class="mr-1">1km内</el-radio>
            <el-radio :label="2" class="mr-1">5km内</el-radio>
            <el-radio :label="3" class="mr-1">10km内</el-radio>
            <!-- <el-radio :label="4" class="mr-1">20km内</el-radio> -->
            <!-- <el-radio :label="5">全部</el-radio> -->
          </el-radio-group>
        </div>
      </div>
      <div class="table-body">
        <div class="item" v-for="(item, index) in nestWaterPoints" :key="index">
          <div>{{ item.name ? item.name : '- -' }}</div>
          <div>{{ item.type }}</div>
          <div>{{ item.amount ? item.amount : '- -' }} m³</div>
          <div>{{ item.distance }} km</div>
          <div>{{ item.time }}</div>
          <div class="float:right;text-align:right;">
            <i
              class="el-icon el-icon-position"
              @click="flyToPosition([item.lngLat[0], item.lngLat[1]])"
            ></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import appConfig from "../../../../public/config/app.json";
import * as turf from "@turf/turf";
import axios from "axios";
import { getRouterFunc, drawRouterFunc, clearRouterFunc } from '../lib/routePath'
export default {
  name: "monitorbox",
  props: ["waterCenter", "firePopup"],
  data() {
    return {
      startLngLat: null,
      list: [],
      waterPoints: null,
      nestWaterPoints: [],
      echartsLayer: null,
      waterGraphicLayer: null,
      waterGraphicLayerArr: [],
      pathPointGraphicLayer: null,
      allData: [],
      distanceradio: 1,
    };
  },
  watch: {
    waterCenter: {
      handler(newVal, oldVal) {
        this.getWaterList();
      },
      immediate: true,
      // 开启深度监听 deep
      deep: true,
    },
    // firePopup: {
    //   handler(newVal, oldVal) {
    //     if (newVal == true) {
    //       this.close();
    //     }
    //   },
    // },
  },
  created() {
    // this.getWaterList();
    window.handlerRenderLoad = this.handlerRenderLoad
  },
  methods: {
    close() {
      this.waterGraphicLayerArr.forEach((item) => {
        this.waterGraphicLayer.removeGraphic(item);
      });
      clearRouterFunc()
      this.$emit("close");
    },
    radioChange(e) {
      let arr = this.allData;
      let newArr = [];
      if (this.distanceradio == 1) {
        arr.forEach((item) => {
          if (item.distance < 1) {
            newArr.push(item);
          }
        });
        this.nestWaterPoints = newArr;
      }
      if (this.distanceradio == 2) {
        arr.forEach((item) => {
          if (item.distance < 5) {
            newArr.push(item);
          }
        });
        this.nestWaterPoints = newArr;
      }
      if (this.distanceradio == 3) {
        arr.forEach((item) => {
          if (item.distance < 10) {
            newArr.push(item);
          }
        });
        this.nestWaterPoints = newArr;
      }
      if (this.distanceradio == 4) {
        arr.forEach((item) => {
          if (item.distance <= 20) {
            newArr.push(item);
          }
        });
        this.nestWaterPoints = newArr;
      }
      if (this.distanceradio == 5) {
        this.nestWaterPoints = arr;
      }
      this.nestWaterPoints.sort((a, b) => {
        return a.distance - b.distance;
      });

      if (this.waterGraphicLayer == null) {
        this.waterGraphicLayer = new mars3d.layer.GraphicLayer();
        window.globalmap.addLayer(this.waterGraphicLayer);
      }

      this.waterGraphicLayerArr.forEach((graphic) => {
        this.waterGraphicLayer.removeGraphic(graphic);
      });
      this.waterGraphicLayerArr = [];
      this.nestWaterPoints.forEach((item, index) => {
        let graphic = new mars3d.graphic.BillboardEntity({
          position: [item.lngLat[0], item.lngLat[1]],
          style: {
            image: "img/water.png",
            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,
          },
          popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
                  <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="label-content">
                                  <div class="data-li" style="text-indent:20px;margin-bottom:20px;">
                                      <div class="data-value">${item.name ? item.name :'- -'}</div>
                                  </div>
                                  <div class="data-li">
                                      <div class="data-label" >类型：</div>
                                      <div class="data-value">${item.type ? item.type :'- -'}</div>
                                  </div>
                                  <div class="data-li">
                                      <div class="data-label" >蓄水量：</div>
                                      <div class="data-value">${item.amount ? item.amount :'- -'}m³</div>
                                  </div>

                                  <div class="data-li">
                                      <div class="data-label" >距离：</div>
                                      <div class="data-value">${item.distance}km</div>
                                  </div>
                                  <div class="data-li">
                                    <span id="lablCSFM3" onclick="handlerRenderLoad([${item.lngLat[0]},${item.lngLat[1]}])"  class="label-tag data-value-status-2" >路线</span>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="b-t-l"></div>
                      <div class="b-b-r"></div>
                  </div>
                  <div class="arrow" ></div>
              </div>`,
          popupOptions: {
              offsetY: -50,
              offsetX:20,
              template: "{content}",
              horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
              verticalOrigin: "Cesium.VerticalOrigin.CENTER",
          },
          pointerEvents: true,
        });
        this.waterGraphicLayerArr.push(graphic);
        this.waterGraphicLayer.addGraphic(graphic);

        // let graphic = new mars3d.graphic.BillboardEntity({
        //   id:index,
        //   position: [item.lngLat[0], item.lngLat[1]],
        //   style: {
        //     image: "img/homeing/2.png",
        //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //       0,
        //       200000
        //     ), // 按视距距离显示
        //     scaleByDistance: new Cesium.NearFarScalar(1000, 0.6, 200000, 0.2),
        //     clampToGround: true,
        //     label: {
        //         text:item.name+"：("+item.distance+")km",
        //         font_size: 12,
        //         color: "#ffffff",
        //         pixelOffsetY: -78,
        //         pixelOffsetX:20,
        //         distanceDisplayCondition: true,
        //         distanceDisplayCondition_far: 6000,
        //         distanceDisplayCondition_near: 0,
        //     },
        //   },
        //   popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
        //           <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.name}</div>
        //                       <div class="label-content">
        //                           <div class="data-li">
        //                               <div class="data-label" >距离：</div>
        //                               <div class="data-value">${item.distance}km</div>
        //                           </div>
        //                           <div class="data-li">
        //                               导航
        //                           </div>
        //                       </div>
        //                   </div>
        //               </div>
        //               <div class="b-t-l"></div>
        //               <div class="b-b-r"></div>
        //           </div>
        //           <div class="arrow" ></div>
        //       </div>`,
        //   popupOptions: {
        //       offsetY: -50,
        //       offsetX:20,
        //       template: "{content}",
        //       horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
        //       verticalOrigin: "Cesium.VerticalOrigin.CENTER",
        //   },
        //   pointerEvents: true,
        // });
        // this.waterGraphicLayerArr.push(graphic);
        // this.waterGraphicLayer.addGraphic(graphic);
      });
      window.globalmap.addLayer(this.waterGraphicLayer);
    },
    getWaterList() {
      if(this.waterGraphicLayer){
        this.waterGraphicLayer.clear();
        this.waterGraphicLayerArr.forEach((item) => {
          this.waterGraphicLayer.removeGraphic(item);
        });
        clearRouterFunc()
      }
      axios({
        method: "get",
        url: appConfig[localStorage.getItem("areaName")].waterUrl,
      }).then((res) => {
        this.waterPoints = res.data;
        this.getNestPoint(this.waterCenter[0], this.waterCenter[1]);
        this.radioChange();
      });
    },
    //估算时间   平均60km/h
    getAroundTime(a) {
      var h = parseInt(a / 3600);
      var m = parseInt((a % 3600) / 60);
      var s = parseInt((a % 3600) % 60);
      return h + "小时" + m + "分" + s + "秒";
    },
    //火情附近所有点
    getNestPoint(lng, lat) {
      let from = turf.point([lng, lat]);
      this.nestWaterPoints = [];
      this.waterPoints.features.forEach((item, index) => {
        let to = turf.point(item.geometry.coordinates);
        let options = { units: "kilometers" };
        let distance = turf.distance(from, to, options);
        let obj = {
          name:item.properties.name,
          amount:item.properties.xushuilian,
          type:item.properties.leixing,
          street:item.properties.suoshuxian,
          lngLat: item.geometry.coordinates,
          distance: distance.toFixed(2),
          time: this.getAroundTime(distance.toFixed(2) * 60 + 5 * 60),
        };

        console.log("item",obj);
        this.nestWaterPoints.push(obj);
      });
      this.nestWaterPoints.sort((a, b) => {
        return a.distance - b.distance;
      });
      this.allData = this.nestWaterPoints;
    },
    flyToPosition(lngLat) {
      this.startLngLat = lngLat;
      this.getRoutePath();
      // window.globalmap.flyToPoint(lngLat, { radius: 4000, pitch: -90 });
    },
    handlerRenderLoad(lngLat){
      this.startLngLat = lngLat;
      this.getRoutePath();
    },
    getRoutePath() {
      // 获取路线数据
      let startCoor = this.startLngLat;
      let endCoor = this.waterCenter;
      let params = {
        startlng: parseFloat(startCoor[0]),
        startlat: parseFloat(startCoor[1]),
        endlng: parseFloat(endCoor[0]),
        endlat: parseFloat(endCoor[1]),
        areaname: localStorage.getItem("areaName"),
      };
      getRouterFunc(params,"all").then(res => {
        drawRouterFunc(res)
      }).catch(err => {
        clearRouterFunc()
      })
    },
    
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height:100%;
  overflow: hidden;
  text-align: left;
  z-index: 99;
}
.box-name {
  height: 47px;
  line-height: 47px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 0 40px;
}
.box-title {
  width: 100%;
  height: 40px;
  line-height: 50px;
  text-indent: 20px;
  color: #00fff0;
}
.box-container {
  width: calc(100% - 0px);
  padding: 10px 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% - 25px);
  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: 16%;
  color: #eee;
  overflow: hidden;
  height:36px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}
.close-button {
  position: absolute;
  right: 20px;
  top: 14px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  width: 20px;
  height: 20px;
  background: #0abfb5cc;
  line-height: 20px;
  text-align: center;
}

.el-radio {
  margin-right: 10px;
  color: #fff;
  margin-bottom: 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, 0.1),
    inset -1px -1px 0 rgba(0, 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, 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);
}
</style>
