import { Scene, RasterLayer, MarkerLayer, Marker } from '@antv/l7'
import { Map } from '@antv/l7-maps'
/**
 * 初始化创建地图
 * @param { string } id
 * @param { config } object
 */
export function initMap(id, config) {
  return new Promise((resolve, reject) => {
    const scene = new Scene({
      id,
      logoVisible: false,
      map: new Map({
        ...config
      })
    })
    window.scene = scene
    resolve(scene)
  })
}
/**
 * 添加底图
 * 根据数组index值控制图层显示层级
 * @param { array } arr
 */
export function initLayer(arr) {
  arr.map((item, index) => {
    const layer = new RasterLayer({
      zIndex: index,
      name: item.name
    }).source(item.url, {
      parser: {
        type: 'rasterTile',
        tileSize: 256
      }
    })
    window.scene.addLayer(layer)
  })
}
/**
 * 添加自定义点图层
 * 数据对象 [{longitude: '', latitude: ''}, {longitude: '', latitude: ''}]
 * @param { array } arr
 * 图层配置: { zIndex: 100, name: ''}
 * @param { object } layerAttr
 * 自定义模板样式: {widht: '', height：'', ......}
 * @param { object } style
 * 事件名称: ['click', 'mouseover']
 * @param { array } eventArr
 */
export function createMarker(arr, config) {
  const markerLayer = new MarkerLayer(config.layerAttr)
  arr.map((item) => {
    // 创建marker
    if (item.longitude && item.latitude) {
      const marker = new Marker({
        element: createMakerElement(item, config.layerAttr, config.style),
        extData: item
      }).setLnglat([item.longitude, item.latitude])
      // 绑定鼠标事件
      // config.eventArr.map((event) => {
      //   marker.on(event, (e) => {
      //     eventHub.emit(config.layerAttr.name + '-' + event, e)
      //   })
      // })
      markerLayer.addMarker(marker)
    }
  })
  window.scene.addMarkerLayer(markerLayer)
  return markerLayer
}
/**
 * 创建模板
 * makre的数据源
 * @param { object } item
 * 图层属性：根据图层名称 使用不同的自定义模板
 * @param { layerAttr } object
 * 自定义模板样式和图标名称
 * @param { object } style
 */
export function createMakerElement(item, layerAttr, style) {
  // 防火分区
  if (layerAttr.name === 'accident') {
    const el = document.createElement('div')
    el.innerHTML = `<div style="height: ${style.height};width:${style.width};"><img src="/image/icon/${item.image}.png" style="width:100%;height:100%;"></div>`
    return el
  }
}
export function destoryScene() {
  window.scene.destroy()
}