<template>
  <pannel class="fence-location-container">
    <template v-slot:icon>
      <svg-icon icon-class="bd_evt"/>
    </template>
    <template v-slot:title>
      围栏闯禁事件
    </template>
    <template v-slot:action>

    </template>
    <template v-slot:content>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="室外围栏" :name="Tabs.outside.id">
        </el-tab-pane>
        <el-tab-pane label="室内围栏" :name="Tabs.inside.id">
          <room-layer v-if="activeName === Tabs.inside.id" :onclick="onRoomClick"/>
        </el-tab-pane>
      </el-tabs>
      <div class="location-list">
        <template v-for="evt in evtList">
          <div :key="`evt_${evt.id}`" class="list-item">
          <span class="over-flow-hidden" style="width: 60%">
            {{ evt.evtDesc }}
          </span>
            <span class="over-flow-hidden" style="width: 40%">
           {{ dayjs(evt.evtTime).format('YYYY-MM-DD HH:mm') }}
          </span>
            <!--            <span class="over-flow-hidden" style="width: 20%">-->
            <!--          </span>-->
          </div>
        </template>
        <socket-message :onMessage="onMessage" :ws="ws"></socket-message>
      </div>
    </template>
  </pannel>
</template>

<script>

import {listFenceInfo} from '@/api/bd/fenceInfo';
import {listFenceVioEvt} from '@/api/bd/fenceVioEvt';
import SocketMessage from '@/components/WebsocketMessage/index.vue';
import maphandle from '@/components/map/maphandle';
import Pannel from '@/views/bd/pannel/index.vue';
import FingerprintJS from '@fingerprintjs/fingerprintjs';
import dayjs from 'dayjs';
import evt_vio from './icon/evt_vio.svg';
import RoomLayer from "@/views/bd/rooms/index.vue";
import {EvtType, FenceType} from "@/utils/BDConst";

const Tabs = {
  outside: {
    id: 'outside',
    param: {
      evtType: EvtType.OUTSIDE.value,
      fenceType: FenceType.OUTSIDE.value
    },
  },
  inside: {
    id: 'inside',
    param: {
      evtType: EvtType.INSIDE.value,
      fenceType: FenceType.INSIDE.value,
    },
  },
}
export default {
  name: 'fenceVioEvt',
  mixins: [maphandle],
  components: {
    RoomLayer,
    SocketMessage,
    Pannel,
  },
  data() {
    return {
      Tabs,
      activeName: Tabs.outside.id,
      evtList: [],
      fp: null,
      ws: null,
      markLayer: null,
      heatlayer: null,
      listParam: Tabs.outside.param,
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    this.markLayer && window.map.removeLayersById('real_time_markerLayer');
  },
  created() {
    this.markLayer = new BDLayers.Lib.Layer.CBVectorLayer('real_time_markerLayer', true);
    this.heatlayer = new BDLayers.LibViz.Layer.HeatLayer('heatlayer', [], {
      heatValueScale: 0.5,
      heatRadius: 10,
      heatOpacity: 0.8,
    });
    window.map.addCustomLayers(this.heatlayer, 4);
    window.map.addCustomLayers(this.markLayer, 5);
  },
  mounted() {
    this.getFenceVioEvtList();
    this.getFingerprint();
    this.getFenceList();
  },
  methods: {
    dayjs,
    handleClick(tab) {
      this.listParam = Tabs[tab.name].param;
      this.getFenceVioEvtList();
      this.getFenceList();
    },
    async getFenceVioEvtList() {
      this.markLayer.removeAll();
      const {rows} = await listFenceVioEvt({
        pageNum: 1,
        pageSize: 10,
        fenceType: 1,
        ...this.listParam,
      });
      this.evtList = rows;
      this.addEvtToMap();
    },
    addEvtToMap() {
      this.evtList.forEach((item, i) => {
        const {
          lng,
          lat,
        } = item;
        var marker = new BDLayers.Lib.Overlays.MarkerImg(
          `marker0${i}`,
          [lng, lat],
          {
            imgurl: evt_vio,
            iconSize: [45, 45],
          },
        );
        this.markLayer.addMarker(marker);
      });
    },
    onRoomClick(item) {
      this.listParam = {
        ...this.listParam,
        locationId: item.bizId,
      };
      this.getFenceVioEvtList();
      this.getFenceList();
    },
    async getFenceList() {
      this.clearLayer()
      const {rows} = await listFenceInfo({
        pageNum: 1,
        pageSize: 10,
        fenceType: 1,
        ...this.listParam
      });
      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,
          },
        });
        result.push({
          id,
          name: defenceName,
          polygon,
        });
      });
    },
    async getFingerprint() {
      // 初始化FingerprintJS
      const fp = await FingerprintJS.load();
      // 获取访问者的指纹
      const result = await fp.get();
      // 配置
      const {
        osCpu,
        webGlBasics,
        languages,
        audioBaseLatency,
        reducedTransparency,
        vendor,
        vendorFlavors,
        fonts,
        fontPreferences,
        plugins,
        forcedColors,
        domBlockers,
        pdfViewerEnabled,
        audio,
        canvas,
        webGlExtensions,
        math,
        ...components
      } = result.components;
      const extendedComponents = {
        ...components,
      };
      const fingerprintId = FingerprintJS.hashComponents(extendedComponents);
      this.ws = `/pkbs/evt/${fingerprintId}`;
    },
    onMessage(a) {
      const data = JSON.parse(a.data);
      console.log('>>>>>>>>>>>>>>>>>>>>>>>>', data);
      this.$notify({
        title: '警告',
        message: `${data.msg.fenceName}发生闯禁事件。`,
        type: 'warning',
      });
      this.getFenceVioEvtList();
    },
  },
};
</script>
<style lang="scss" src="./index.scss"/>
