import * as mars3d from "mars3d"

export let map // mars3d.Map三维地图对象
let routeLayer
let gaodeRoute

// 当前页面业务相关
let startGraphic
let endPointArr
let poiLayer
let queryGaodePOI

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

// 自定义事件
export const eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出事件到面板中

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

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

  gaodeRoute = new mars3d.query.GaodeRoute({})

  queryGaodePOI = new mars3d.query.GaodePOI({})

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

  poiLayer.bindPopup(function (event) {
    const item = event.graphic.attr

    let inHtml = '<div class="mars3d-template-titile">' + item.name + '</div><div class="mars3d-template-content" >'

    const type = String(item.type).trim()
    if (type) {
      inHtml += "<div><label>类别</label>" + type + "</div>"
    }

    const xzqh = String(item.xzqh).trim()
    if (xzqh) {
      inHtml += "<div><label>区域</label>" + xzqh + "</div>"
    }

    const tel = String(item.tel).trim()
    if (tel) {
      inHtml += "<div><label>电话</label>" + tel + "</div>"
    }

    if (item.address) {
      const address = item.address.trim()
      inHtml += "<div><label>地址</label>" + address + "</div>"
    }
    inHtml += "</div>"
    return inHtml
  })
}

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

// 起点
export function startPoint() {
  if (startGraphic) {
    startGraphic.remove()
    startGraphic = null
  }
  routeLayer.clear()

  return map.graphicLayer
    .startDraw({
      type: "billboard",
      style: {
        image: "img/marker/start.png",
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      }
    })
    .then((graphic) => {
      startGraphic = graphic
      const point = graphic.point
      point.format()

      return point.lng + "," + point.lat
    })
}

// 终点
export function endPoint() {
  showLoading()
  routeLayer.clear()
  poiLayer.clear()
  endPointArr = null

  const extent = map.getExtent() // 当前视域内

  queryGaodePOI.queryPolygon({
    text: "企业",
    polygon: [
      [extent.xmin, extent.ymin],
      [extent.xmin, extent.ymax],
      [extent.xmax, extent.ymax],
      [extent.xmax, extent.ymin]
    ],
    page: 0,
    count: 10,
    success: function (res) {
      hideLoading()

      const count = res.count
      eventTarget.fire("end", { count })

      addEndPointEntity(res.list)
    },
    error: function (msg) {
      globalMsg(msg)
      hideLoading()
    }
  })
}

// 开始分析
export function btnAnalyse(type, count) {
  if (!startGraphic || !endPointArr || endPointArr.length === 0) {
    globalMsg("请设置起点和查询目的地")
    return
  }
  showLoading()

  queryRoute(type)
}

function queryRoute(type) {
  const startPoint = startGraphic.coordinate
  const points = []

  endPointArr.forEach((item) => {
    points.push([startPoint, [item.x, item.y]])
  })

  gaodeRoute.queryArr({
    type: Number(type), // GaodeRouteType枚举类型
    points: points,
    success: function (data) {
      hideLoading()

      showRouteResult(data)
    },
    error: function (msg) {
      hideLoading()
      globalAlert(msg)
    }
  })
}

function showRouteResult(data) {
  for (let i = 0; i < data.length; i++) {
    const item = data[i]
    if (!item) {
      continue
    }

    const lnglats = item.points
    if (!lnglats || lnglats.length < 1) {
      continue
    }

    const name = endPointArr[i].name

    const time = mars3d.Util.formatTime(item.allDuration)
    const distance = mars3d.MeasureUtil.formatDistance(item.allDistance)
    const html = "目的地：" + name + "<br/>总距离：" + distance + "<br/>所需时间：" + time + ""

    const graphic = new mars3d.graphic.PolylineEntity({
      positions: lnglats,
      style: {
        clampToGround: true,
        material: Cesium.Color.fromRandom({
          alpha: 0.7
        }),
        width: 4
      },
      popup: html
    })
    routeLayer.addGraphic(graphic)

    graphic.entityGraphic.material_old = graphic.entityGraphic.material
    graphic.entityGraphic.width_old = graphic.entityGraphic.width

    const id = graphic.id
    eventTarget.fire("analyse", { i, name, distance, time, id })
  }
}

// 终点的POI查询
function addEndPointEntity(arr) {
  console.log("查询数据结果", arr)

  endPointArr = arr

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

    const graphic = new mars3d.graphic.BillboardEntity({
      position: Cesium.Cartesian3.fromDegrees(item.x, item.y),
      style: {
        image: "img/marker/end.png",
        scale: 1,
        clampToGround: true, // 贴地
        label: {
          text: item.name,
          font: "20px 楷体",
          color: Cesium.Color.AZURE,
          outline: true,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
          clampToGround: true // 贴地
        }
      },
      attr: item
    })
    poiLayer.addGraphic(graphic)
  }
}

let lastRoute
export function centerAtRoute(id) {
  const graphic = routeLayer.getGraphicById(id)

  if (lastRoute) {
    lastRoute.entityGraphic.material = lastRoute.entityGraphic.material_old
    lastRoute.entityGraphic.width = lastRoute.entityGraphic.width_old
  }

  // 动画线材质
  graphic.entityGraphic.width = 5
  graphic.entityGraphic.material = mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
    color: Cesium.Color.CHARTREUSE,
    image: "img/textures/line-color-yellow.png",
    speed: 20
  })

  map.flyToGraphic(graphic)

  lastRoute = graphic
}

// 清除按钮
export function removeAll() {
  if (startGraphic) {
    startGraphic.remove()
    startGraphic = null
  }
  routeLayer.clear()
  poiLayer.clear()
  endPointArr = null
}