<template>
  <div id="content">
    <div id="map" ref="map" style="width: 100vw; height: 100vh"/>
    <div id="overlay-box"/>
    <div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
      <div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</div>
    </div>
    <div class="mobileHomePageExpandBtn" v-if="page=='mobileHomePage'">
      <van-icon name="expand-o" color="white" @click="switchFullScreen"/>
    </div>
    <div class="iconColorList" v-if="page=='mobileHomePage'&&pageType=='large'">
      <div class="iconColorListItem"><span style="background-color: #FF0000"></span>报警点位</div>
      <div class="iconColorListItem"><span style="background-color: #369FFF"></span>在线</div>
      <div class="iconColorListItem"><span style="background-color: #9B9B9B"></span>离线</div>
      <div class="iconColorListItem"><span style="background-color: #16CE81"></span>接收报警</div>
    </div>
    <van-overlay :show="alarmDetailsOverlay" @click="alarmDetailsOverlay = false" z-index="20">
      <div class="alarmDetailsOverlayWrapper" @click.stop>
        <div class="alarmDetailsBox">
          <div class="title">{{ alarmDetailsData.title }}</div>
          <div class="alarmDetailsBoxItem"><span>报警类型:</span><span>{{
              alarmDetailsData.alarmCategory_dictText
            }}</span>
          </div>
          <div class="alarmDetailsBoxItem"><span>报警时间:</span><span>{{ alarmDetailsData.createTime }}</span></div>
          <div class="alarmDetailsBoxItem"><span>警情内容:</span><span>{{ alarmDetailsData.msgContent }}</span></div>
          <div class="alarmDetailsBoxItem"><span>发布人:</span><span>{{ alarmDetailsData.sender }}</span></div>
          <div class="alarmDetailsBoxItem"><span>关联设备:</span><span>内容</span></div>
        </div>
        <div class="btnList">
          <div class="btnItem" @click="alarmClickAction(1)">确认</div>
          <div class="btnItem" @click="alarmClickAction(2)">导航</div>
        </div>
      </div>
    </van-overlay>
    <!--
    <div class="pcPlanningPath" v-if="page=='pcPlanningPath'">
      <div class="pcPlanningPathNext" @click="clearPcPlanningPath">清空重新绘制</div>
    </div>
    -->
  </div>
</template>

<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import {Map, View, Feature} from "ol";
import {Icon, Fill, Stroke, Style, Circle, Text} from "ol/style";
import Overlay from "ol/Overlay";
import {Point, LineString, Polygon} from "ol/geom.js";
import {getVectorContext} from "ol/render";
import axios from "axios";
import TileWMS from "ol/source/TileWMS"
import WMTS from "ol/source/WMTS"
import TileGrid from "ol/tilegrid/TileGrid"
import {Notify, Dialog} from 'vant';
import * as interaction from 'ol/interaction'; // 交互
import {OL as ol} from "plot-ol/plottingol";
import GeoJSON from 'ol/format/GeoJSON'
import service from "@/utils/service";
import {appInit, getStatisFileUrl, getUrlParam} from "../utils/publicFun";
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import {get as getProjection} from 'ol/proj.js';
import {getTopLeft, getWidth} from 'ol/extent.js';

export default {
  data() {
    return {
      map: {},
      pointLayer: {},
      canAddPoints: false,
      coordinate: [],
      route: new LineString([[12496610.1929, 2476571.7426], [12496623.829, 2476586.2505]]),
      route1: new LineString([[113.95113841271974, 22.568523240293505], [113.94452944970705, 22.563351941312792], [113.95188943124391, 22.559317898954394], [113.94467965341188, 22.555326771940233]]),
      geometryMove: {},
      featureMove: {},
      styles: {
        route: new Style({
          stroke: new Stroke({
            width: 6,
            color: [237, 212, 0, 0.8],
          }),
        }),
        icon: new Style({
          image: new Icon({
            anchor: [0.5, 1],
            src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
            scale: 1, //设置大小
          }),
        }),
        featureMove: new Style({
          image: new Circle({
            radius: 7,
            fill: new Fill({color: "black"}),
            stroke: new Stroke({
              color: "white",
              width: 2,
            }),
          }),
        }),
      },
      vectorLayer: {},
      distance: 0,
      lastTime: 0,
      speed: 0.1,
      page: null,
      selectPoint: [],
      drawPlanningPathLayer: null,
      draw: null,
      snap: null,
      pcDrawType: "",
      equipmentLayer: {},
      alarmLayer: {},
      alarmAnimation: null,
      planningTargetPoint: [],
      alarmDetailsOverlay: false,
      alarmDetailsData: {
        alarmCategory_dictText: ""
      },
      navigationStartPoint: [],
      navigationEndPoint: [],
      hd_gps_location: [],
      pageType: "",
      planningVectorLayer: {},
      parentPostMessageData: [],
      isCanDraw: true,
      from: "",
      detailsId: "",
    };
  },
  mounted() {
    console.log(location.href)

    this.page = getUrlParam("page");
    this.pageType = getUrlParam("type");
    this.from = getUrlParam("from");
    this.detailsId = getUrlParam("detailsId");

    this.token = getUrlParam("token")
    if (this.token != null) {
      localStorage.setItem("hd_token", this.token)
    }

    setInterval(() => {
      let hd_gps_location = localStorage.getItem("hd_gps_location")
      if (hd_gps_location) {
        hd_gps_location = hd_gps_location.split(",")
        this.hd_gps_location = hd_gps_location
        this.navigationStartPoint = this.hd_gps_location
      }
    }, 2000)

    this.initMap();


    switch (this.page) {
      case "addAlarmPoint":
        console.log("新增报警点");
        //处理ok
        this.PageAddAlarmPoint()
        break
      case "pcPlanningPath":
        this.pcDrawType = "LineString";
        window.addEventListener('message', (event) => {
          this.isCanDraw = false
          console.log(event.data)
          if (this.parentPostMessageData.length == 0) {
            if (event.data instanceof Array) {
              this.map.removeLayer(this.drawPlanningPathLayer);
              this.parentPostMessageData = event.data;
              this.drawPcPostMessageDataLayer()
            } else {
              this.isCanDraw = true;
            }

          }
        });
        //处理ok
        this.pcPlanningPath()
        break
      case "pcDrawArea":
        this.pcDrawType = "Polygon"
        window.addEventListener('message', (event) => {
          this.isCanDraw = false
          if (this.parentPostMessageData.length == 0) {

            if (event.data instanceof Array) {
              this.map.removeLayer(this.drawPlanningPathLayer);
              this.parentPostMessageData = event.data;
              this.drawPcPostMessageDataLayer()
            } else {
              this.isCanDraw = true;
            }

          }
        });
        //处理ok
        this.pcPlanningPath();
        break
      case "planningPath":
        // http://localhost:8080/hd-glasses-app/#/hd_map?page=planningPath&alarmId=1714938284919808002
        if (this.$route.query.alarmId == null) {
          console.error("告警id不可为空")
        }
        this.getAlarmDetails(this.$route.query.alarmId)
        // this.planningPath()
        break
      case "mobileHomePage":
        // http://localhost:8080/hd-glasses-app/#/hd_map?page=mobileHomePage
        appInit(500).then((e) => {
          console.log("获取到token，开始执行后续")
          console.log(e)
          this.queryAlarmList();
          this.queryAllEquipment();
          this.getAreaList()
          setInterval(() => {
            this.queryAlarmList();
          }, 3500)
          setInterval(() => {
            this.queryAllEquipment();
          }, 5000)

        }).then((e) => {
          console.error(e)
        })
        break
      default:
        this.queryAlarmList();
        // this.planningPath()
        // this.queryAlarmList()
        // this.queryAllEquipment()
    }


  },
  methods: {
    PageAddAlarmPoint() {
      this.canAddPoints = true;
      this.clickMap();
    },

    showHistory() {
      var _list = [[113.94755498147583, 22.565597285534384], [113.9468468782959, 22.563151110912802], [113.9487566111145, 22.56018995216036], [113.95017281747437, 22.55748628547335]]
    },
    clearPointsLayers() {
      this.coordinate = []
      this.map.removeLayer(this.pointLayer);
      this.pointLayer = {};
      if (Object.keys(this.pointLayer).length == 0) {
        // 创建图层
        this.pointLayer = new VectorLayer({
          source: new VectorSource(),
        });
        // 图层添加到地图上
        this.map.addLayer(this.pointLayer);
      }
    },
    initMap() {

      const wmsLayer_0 = new TileLayer({
        source: new TileWMS({
          // 设置 Geoserver 服务的 URL
          url: process.env.VUE_APP_MAP_URL + "/wms",
          params: {
            LAYERS: "china:yangjianghedian",
            TILED: true
          }
        })
      });


      const wmsLayer_1 = new TileLayer({
        source: new TileWMS({
          // 设置 Geoserver 服务的 URL
          url: process.env.VUE_APP_MAP_URL + "/wms",
          params: {
            LAYERS: "china:yangjianghedian_dt",
            TILED: true
          }
        })
      });


      // 切片方案（0-18级
      const projection = getProjection('EPSG:3857');
      const projectionExtent = projection.getExtent();
      const size = getWidth(projectionExtent) / 256;
      const resolutions = new Array(19);
      const matrixIds = new Array(19);
      for (let z = 0; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = "EPSG:3857:" + z;
      }


      var style = '';
      var format = 'image/png';
      var layerName = 'china:yangjianghedian_dt';
      let baseParams = ['VERSION', 'LAYER', 'STYLE', 'TILEMATRIX', 'TILEMATRIXSET', 'SERVICE', 'FORMAT'];

      let params = {
        'VERSION': '1.0.0',
        'LAYER': layerName,
        'STYLE': style,
        'TILEMATRIX': matrixIds,
        'TILEMATRIXSET': projection,
        'SERVICE': 'WMTS',
        'FORMAT': format
      };
      var url = process.env.VUE_APP_MAP_URL + "/gwc/service/wmts?authkey=" + process.env.VUE_APP_MAP_AUTHKEY + "&"
      for (var param in params) {
        if (baseParams.indexOf(param.toUpperCase()) < 0) {
          url = url + param + '=' + params[param] + '&';
        }
      }
      url = url.slice(0, -1);


      const wmtsLayer_1 = new TileLayer({
        opacity: 1, //图层透明度
        source: new WMTS({
          url: url,
          layer: "china:yangjianghedian_dt",
          matrixSet: 'EPSG:3857',
          format: 'image/png', // 默认：'image/jpeg'
          projection: projection,
          tileGrid: new WMTSTileGrid({
            origin: getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds,
          }),
          style: '',
          wrapX: true
        })
      });


      this.map = new Map({
        target: "map",
        layers: [
          // new TileLayer({
          //   source: new XYZ({
          //     url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          //   }),
          // }),
          wmtsLayer_1,
          wmsLayer_0,
        ],
        view: new View({
          resolutions: resolutions,
          projection: projection,
          center: [12497018.585823221, 2476783.2447665134],
          zoom: 16,
        }),
      });
      this.map.on('singleclick', e => {
        this.map.forEachFeatureAtPixel(
            e.pixel,
            (feature) => {
              console.log("Feature被点击了")
              console.log(feature)
              if (feature.values_.type == 'alarm') {
                this.alarmDetailsData = feature.values_.data;
                this.alarmDetailsOverlay = true;
              }
            },
            {
              hitTolerance: 30
            }
        );
      });

    },
    /**
     * 点击地图添加摄像头要素
     */
    clickMap() {

      this.map.on("click", (e) => {
        if (this.canAddPoints) {
          this.addPoints(e.coordinate);
        }
      });
    },
    planningPath() {

      const startPoint = ol.proj.transform(this.navigationStartPoint, 'EPSG:4326', 'EPSG:3857');
      const endPoint = ol.proj.transform(this.navigationEndPoint, 'EPSG:4326', 'EPSG:3857');
      console.log(startPoint)
      console.log(endPoint)

      const _points = `${startPoint[0]}#${startPoint[1]}@${endPoint[0]}#${endPoint[1]}`

      axios({
        method: "post",
        url: process.env.VUE_APP_MAP_URL + "/wfs?authkey=" + process.env.VUE_APP_MAP_AUTHKEY,
        headers: {
          'Content-Type': 'text/xml'
        },
        data: `<GetFeature xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
            outputFormat="application/json"
            viewParams="points:${_points}"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
            <Query typeName="china:planning-path" xmlns:china="www.shgis.com"/>
        </GetFeature>`,
      }).then(res => {
        // console.log("================================获取到了导航结果")

        let pathList = [];
        res.data.features.map((item, index) => {
          pathList.push(item.geometry.coordinates[0])
          pathList.push(item.geometry.coordinates[1])
          // console.log(item.geometry.coordinates[0])
          // console.log(item.geometry.coordinates[0])
        })
        const route = new LineString(pathList)

        const geometryMove = new Point(route.getFirstCoordinate());

        const featureMove = new Feature({
          type: "featureMove",
          geometry: geometryMove,
        });
        // this.planningVectorLayer.set('id', 'planningVectorLayer');
        //先清空 再清除
        this.map.removeLayer(this.planningVectorLayer)
        this.planningVectorLayer = new VectorLayer({
          source: new VectorSource({
            features: [
              new Feature({
                type: "route",
                geometry: route,
              }),
              featureMove,
              new Feature({
                type: "icon",
                geometry: new Point(route.getFirstCoordinate()),
              }),
              new Feature({
                type: "icon",
                geometry: new Point(route.getLastCoordinate()),
              }),
            ],
          }),
          style: (feature) => {
            return this.styles[feature.get("type")];
          },
        });

        this.map.addLayer(this.planningVectorLayer)
      })
    },
    /**
     * 根据经纬度坐标添加摄像头要素
     */
    addPoints(coordinate) {
      console.log("点击触发addPoints")
      if (this.selectPoint.length > 0) {
        this.coordinate = []
        this.map.removeLayer(this.pointLayer);
        this.pointLayer = {};
        if (Object.keys(this.pointLayer).length == 0) {
          // 创建图层
          this.pointLayer = new VectorLayer({
            source: new VectorSource(),
          });
          // 图层添加到地图上
          this.map.addLayer(this.pointLayer);
        }
      } else {
        // 创建图层
        this.pointLayer = new VectorLayer({
          source: new VectorSource(),
        });
        // 图层添加到地图上
        this.map.addLayer(this.pointLayer);
      }

      this.selectPoint = coordinate;
      this.coordinate = coordinate;

      // 创建feature要素，一个feature就是一个点坐标信息
      const feature = new Feature({
        geometry: new Point(coordinate),
      });
      // 设置要素的图标
      feature.setStyle(
          new Style({
            // 设置图片效果
            image: new Icon({
              src: getStatisFileUrl("/map/icon_paishuibeng_h_2.png"),
              // anchor: [0.5, 0.5],
              scale: 0.4,
            }),
          })
      );
      // 要素添加到地图图层上

      this.pointLayer.getSource().addFeature(feature);

      // 设置文字信息
      // this.addText(coordinate);
    },
    addText(coordinate) {
      const overlayBox = document.getElementById("overlay-box"); //获取一个div
      const oSpan = document.createElement("span"); //创建一个span
      oSpan.contentEditable = true; //设置文字是否可编辑
      oSpan.id = coordinate[0]; //创建一个id
      let pText = document.createTextNode("摄像头" + coordinate[0].toFixed(2)); //创建span的文本信息
      oSpan.appendChild(pText); //将文本信息添加到span
      overlayBox.appendChild(oSpan); //将span添加到div中
      let textInfo = new Overlay({
        position: coordinate, //设置位置
        element: document.getElementById(coordinate[0]),
        offset: [-25, 30], //设置偏移
      });
      this.map.addOverlay(textInfo);
    },

    moveFeature(e) {
      let time = e.frameState.time;
      this.distance =
          (this.distance + (this.speed * (time - this.lastTime)) / 1000) % 1; //%2表示：起止止起；%1表示：起止起止

      this.lastTime = time;

      const currentCoordinate = this.route.getCoordinateAt(
          this.distance > 1 ? 2 - this.distance : this.distance
      );
      this.geometryMove.setCoordinates(currentCoordinate);
      const vectorContext = getVectorContext(e);
      vectorContext.setStyle(this.styles.featureMove);
      vectorContext.drawGeometry(this.geometryMove);
      this.map.render();
    },
    startAnimation() {
      this.lastTime = Date.now();
      this.vectorLayer.on("postrender", this.moveFeature);
      this.featureMove.setGeometry(null); //必须用null，不能用{}
    },

    stopAnimation() {
      this.featureMove.setGeometry(this.geometryMove);
      this.vectorLayer.un("postrender", this.moveFeature);
    },
    addAlarmPointNextAction() {
      if (this.selectPoint.length == 0) {
        Dialog({message: '请先选择点位'});
      }
      // 上传之前将3857转4326
      const center = ol.proj.transform(this.selectPoint, 'EPSG:3857', 'EPSG:4326');
      console.log("================center: " + JSON.stringify(center))
      const result = JSON.stringify(center)


      if (this.from == "pc") {
        window.parent.postMessage(result, "*");
      } else {
        location.href = "uniwebview://action?function=addAlarmPoint&params1=" + result;
      }

    },
    pcPlanningPath() {
      //https://blog.csdn.net/Raccon_/article/details/127491268

      // const interaction = this.map
      //     .getInteractions()
      //     .getArray()
      //     .find(interaction => {
      //       return interaction instanceof ol.interaction.DoubleClickZoom;
      //     });
      // // 移除原始地图双击事件
      // this.map.removeInteraction(interaction);


      // 矢量地图源
      let vectorSource = new VectorSource();
      // 矢量地图
      this.drawPlanningPathLayer = new VectorLayer({
        source: vectorSource,
        style: new Style({
          stroke: new Stroke({
            width: 6,
            color: [237, 212, 0, 0.8],
          }),
        })
      });

      let modify = new interaction.Modify({
        source: vectorSource
      });

      this.map.addInteraction(modify);

      // 绘制图形类型
      // Point 点
      // LineString 线
      // Polygon 多边形
      // Circle 圆

      this.draw = new interaction.Draw({
        source: vectorSource,
        type: this.pcDrawType
      });

      this.map.addInteraction(this.draw);

      // 创建一个Snap控件，并加入到Map对象中
      this.snap = new interaction.Snap({
        source: vectorSource
      });
      this.map.addLayer(this.drawPlanningPathLayer);

      this.map.addInteraction(this.snap);

      this.draw.on('drawend', (e) => {
        if (!this.isCanDraw) {
          return;
        }

        Dialog.confirm({
          title: '绘制完成',
          message: '取消则会重新绘制',
        })
            .then(() => {

              if (this.pcDrawType == "Polygon") {
                // on confirm
                const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))

                let pointList = []

                featureGeoJson.geometry.coordinates.map(item => {
                  console.log(item)
                  item.map(_item => {
                    const _item1 = ol.proj.transform(_item, 'EPSG:3857', 'EPSG:4326');
                    pointList.push(_item1)
                  })

                })
                console.log(pointList)

                window.parent.postMessage(JSON.stringify([pointList]), "*");

              } else if (this.pcDrawType == "LineString") {
                // on confirm
                const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))

                let pointList = []

                featureGeoJson.geometry.coordinates.map(item => {
                  const _item1 = ol.proj.transform(item, 'EPSG:3857', 'EPSG:4326');
                  pointList.push(_item1)
                })

                window.parent.postMessage(JSON.stringify(pointList), "*");

              }


            })
            .catch(() => {
              // on cancel
              this.drawPlanningPathLayer.getSource().clear();
              // this.map.removeLayer(this.drawPlanningPathLayer)
              // this.map.addLayer(this.drawPlanningPathLayer)
            });
        // this.map.removeInteraction(draw); // 在此处清除交互会触发地图默认的双击放大
      });

    },
    clearPcPlanningPath() {

    },
    queryAllEquipment() {
      service.get(`/sys/equipment/pageList`, {
        params: {
          pageNo: 1,
          pageSize: 50
        }

      }).then((res) => {
        if (res.status == 200) {
          this.map.removeLayer(this.equipmentLayer)
          this.equipmentLayer = {};
          res.data.result.records.map(record => {
            try {
              if (record.leastLocation != null) {
                this.addPointWidthCoordinate(record.leastLocation, "equipment", record)
              }
            } catch (e) {
              console.log(e)
            }
          })
        }
      })
    },
    queryAlarmList() {

      service.get(`/api/alarm/list`, {
        params: {
          pageNo: 1,
          pageSize: 50,
          column: "createTime",
          order: "desc",
          id:this.detailsId
        }
      }).then((res) => {
        if (res.status == 200) {
          clearInterval(this.alarmAnimation)
          this.alarmAnimation = null
          this.map.removeLayer(this.alarmLayer)
          this.alarmLayer = {};
          res.data.result.records.map((record, index) => {

            try {
              if (record.location != null) {
                this.addPointWidthCoordinate(record.location, "alarm", record, index + 1)
              }
            } catch (e) {
              console.error(e)
            }
          })
        }

      })
    },
    switchFullScreen() {
      location.href = "uniwebview://action?function=switchBigScreen"
    },
    addPointWidthCoordinate(coordinate, type, record, _index = 0) {

      coordinate = coordinate.split(",")

      coordinate = ol.proj.transform(coordinate, 'EPSG:4326', 'EPSG:3857');

      // console.log("================addPointWidthCoordinate",coordinate)
      // 告警相关
      if (type == 'alarm') {
        if (Object.keys(this.alarmLayer).length == 0) {
          // 创建图层
          this.alarmLayer = new VectorLayer({
            source: new VectorSource(),
          });
          // 图层添加到地图上
          this.map.addLayer(this.alarmLayer);
          var flag = true
          this.alarmAnimation = setInterval(() => {
            flag = !flag
            this.alarmLayer.setVisible(flag)
          }, 1500);
        }


        const feature = new Feature({
          geometry: new Point(coordinate),
          data: record,
          type: 'alarm'
        });
        const alarmCategory_dictText = record.alarmCategory_dictText || "未知类型"
        //临时智慧所，小红旗
        if (record.alarmCategory == "1706273001850601474") {
          // 设置要素的图标
          feature.setStyle(
              new Style({
                // 设置图片效果
                image: new Icon({
                  src: getStatisFileUrl("/map/hongqi.png"),
                  anchor: [0.5, 0.5],
                  scale: 0.3,
                }),
                text: new Text({
                  testAlign: 'center',
                  text: [_index.toString(), 'bold 16px sans-serif', '\n', '', alarmCategory_dictText, 'italic 16px sans-serif'],
                  font: 'bold 20px 微软雅黑',
                  fill: new Fill({
                    color: '#ffa502',
                  }),
                  offsetY: -2
                })
              })
          );
        } else {
          // 设置要素的图标
          feature.setStyle(
              new Style({
                // 设置图片效果
                image: new Icon({
                  src: getStatisFileUrl("/map/icon_paishuibeng_h.png"),
                  anchor: [0.5, 0.5],
                  scale: 0.4,
                }),
                text: new Text({
                  testAlign: 'center',
                  text: [_index.toString(), 'bold 16px sans-serif', '\n', '', alarmCategory_dictText, 'italic 16px sans-serif'],
                  font: 'bold 20px 微软雅黑',
                  fill: new Fill({
                    color: '#ffa502',
                  })
                })
              })
          );
        }

        // 要素添加到地图图层上
        this.alarmLayer.getSource().addFeature(feature);
        console.log("===============结束告警点位添加")

      }
      //设备相关
      if (type == 'equipment') {
        let alarmNum = record.alarmNum || 0;
        // 模拟数据
        // record.isOnline="true";
        // alarmNum=0;

        const feature = new Feature({
          geometry: new Point(coordinate),
          data: record,
          type: 'equipment'
        });
        if (Object.keys(this.equipmentLayer).length == 0) {
          // 创建图层
          this.equipmentLayer = new VectorLayer({
            source: new VectorSource(),
          });
          this.map.addLayer(this.equipmentLayer);
        }
        //  设备离线  设置样式
        if (record.isOnline == "false") {
          // 设置要素的图标
          feature.setStyle(
              new Style({
                // 设置图片效果
                image: new Icon({
                  src: getStatisFileUrl("/map/Group_30@2x.png"),
                  // anchor: [0.5, 0.5],
                  scale: 0.4,
                }),
                text: new Text({
                  testAlign: 'center',
                  text: [record.equipmentName, 'bold 16px sans-serif', '\n', ''],
                  font: 'bold 20px 微软雅黑',
                  fill: new Fill({
                    color: 'rgb(155, 155, 155)',
                  }),
                  offsetY: 36
                })
              })
          );
        }

        if (record.isOnline == "true") {
          // 未接受告警数量为0，全部都接受 绿色
          if (alarmNum == 0) {
            feature.setStyle(
                new Style({
                  // 设置图片效果
                  image: new Icon({
                    src: getStatisFileUrl("/map/Group_190514@2x.png"),
                    // anchor: [0.5, 0.5],
                    scale: 0.4,
                  }),
                  text: new Text({
                    testAlign: 'center',
                    text: [record.equipmentName, 'bold 16px sans-serif', '\n', ''],
                    font: 'bold 20px 微软雅黑',
                    fill: new Fill({
                      color: 'rgb(22, 206, 129)',
                    })
                  })
                })
            );
          }
          if (alarmNum > 0) {
            feature.setStyle(
                new Style({
                  // 设置图片效果
                  image: new Icon({
                    src: getStatisFileUrl("/map/Group_29@2x.png"),
                    // anchor: [0.5, 0.5],
                    scale: 0.4,
                  }),
                  text: new Text({
                    testAlign: 'center',
                    text: [record.equipmentName, 'bold 16px sans-serif', '\n', '', `${alarmNum}条告警未接受`, 'bold 16px sans-serif',],
                    font: 'bold 16px 微软雅黑',
                    fill: new Fill({
                      color: 'rgb(54, 159, 255)',
                    }),
                    // offsetX: 40,
                    offsetY: 26
                  })
                })
            );
          }
        }

        this.equipmentLayer.getSource().addFeature(feature);
      }


    },
    alarmClickAction(index) {
      if (index == 1) {
        location.href = "uniwebview://action?function=alarmConfirmAction&params1=" + this.alarmDetailsData.id;
      }
      if (index == 2) {
        location.href = "uniwebview://action?function=alarmPlanningAction&params1=" + this.alarmDetailsData.id + "&params2=" + this.alarmDetailsData.location;
      }
    },
    getAlarmDetails(id) {
      service.get(`/api/alarm/queryById`, {
        params: {
          id: id
        }
      }).then((res) => {
        if (res.status == 200) {
          console.log(res.data.result)
          this.navigationEndPoint = res.data.result.location.split(",")
          this.addPointWidthCoordinate(res.data.result.location, "alarm", res.data.result)
          setInterval(() => {
            this.planningPath()
          }, 2000)

        }

      })

    },
    drawPcPostMessageDataLayer() {
      const tempGeometryList = []

      console.log(this.parentPostMessageData)

      this.parentPostMessageData.map(item => {
        tempGeometryList.push(ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857'))
      })

      const polygonGeometry = new LineString(tempGeometryList)
      const polygonFeature = new Feature({
        geometry: polygonGeometry
      })
      polygonFeature.setStyle(new Style({
        stroke: new Stroke({
          color: '#ffa502',
          width: 2
        }),
        fill: new Fill({
          color: '#ffffff00'
        })
      }))
      this.drawPlanningPathLayer.getSource().addFeature(polygonFeature)
      this.map.addLayer(this.drawPlanningPathLayer)
    },
    removeMapLayerById(id) {
      this.map.getLayers().forEach(function (layer) {
        if (layer instanceof ol.layer.Tile && layer.get('id') === id) {
          this.map.removeLayer(layer);
        }
      });
    },
    getAreaList() {
      let vectorSource = new VectorSource();
      // 矢量地图
      this.drawPlanningPathLayer = new VectorLayer({
        source: vectorSource,
        style: new Style({
          stroke: new Stroke({
            width: 6,
            color: [237, 212, 0, 0.8],
          })
        })
      });

      this.map.addLayer(this.drawPlanningPathLayer);


      service.get(`/api/patrol/area/list`, {
        params:{
          id:"",
        }
      }).then((res) => {
        if (res.status == 200) {
          console.log(res.data.result.records)
          res.data.result.records.map((record) => {
            console.log(record)
            this.drawAreaLayer(record.areaName, JSON.parse(record.area))
          })
        }

      })

    },
    drawAreaLayer(title, areaList) {
      console.log(title)
      areaList = areaList[0]
      console.log(areaList)

      const tempGeometryList = []

      areaList.map(item => {
        tempGeometryList.push(ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857'))
      })

      tempGeometryList.push(tempGeometryList[0])

      const _list = [tempGeometryList]

      console.log(_list)

      const polygonGeometry = new Polygon(_list)

      console.log(polygonGeometry)

      const polygonFeature = new Feature({
        geometry: polygonGeometry,
        name: title
      })

      polygonFeature.setStyle(new Style({
        stroke: new Stroke({
          color: '#ffa502',
          width: 2
        }),
        fill: new Fill({
          color: 'rgba(255,255,0,0.1)'
        }),
        text: new Text({
          testAlign: 'center',
          text: title,
          font: 'bold 20px 微软雅黑',
          fill: new Fill({
            color: '#ffa502',
          })
        })
      }))
      this.drawPlanningPathLayer.getSource().addFeature(polygonFeature)
    }

  },
};
</script>

<style lang="less">
// 非核心已删除
#content {
  width: 100%;
  height: 100%;

  #map {
    width: 100%;
    height: 100%;
  }
}

.ol-touch .ol-control button {
  font-size: 26px;
}

.actionList {
  position: fixed;
  bottom: 0px;
  left: 0px;
  height: 200px;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;

}


.addAlarmPoint {

  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 100;

  .addAlarmPointNext {
    width: 80%;
    height: 80px;
    line-height: 80px;
    background-color: #369FFF;
    border-radius: 20px;
    font-size: 26px;
    color: white;
  }
}

.pcPlanningPath {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 100;

  .pcPlanningPathNext {
    width: 80%;
    height: 30px;
    line-height: 30px;
    background-color: #369FFF;
    border-radius: 20px;
    font-size: 16px;
    color: white;
  }
}

.mobileHomePageExpandBtn {
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 100;
}

.iconColorList {
  position: fixed;
  bottom: 20px;
  left: 30px;
  z-index: 2;
  text-align: left;
  font-size: 16px;
  color: #333333;

  .iconColorListItem {
    display: flex;
    flex-direction: row;
    justify-content: start;
    margin-top: 10px;
  }

  span {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin-right: 20px;
    display: block;
  }
}

.alarmDetailsOverlayWrapper {
  background-color: white;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 18px !important;
  padding-top: 50px;

  .alarmDetailsBox {
    margin-left: 20px;

    .title {
      width: 100%;
      font-weight: 900;
      font-size: 10px;
      text-align: left;
    }

    .alarmDetailsBoxItem {
      font-weight: 700;
      width: 100%;
      text-align: left;
      margin-top: 20px;
    }
  }

  .btnList {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;

    .btnItem {
      background-color: #369FFF;
      border-radius: 10px;
      width: 40%;
      height: 80px;
      line-height: 80px;
      color: white;
      font-weight: bold;
    }
  }
}
</style>
