<template>
  <el-dialog
    title="室内定位融合"
    :visible.sync="centerDialogVisible"
    width="70vw"
    @closed="onDialogClose"
    @opened="play"
    center>
    <div style="width: 100%;height: 70vh;position: relative">
      <bd-map :loaded="loaded" map-id="room-map"/>
      <video-p ref="videoP"/>
      <socket-message
        v-if="centerDialogVisible"
        :key="`device_uwb001`" :onMessage="onMessage"
        :ws="`/ws/point/uwb001`"></socket-message>
    </div>
  </el-dialog>
</template>

<script>

import {listFenceInfo, pushDevcLocation} from '@/api/bd/fenceInfo';
import SocketMessage from '@/components/WebsocketMessage/index.vue';
import BdMap from '@/components/map/index.vue';
import maphandle from '@/components/map/maphandle';
import position from '@/views/bd/realtimeLocation/icon/position.png';
import dayjs from 'dayjs';
import VideoP from "@/views/bd/roomlocation/roommap/video/video.vue";
// import {uuid} from "@/utils";

export default {
  name: 'room-map',
  mixins: [maphandle],
  components: {
    VideoP,
    BdMap,
    SocketMessage,
  },
  data() {
    return {
      centerDialogVisible: false,
      locationMarkers: {},
      mapIns: null,
      playInterval: null,
      fencePolyLayer: null,
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    this.markLayer && this.mapIns.removeLayersById('markerLayer');
    this.fencePolyLayer && this.fencePolyLayer.cust.clearLayer()
    this.playInterval && clearInterval(this.playInterval);
  },
  created() {

  },
  mounted() {
  },
  methods: {
    dayjs,
    onDialogClose() {
      this.playInterval && clearInterval(this.playInterval);
    },
    loaded(map) {
      const vtLayer = new BDLayers.Lib.Layer.CBTileLayer('blayer_ng_s', {
        url: 'http://bd.xt.wenhq.top:8083/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=bdlayers:bdl_cyy_pingmian&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&Format=image/jpeg&TILECOL={x}&TILEROW={y}',
        maxZoom: 24,
        minZoom: 15,
      });
      map.addCustomLayers(vtLayer);
      this.markLayer = new BDLayers.Lib.Layer.CBVectorLayer('markerLayer', true);
      map.addCustomLayers(this.markLayer);
      this.mapIns = map;
      map.setPitch(0);
      map.setCenter([118.86895, 32.01326]);
      this.fencePolyLayer = this.createLayer(map);
      this.getFenceList();
    },
    show() {
      this.centerDialogVisible = true;
    },
    addMarker(data) {
      const {
        latitude,
        longitude,
        deviceId,
      } = data;
      const marker = new BDLayers.Lib.Overlays.MarkerImg(
        `marker${deviceId}`,
        [longitude, latitude],
        {
          imgurl: position,
          iconSize: [25, 30],
          symbol: {
            'textName': 'm4',
            'textSize': 14,
            'markerFile': position,
            'markerHorizontalAlignment': 'middle', // left, middle(默认), right
            'markerVerticalAlignment': 'middle', // top, middle, bottom(默认)
          },
        },
      );
      this.markLayer.addMarker(marker);
      return marker;
    },
    async getFenceList() {
      const {rows} = await listFenceInfo({
        pageNum: 1,
        pageSize: 10,
        fenceType: 2,
      });
      if (!rows || rows.length < 1) {
        return;
      }
      const result = [];
      rows.forEach(item => {
        const {
          id,
          defenceName,
          poly,
        } = item;
        const polygon = this.drawPoly({
          name: defenceName,
          coordinates: this.polygonToCoordinates(poly),
          symbol: {
            lineColor: 'rgba(241,0,23,0.49)',
            lineWidth: 2,
            polygonFill: 'rgba(241,0,23,0.49)',
            polygonOpacity: 0.4,
          },
          bizAttr: {
            id,
            name: defenceName,
          },
        }, this.fencePolyLayer);
        result.push({
          id,
          name: defenceName,
          polygon,
        });
      });
    },
    onMessage(a) {
      const data = JSON.parse(a.data);
      const {
        latitude,
        longitude,
        deviceId,
      } = data;
      console.log('>>>>>>>>>>>>>>>>>>>>>>>>', data);
      if (!this.locationMarkers[deviceId]) {
        this.locationMarkers[deviceId] = this.addMarker(data);
        return;
      }
      this.locationMarkers[deviceId].moveMarker([longitude, latitude], 1500, false);
    },
    play() {
      if (!this.mapIns) {
        return;
      }
      this.mapIns.setZoom(22)
      const gps = [
        [118.868928794571, 32.0132512031322],
        [118.868928459294, 32.0132364200935],
        [118.868929129847, 32.0132159512668],
        [118.868929129847, 32.0132108340593],
        [118.868968021877, 32.0132017368011],
        [118.868968021877, 32.0132185098704],
        [118.868967016049, 32.0132259013915],
        [118.868966680773, 32.0132313028872],
        [118.868967016049, 32.0132440959023],
        [118.86897908599, 32.0132523402889],
        [118.868979756542, 32.0132458016376],
        [118.868983444579, 32.0132352829366],
        [118.868990820654, 32.0132375572504],
        [118.868992497035, 32.0132440959023],
        [118.869004566975, 32.0132483602403],
        [118.869005572804, 32.013257457494],
        [118.8690266952, 32.0132577417831],
        [118.869029712685, 32.0132577417831],
        [118.869031724342, 32.0132577417831],
        [118.869032394894, 32.0132625746988],
        [118.868924100705, 32.0132523402889]
      ]
      let i = 0;
      this.playInterval && clearInterval(this.playInterval);
      this.playInterval = setInterval(() => {
        if (i === 0) {
          this.$refs.videoP.play();
        }
        pushDevcLocation({
          devcKey: 'uwb001',
          lat: gps[i][1],
          lng: gps[i][0],
        });
        // this.onMessage({
        //       data: JSON.stringify({
        //         latitude: gps[i][1],
        //         longitude: gps[i][0],
        //         deviceId: 'uwb001',
        //       })
        //     }
        // );
        // var marker = new BDLayers.Lib.Overlays.MarkerIcon(`marker${uuid()}`, gps[i], {
        //   iconSize: 45,
        //   iconColor: 'red',
        //   labelText: `${i}`
        // });
        // marker.getMarker().addTo(this.mapIns.map);
        if (i === gps.length - 2) {
          return;
        }
        i++;
      }, 2000);
    },
  },
};
</script>
