import * as mars3d from "mars3d"

export let map // mars3d.Map三维地图对象
let geoJsonLayer // 矢量图层对象,用于layer绑定展示
let graphicLayer // 矢量图层对象,用于graphic绑定展示

export const eventTarget = new mars3d.BaseClass()

/**
 * 初始化地图业务，生命周期钩子函数（必须）
 * 框架在地图初始化完成后自动调用该函数
 * @param {mars3d.Map} mapInstance 地图对象
 * @returns {void} 无
 */
export function onMounted(mapInstance) {
  map = mapInstance // 记录map

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

  map.on(mars3d.EventType.tooltipOpen, function (event) {
    const container = event.container // tooltip对应的DOM
    console.log("打开了tooltip(全局监听)", event)
  })
  map.on(mars3d.EventType.tooltipClose, function (event) {
    const container = event.container // tooltip对应的DOM
    console.log("关闭了tooltip(全局监听)", event)
  })

  bindLayerDemo()
}

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

function removeDemoLayer() {
  graphicLayer.clear()

  if (geoJsonLayer) {
    geoJsonLayer.remove(true)
    geoJsonLayer = null
  }
}

// 1.在map地图上绑定Tooltip移入信息窗
export function bindMapDemo() {
  removeDemoLayer()

  // 关闭弹窗
  map.closeTooltip()

  // 传入坐标和内容，可以直接任意弹出
  const position = [116.328539, 30.978731, 1521]
  map.openTooltip(position, "我是地图上直接弹出的")
}

// 2.在layer图层上绑定Tooltip弹窗
export function bindLayerDemo() {
  removeDemoLayer()

  geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    name: "标绘示例数据",
    url: "//data.mars3d.cn/file/geojson/mars3d-draw.json"
  })
  map.addLayer(geoJsonLayer)

  // 在layer上绑定Tooltip弹窗
  geoJsonLayer.bindTooltip(function (event) {
    const attr = event.graphic.attr
    return attr.type + " 我是layer上绑定的Tooltip"

    // return new Promise((resolve) => {
    //   //这里可以进行后端接口请求数据，setTimeout测试异步
    //   setTimeout(() => {
    //     resolve('Promise异步回调显示的弹窗内容信息')
    //   }, 2000)
    // })
  })

  geoJsonLayer.on(mars3d.EventType.tooltipOpen, function (event) {
    const container = event.container // tooltip对应的DOM
    console.log("图层上打开了tooltip", container)
  })
  geoJsonLayer.on(mars3d.EventType.tooltipClose, function (event) {
    const container = event.container // tooltip对应的DOM
    console.log("图层上移除了tooltip", container)
  })

  // geoJsonLayer.on(mars3d.EventType.popupOpen, function (event) {
  //   const container = event.container // popup对应的DOM
  //   console.log("图层上打开了popup", container)
  // })
  // geoJsonLayer.on(mars3d.EventType.popupClose, function (event) {
  //   const container = event.container // popup对应的DOM
  //   console.log("图层上移除了popup", container)
  // })
}

// 2.在layer图层上预定义Popup单击弹窗
export function bindLayerDemo2() {
  removeDemoLayer()

  geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    name: "标绘示例数据",
    url: "//data.mars3d.cn/file/geojson/mars3d-draw.json",
    // tooltip按属性字段配置，可以是字符串模板或数组
    // tooltip: 'all', //显示所有属性，常用于测试
    // tooltip: '{name} {type}',
    tooltip: [
      { field: "id", name: "编码" },
      { field: "name", name: "名称" },
      { field: "type", name: "类型" }
    ],
    tooltipOptions: { direction: "right", offsetX: 10 }
  })
  map.addLayer(geoJsonLayer)
}

// 2.在layer图层上绑定Tooltip弹窗
export function bindLayerTemplateDemo() {
  removeDemoLayer()

  geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    name: "标绘示例数据",
    url: "//data.mars3d.cn/file/geojson/mars3d-draw.json"
  })
  map.addLayer(geoJsonLayer)

  // 在layer上绑定Tooltip弹窗
  geoJsonLayer.bindTooltip(
    function (event) {
      const attr = event.graphic.attr
      return "我是layer上绑定的自定义模版Tooltip<br />" + attr.type
    },
    {
      template: `<div class="marsBlackPanel">
                        <div class="marsBlackPanel-text">{content}</div>
                      </div>`,
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      verticalOrigin: Cesium.VerticalOrigin.CENTER
    }
  )

  geoJsonLayer.on(mars3d.EventType.tooltipOpen, function (event) {
    const container = event.container // tooltip对应的DOM
    console.log("图层上打开了tooltip", container)
  })
  geoJsonLayer.on(mars3d.EventType.tooltipClose, function (event) {
    const container = event.container // tooltip对应的DOM
    console.log("图层上移除了tooltip", container)
  })
}

// 3.在graphic数据上绑定Tooltip弹窗
export function bindGraphicDemo1() {
  removeDemoLayer()

  const graphic = new mars3d.graphic.BoxEntity({
    position: new mars3d.LngLatPoint(116.328539, 30.978731, 1521),
    style: {
      dimensions: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
      fill: true,
      color: "#00ff00",
      opacity: 0.9,
      label: {
        text: "graphic绑定的演示",
        font_size: 19,
        pixelOffsetY: -45,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      }
    },
    attr: { remark: "示例1" }
  })
  graphicLayer.addGraphic(graphic)

  function getInnerHtml(event) {
    // let attr = event.graphic.attr
    const inthtml = `<table style="width:280px;">
                <tr><th scope="col" colspan="4"  style="text-align:center;font-size:15px;">graphic.bindTooltip</th></tr>
                <tr><td >说明：</td><td >Tooltip鼠标移入信息弹窗 </td></tr>
                <tr><td >方式：</td><td >可以绑定任意html </td></tr>
                <tr><td >备注：</td><td >我是graphic上绑定的Tooltip</td></tr>
              </table>`
    return inthtml
  }

  // 绑定Tooltip
  graphic.bindTooltip(getInnerHtml, { direction: "right" }).openTooltip()

  graphic.on(mars3d.EventType.tooltipOpen, function (event) {
    const container = event.container // tooltip对应的DOM
    console.log("打开了tooltip", container)
  })
  graphic.on(mars3d.EventType.tooltipClose, function (event) {
    const container = event.container // tooltip对应的DOM
    console.log("移除了tooltip", container)
  })
}

// 3.在graphic数据上绑定Tooltip弹窗
export function bindGraphicDemo2() {
  removeDemoLayer()

  const graphic = new mars3d.graphic.BillboardEntity({
    position: new mars3d.LngLatPoint(116.328539, 30.978731, 1521),
    style: {
      image: "img/marker/di3.png",
      scale: 0.5,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      label: {
        text: "Tooltip局部更新绑定的演示",
        font_size: 18,
        font_family: "楷体",
        pixelOffsetY: -45,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      }
    },
    attr: { remark: "示例2" }
  })
  graphicLayer.addGraphic(graphic)

  const innerHtml = `<table style="width:280px;">
                <tr><th scope="col" colspan="4"  style="text-align:center;font-size:15px;">graphic.bindTooltip局部刷新</th></tr>
                <tr><td >说明：</td><td >Tooltip鼠标移入信息弹窗 </td></tr>
                <tr><td >方式：</td><td >可以绑定任意html </td></tr>
                <tr><td >备注：</td><td >我是graphic上绑定的Tooltip</td></tr>
                <tr><td >时间：</td><td id="tdTime"></td></tr>
                <tr><td colspan="4" style="text-align:right;cursor: pointer;"><button  id="btnDetails">更多</button></td></tr>
              </table>`

  graphic.on(mars3d.EventType.tooltipOpen, function (event) {
    const container = event.container // popup对应的DOM
    console.log("打开了popup", container)

    const btnDetails = container.querySelector("#btnDetails")
    if (btnDetails) {
      btnDetails.addEventListener("click", (e) => {
        showXQ()
      })
    }
  })

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

    const tdTime = container.querySelector("#tdTime")
    if (tdTime) {
      const date = mars3d.Util.formatDate(new Date(), "yyyy-MM-dd HH:mm:ss S")
      tdTime.innerHTML = date
    }
  })
  // 绑定Tooltip
  graphic.bindTooltip(innerHtml, { offsetY: -30, pointerEvents: true }).openTooltip()
}

// 只是为了演示，可以单击详情
function showXQ() {
  const showHistoryLayer = true
  eventTarget.fire("showWebsite", { showHistoryLayer })
}