import * as mars3d from "mars3d"

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

let flatBillboard

// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
  scene: {
    center: { lat: 28.18408, lng: 116.160667, alt: 1138597, heading: 1, pitch: -78 },
    globe: {
      baseColor: "#a3b3c2"
    }
  },
  control: {
    infoBox: false
  },
  terrain: false,
  layers: [
    {
      type: "geojson",
      name: "全国省界",
      url: "//data.mars3d.cn/file/geojson/areas/100000_full.json",
      symbol: {
        type: "polylineCombine",
        styleOptions: {
          width: 2,
          color: "#cccccc",
          opacity: 0.8
        }
      },
      show: true
    }
  ]
}

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

  map.basemap = undefined

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

  // 在layer上绑定监听事件
  graphicLayer.on(mars3d.EventType.click, function (event) {
    const pickedItem = event.pickedObject?.data
    // let attr = event.graphic.attr
    console.log("单击了合并对象中的单个值为", pickedItem)
  })

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

  flatBillboard = new mars3d.graphic.FlatBillboard({
    // instances: [], //也可以后面通过属性传入
    style: {
      width: 30, // 单位：像素
      height: 60
    }
  })
  graphicLayer.addGraphic(flatBillboard)

  loadDemo()
}

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

// 生成图标
export function showDataPoint(numPoints) {
  clearData()
  showLoading()
  const startTime = new Date().getTime()
  // 创建等值线区域
  const extent = [112.287256, 27.408204, 120.695453, 34.659583]
  const pointGrid = turf.pointGrid(extent, numPoints, {
    units: "miles"
  })
  const arr = []
  for (let i = 0; i < pointGrid.features.length; i++) {
    const coor = pointGrid.features[i].geometry.coordinates
    const position = Cesium.Cartesian3.fromDegrees(coor[0], coor[1], 1000)

    const angle = random(0, 360) // 随机方向
    const speed = random(0, 60) // 随机数值

    arr.push({
      position: position,
      angle: angle,
      image: getImageBySpeed(speed),
      attr: {
        name: "第" + i + "个图标",
        remark: "测试绑定的属性"
      }
    })
  }

  flatBillboard.instances = arr

  hideLoading()
  const endTime = new Date().getTime()
  // 两个时间戳相差的毫秒数
  const usedTime = (endTime - startTime) / 1000
  globalMsg("共耗时" + usedTime.toFixed(2) + "秒")
}

// 清除数据
export function clearData() {
  if (flatBillboard) {
    flatBillboard.clear()
  }
}

// 加载演示数据
export function loadDemo() {
  queryWindPointApiData().then(function (arr) {
    showWindPoint(arr)
  })
}
// 访问后端接口，取数据
let arrWind
function queryWindPointApiData() {
  return new Promise(function (resolve, reject) {
    if (arrWind) {
      resolve(arrWind)
    } else {
      mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/apidemo/windpoint.json" })
        .then(function (result) {
          arrWind = result.data
          resolve(arrWind)
        })
        .catch(function (error) {
          console.log("加载JSON出错", error)
        })
    }
  })
}

function showWindPoint(arr) {
  clearData()
  const arrPoint = []
  for (let i = 0, len = arr.length; i < len; i++) {
    const item = arr[i]
    arrPoint.push({
      position: Cesium.Cartesian3.fromDegrees(item.x, item.y, 1000),
      angle: 360 - item.dir, // 方向
      image: getImageBySpeed(item.speed), // 速度 ，使用不同图片
      attr: {
        name: "第" + i + "个图标",
        remark: "测试绑定的属性"
      }
    })
  }
  flatBillboard.instances = arrPoint
}

function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

function getImageBySpeed(speed) {
  let windVaneUrl = "img/windVane/01.svg"
  if (speed >= 0 && speed <= 2) {
    windVaneUrl = "img/windVane/01.svg"
  } else if (speed > 2 && speed <= 4) {
    windVaneUrl = "img/windVane/02.svg"
  } else if (speed > 4 && speed <= 6) {
    windVaneUrl = "img/windVane/03.svg"
  } else if (speed > 6 && speed <= 8) {
    windVaneUrl = "img/windVane/04.svg"
  } else if (speed > 8 && speed <= 10) {
    windVaneUrl = "img/windVane/05.svg"
  } else if (speed > 10 && speed <= 12) {
    windVaneUrl = "img/windVane/06.svg"
  } else if (speed > 12 && speed <= 14) {
    windVaneUrl = "img/windVane/07.svg"
  } else if (speed > 14 && speed <= 16) {
    windVaneUrl = "img/windVane/08.svg"
  } else if (speed > 16 && speed <= 18) {
    windVaneUrl = "img/windVane/09.svg"
  } else if (speed > 18 && speed <= 20) {
    windVaneUrl = "img/windVane/10.svg"
  } else if (speed > 20 && speed <= 22) {
    windVaneUrl = "img/windVane/11.svg"
  } else if (speed > 22 && speed <= 24) {
    windVaneUrl = "img/windVane/12.svg"
  } else if (speed > 24 && speed <= 26) {
    windVaneUrl = "img/windVane/13.svg"
  } else if (speed > 26 && speed <= 28) {
    windVaneUrl = "img/windVane/14.svg"
  } else if (speed > 28 && speed <= 30) {
    windVaneUrl = "img/windVane/15.svg"
  } else if (speed > 30 && speed <= 32) {
    windVaneUrl = "img/windVane/16.svg"
  } else if (speed > 32 && speed <= 34) {
    windVaneUrl = "img/windVane/17.svg"
  } else if (speed > 34 && speed <= 36) {
    windVaneUrl = "img/windVane/18.svg"
  } else if (speed > 36 && speed <= 38) {
    windVaneUrl = "img/windVane/19.svg"
  } else if (speed > 38 && speed <= 40) {
    windVaneUrl = "img/windVane/20.svg"
  } else if (speed > 40 && speed <= 42) {
    windVaneUrl = "img/windVane/21.svg"
  } else if (speed > 42 && speed <= 44) {
    windVaneUrl = "img/windVane/22.svg"
  } else if (speed > 44 && speed <= 46) {
    windVaneUrl = "img/windVane/23.svg"
  } else if (speed > 46 && speed <= 48) {
    windVaneUrl = "img/windVane/24.svg"
  } else if (speed > 48 && speed <= 50) {
    windVaneUrl = "img/windVane/25.svg"
  } else if (speed > 50 && speed <= 52) {
    windVaneUrl = "img/windVane/26.svg"
  } else if (speed > 52 && speed <= 54) {
    windVaneUrl = "img/windVane/27.svg"
  } else if (speed > 54 && speed <= 56) {
    windVaneUrl = "img/windVane/28.svg"
  } else if (speed > 56) {
    windVaneUrl = "img/windVane/29.svg"
  }
  return windVaneUrl
}

// 在图层绑定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 })
  })
}