<template>
  <div class="vmap">
    <div id="map" class="map-animation"></div>
  </div>
</template>
<script setup lang="js">
import './map.scss';
import { icons, MapDefaultData } from './constants.js';
import { onMounted } from 'vue';
import { deviceManageList } from '#/api/sis/deviceManage/index.js';

// 地图全局对象
let map = null;

onMounted(() => {
  mapFn.intiMap();
  // 加载设备信息
  deviceManageList({ deviceType: 1 }).then(({ rows = [], total = 0 }) => {
    if (total > 0) {
      // 渲染设备点位信息
      let items = rows.map((item) => {
        return {
          icon: 'camera',
          data: item,
          lon: item.lon,
          lat: item.lat,
        };
      });
      mapFn.renderOverLayersData(items, function (marker, data) {
        // 渲染设备点击事件
        marker.addEventListener('click', () => {
          console.log(data);
          // 查询当前设备的通道信息

          //渲染设备播放列表
          const html = [
            '<div class="video-wrap" style="width: 530px;height: 350px;padding-top:50px">',
            `<div class="wrap-title" style="margin-top: -35px;">${data.deviceName}</div>`,
            `<div class="close" onclick="pageEvent.closeInfoWindow()">X</div>`,
            `<div class="wrap-content">`,
            `<div onclick="pageEvent.playClick()" class="content-left" style="height: 270px">`,
            '<video id="video-player" ref="player1" muted autoplay></video>',
            `</div>`,
            `</div>`,
            `</div>`,
          ];
          const infoWindow = new BMap.InfoWindow(html.join(''), {
            width: 530,
            height: 350,
            enableCloseOnClick: false,
          });
          map.openInfoWindow(infoWindow, marker.point);
        });
      });
    }
  });
});
// 当前页面播放的对象
let currentPlayer = undefined;

window.pageEvent = {
  closeInfoWindow() {
    map.closeInfoWindow();
    closeVideo(currentPlayer);
  },
};

function closeVideo(player) {
  if (player) {
    try {
      player.pause();
      player.unload();
      player.destroy();
    } catch (e) {
      console.log(e);
    }
  }
}

/* 地图相关方法 */
const mapFn = {
  renderOverLayersData(data, cb, clear = true) {
    // 清楚地图上的图层
    if (clear) {
      mapFn.clearLayers();
    }
    data.forEach((v) => {
      const { lon, lat, data, icon } = v;
      const marker = new BMap.Marker(new BMap.Point(lon, lat), {
        icon: icons[icon],
      });
      // 将数据放入marker
      marker.data = data;
      marker.setTop(true, 100);
      // 保存自定义信息到marker对象中
      map.addOverlay(marker);
      if (cb) {
        cb(marker, data);
      }
    });
  },
  /**
   * 清除地图上的所有图层
   */
  clearLayers: () => map.clearOverlays(),

  /**
   * 初始化地图
   * @param cb 地图初始化的回调函数
   */
  intiMap: function (cb) {
    // 创建地图实例
    map = new BMap.Map('map', { enableMapClick: false });
    // 设置地图中心和初始层级
    map.centerAndZoom(
      new BMap.Point(MapDefaultData.center[0], MapDefaultData.center[1]),
      MapDefaultData.zoom,
    );
    // 设置地图样式
    map.setMapStyleV2({
      styleId: 'bbb822feddbffbb4dc419fc6c37f2e4e',
    });
    // 开启滚轮缩放
    map.enableScrollWheelZoom(true);
    map.clearOverlays();
    if (cb) {
      cb();
    }
  },
};
</script>
