import * as mars3d from "mars3d"

export let map // mars3d.Map三维地图对象
let graphicLayer
const centerArr = [] // 视角数组
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
  scene: {
    center: { lat: 31.84646, lng: 117.223095, alt: 790, heading: 189, pitch: -13 },
    clock: {
      startTime: "2017/08/25 08:00:00",
      stopTime: "2017/08/25 08:01:30"
    }
  },
  control: {
    // animation: true, //是否创建 动画小器件，左下角仪表
    timeline: true // 是否显示 时间线控件
  }
}

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

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

  // 加模型
  const tilesetLayer = new mars3d.layer.TilesetLayer({
    name: "合肥天鹅湖",
    type: "3dtiles",
    url: "//data.mars3d.cn/3dtiles/qx-teh/tileset.json",
    position: { lng: 117.218434, lat: 31.81807, alt: 163 },
    flatHeight: 120,
    maximumScreenSpaceError: 16,
    maximumMemoryUsage: 1024,
    dynamicScreenSpaceError: true,
    cullWithChildrenBounds: false,
    skipLevelOfDetail: true,
    preferLeaves: true
  })
  map.addLayer(tilesetLayer)

  showDitailInfo()
}

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

const arrData = [
  {
    title: "中国安徽广播电视台",
    description: "安徽广播电视台（AHTV）是集广播、电视、报纸、</br>网络、新媒体等多种业务为一体的省级广播电视综合传</br>媒机构。",
    center: { lat: 31.817346, lng: 117.216403, alt: 342, heading: 168, pitch: -13, duration: 2 },
    position: [117.219971, 31.808482, 264.9],
    startTime: "2017/08/25 08:00:04",
    endTime: "2017/08/25 08:00:07"
  },
  {
    title: "合肥市政务中心",
    description: "合肥市人民政府政务服务中心为市委、市政府派出机构，</br>服务中心成立党工委和管委会，内设综合处、</br>督查处、审批项目协调处",
    center: { lat: 31.818069, lng: 117.221763, alt: 173, heading: 355, pitch: -5, duration: 3 },
    position: [117.222139, 31.822782, 166.6],
    startTime: "2017/08/25 08:00:09",
    endTime: "2017/08/25 08:00:12"
  },
  {
    title: "合肥市文化旅游局",
    description: "合肥市文化和旅游局和市文化和旅游局是市政府工作部门，</br>为正处级，加挂市广播电视新闻出版局牌子",
    center: { lat: 31.813929, lng: 117.217225, alt: 142, heading: 330, pitch: -14, duration: 3 },
    position: [117.215827, 31.818229, 84.6],
    startTime: "2017/08/25 08:00:14",
    endTime: "2017/08/25 08:00:17"
  },
  {
    title: "合肥大剧院",
    description: "合肥大剧院又名天鹅湖大剧院，主要由歌剧厅、</br>音乐厅、多功能厅等部分组成。",
    center: { lat: 31.815301, lng: 117.218273, alt: 107, heading: 11, pitch: -13, duration: 3 },
    position: [117.218782, 31.8176, 64.9],
    startTime: "2017/08/25 08:00:19",
    endTime: "2017/08/25 08:00:22"
  }
]

function showDitailInfo() {
  for (let i = 0; i < arrData.length; i++) {
    // 动态坐标属性
    const property = new Cesium.SampledPositionProperty()
    const startTime = Cesium.JulianDate.fromDate(new Date(arrData[i].startTime))
    const endTime = Cesium.JulianDate.fromDate(new Date(arrData[i].endTime))

    property.addSample(startTime, Cesium.Cartesian3.fromDegrees(...arrData[i].position)) // 此刻显示
    property.addSample(endTime, Cesium.Cartesian3.fromDegrees(...arrData[i].position)) // 此刻不显示

    const stopTime = new Date(arrData[i].endTime).getSeconds() - new Date(arrData[i].startTime).getSeconds()

    arrData[i].center.stop = stopTime // 停顿视角
    centerArr.push(arrData[i].center) // center集合

    const graphic = new mars3d.graphic.DivGraphic({
      position: property,
      style: {
        html: `<div class="marsTiltPanel marsTiltPanel-theme-red">
      <div class="marsTiltPanel-wrap">
          <div class="area">
              <div class="arrow-lt"></div>
              <div class="b-t"></div>
              <div class="b-r"></div>
              <div class="b-b"></div>
              <div class="b-l"></div>
              <div class="arrow-rb"></div>
              <div class="label-wrap">
                  <div class="title">${arrData[i].title}</div>
                  <div class="label-content">
                      <div class="data-li">
                          <div class="data-value"><span class="label-unit">${arrData[i].description}</span>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="b-t-l"></div>
          <div class="b-b-r"></div>
      </div>
      <div class="arrow" ></div>
  </div>`,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      }
    })
    graphicLayer.addGraphic(graphic)
  }
  map.setCameraViewList(centerArr) // 视角
}