import * as mars3d from "mars3d"

export let map // mars3d.Map三维地图对象
export let graphicLayer // 矢量图层对象

const arrData = [
  { name: "油罐一", position: [117.09521, 31.814404, 47.3] },
  { name: "油罐二", position: [117.095206, 31.814878, 47.3] },
  { name: "油罐三", position: [117.094653, 31.814428, 47.3] },
  { name: "发电机", position: [117.093428, 31.816959, 31.8] },
  { name: "指挥室", position: [117.093953, 31.814397, 36] },
  { name: "加热罐", position: [117.09385, 31.815837, 36.9] },
  { name: "冷却室", position: [117.094662, 31.816403, 32.9] }
]

// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
  scene: {
    center: { lat: 31.81226, lng: 117.096703, alt: 231, heading: 329, pitch: -28 }
  }
}

/**
 * @param {mars3d.Map} mapInstance 地图对象
 * @returns {void} 无
 */
export function onMounted(mapInstance) {
  map = mapInstance // 记录map

  // 加载油田联合站模型
  const tiles3dLayer = new mars3d.layer.TilesetLayer({
    pid: 2020,
    type: "3dtiles",
    name: "油田联合站",
    url: "//data.mars3d.cn/3dtiles/max-ytlhz/tileset.json",
    position: { lng: 117.094224, lat: 31.815859, alt: 26.4 },
    rotation: { z: 116.2 },
    maximumScreenSpaceError: 1,
    center: { lat: 32.407076, lng: 117.459703, alt: 3361, heading: 358, pitch: -51 }
  })
  map.addLayer(tiles3dLayer)

  // 创建DIV数据图层
  graphicLayer = new mars3d.layer.GraphicLayer()
  map.addLayer(graphicLayer)

  bindLayerPopup() // 在图层上绑定popup,对所有加到这个图层的矢量数据都生效

  // 初始加载
  divGraphicYellow()
}

/**
 * 释放当前地图业务的生命周期函数
 * @returns {void} 无
 */
export function onUnmounted() {
  map = null

  graphicLayer.remove()
  graphicLayer = null
}

// 效果一
export function divGraphicYellow() {
  graphicLayer.clear()

  for (let i = 0; i < arrData.length; i++) {
    const item = arrData[i]

    const divGraphic = new mars3d.graphic.DivGraphic({
      position: item.position,
      style: {
        html: `<div class="marsBlackPanel  animation-spaceInDown">
                <div class="marsBlackPanel-text" style="">
                  ${item.name} <span class="temperature"></span> ℃
                </div>
              </div>`,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.CENTER
      },
      attr: {
        index: i + 1,
        duNum: 0
      }
    })
    graphicLayer.addGraphic(divGraphic)

    // 刷新局部DOM,不影响popup面板的其他控件操作
    divGraphic.on(mars3d.EventType.postRender, function (event) {
      const container = event.container // popup对应的DOM
      const graphic = event.target

      const oldVal = graphic.attr.duNum

      const newVal = Number(mars3d.Util.formatDate(new Date(), "ss")) + graphic.attr.index
      if (oldVal !== newVal) {
        graphic.attr.duNum = newVal
        const temperatureDom = container.querySelector(".temperature")
        if (temperatureDom) {
          temperatureDom.innerHTML = newVal
        }
      }
    })
  }
}

// 效果二
export function divGraphicBule() {
  graphicLayer.clear()

  for (let i = 0; i < arrData.length; i++) {
    const item = arrData[i]

    const divGraphic = new mars3d.graphic.DivGraphic({
      position: item.position,
      style: {
        html: `<div class="marsBlueGradientPnl">
            <div>${item.name}</div>
        </div>`,
        offsetY: -60,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BTOOM
      }
    })
    graphicLayer.addGraphic(divGraphic)
  }
}

// 效果三
export function divGraphicWhite() {
  graphicLayer.clear()

  for (let i = 0; i < arrData.length; i++) {
    const item = arrData[i]

    const divGraphic = new mars3d.graphic.DivUpLabel({
      position: item.position,
      style: {
        text: item.name,
        color: "#fff",
        font_size: 16,
        font_family: "微软雅黑",
        lineHeight: 50,
        circleSize: 8,
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000) // 按视距距离显示
      }
    })
    graphicLayer.addGraphic(divGraphic)
  }
}

// 效果四
export function divGraphicHotSpot() {
  graphicLayer.clear()

  for (let i = 0; i < arrData.length; i++) {
    const item = arrData[i]

    const divGraphic = new mars3d.graphic.DivGraphic({
      position: item.position,
      style: {
        html: `<div class="mars-spot">
        <div class="mars-spot-board">
        <h5>${item.name}</h5>
        </div>
        <div class="mars-spot-line"></div>
      </div>`,
        offsetY: -60,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BTOOM
      }
    })
    graphicLayer.addGraphic(divGraphic)
  }
}

// 在图层绑定Popup弹窗
export function bindLayerPopup() {
  graphicLayer.bindPopup(function (event) {
    const attr = event.graphic.attr || {}
    attr["类型"] = event.graphic.type
    attr["来源"] = "我是layer上绑定的Popup"
    attr["备注"] = "我支持鼠标交互"

    return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
  })
}