import * as mars3d from "mars3d"

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

// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
  scene: {
    center: { lat: 31.215956, lng: 121.508605, alt: 887, heading: 5, pitch: -26 }
  },
  layers: [
    {
      type: "3dtiles",
      name: "上海市建筑物",
      url: "//data.mars3d.cn/3dtiles/jzw-shanghai/tileset.json",
      maximumScreenSpaceError: 1,
      maximumMemoryUsage: 1024,
      style: {
        color: "rgb(0, 99, 255)"
      },
      marsJzwStyle: true,
      popup: [
        { field: "objectid", name: "编号" },
        { field: "name", name: "名称" },
        { field: "height", name: "楼高", unit: "米" }
      ],
      show: true
    },
    {
      type: "geojson",
      name: "市区一级道路",
      url: "//data.mars3d.cn/file/geojson/shanghai-road.json",
      symbol: {
        styleOptions: {
          width: 2.0,
          material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.ODLine, {
            bgColor: new Cesium.Color(0.1, 0.7, 0.5, 0.4),
            color: new Cesium.Color(Math.random() * 0.5 + 0.5, Math.random() * 0.8 + 0.2, 0.0, 1.0),
            speed: 20 + 1.0 * Math.random(),
            startTime: Math.random()
          })
        }
      },
      popup: "{Name}",
      show: true
    }
  ]
}

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

  map.basemap = 2017 // 切换到蓝色底图

  // 3d模型裁剪
  const tilesetPlanClip = new mars3d.thing.TilesetPlanClip({
    layer: map.getLayer("上海市建筑物", "name"),
    clipOutSide: true,
    positions: [
      [121.477666, 31.217061, 19.1],
      [121.531567, 31.217061, 19.1],
      [121.531567, 31.258551, 19.1],
      [121.477666, 31.258551, 19.1]
    ]
  })
  map.addThing(tilesetPlanClip)

  // 特效
  const bloomEffect = new mars3d.effect.BloomEffect({
    enabled: true
  })
  map.addEffect(bloomEffect)

  // // 围绕旋转
  // const rotatePoint = new mars3d.thing.RotatePoint({
  //   direction: true, // 方向 true逆时针，false顺时针
  //   time: 50 // 给定飞行一周所需时间(单位 秒)，控制速度
  // })
  // map.addThing(rotatePoint)

  // 添加矢量数据
  addCityGraphics()
}

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

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

  // 模型的中心点
  const position = [121.510608, 31.234322, 0] // 用于围绕旋转 + 中心点扩散 + 旋转的图片
  const center = Cesium.Cartesian3.fromDegrees(position[0], position[1], 140) // 用于div标注和远眺的线

  // 中心扩散点
  const circleDiffuseWallGlow = new mars3d.graphic.DiffuseWall({
    name: "中心扩散点",
    position: position,
    style: {
      diffHeight: 500, // 高度
      radius: 150, // 半径
      color: "#7ffeff",
      speed: 6 // 速度
    }
  })
  graphicLayer.addGraphic(circleDiffuseWallGlow)

  // 旋转的图片 -- 中心围墙
  const WallImagePositions = mars3d.PolyUtil.getEllipseOuterPositions({
    position: position,
    radius: 50, // 半径
    count: 50 // 共返回(count*4)个点
  })
  const rotatWallImage = new mars3d.graphic.WallPrimitive({
    positions: WallImagePositions,
    style: {
      diffHeight: 190,
      closure: true,
      material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.RectSlide, {
        image: "img/tietu/circular.png",
        speed: 2
      })
    }
  })
  graphicLayer.addGraphic(rotatWallImage)

  // 旋转的图片 -- 底部
  let rotation = Cesium.Math.toRadians(50)
  function getRotationValue() {
    rotation -= 0.007
    return rotation
  }
  const rotatCicleImage = new mars3d.graphic.CircleEntity({
    position: position,
    style: {
      radius: 500,
      height: 50,
      material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.Image2, {
        image: "/img/textures/circle-two.png"
      }),
      rotation: new Cesium.CallbackProperty(getRotationValue, false),
      stRotation: new Cesium.CallbackProperty(getRotationValue, false)
    }
  })
  graphicLayer.addGraphic(rotatCicleImage)

  // gltf的方式：四面体
  // const graphic = new mars3d.graphic.ModelEntity({
  //   name: "四面体",
  //   position: [position[0], position[1], 180],
  //   style: {
  //     url: "//data.mars3d.cn/gltf/mars/zhui.glb",
  //     scale: 30
  //   }
  // })
  // graphicLayer.addGraphic(graphic)
  // 开始 自旋转效果
  // graphic.rotateStart({
  //   direction: true, // 控制方向, true逆时针，false顺时针
  //   time: 6 // time：给定飞行一周所需时间(单位 秒)，控制速度
  // })

  // 四面体
  const tetrahedron = new mars3d.graphic.Tetrahedron({
    position: [position[0], position[1], 180],
    style: {
      width: 20,
      height: 30,
      color: "rgba(200,200,0,0.7)",
      moveHeight: 50
    }
  })
  graphicLayer.addGraphic(tetrahedron)

  // divgraphic标注
  const divgraphic = new mars3d.graphic.DivGraphic({
    position: center,
    style: {
      html: `<div class="marsBlackPanel">
          <div class="marsBlackPanel-text">Mars3D国际大厦</div>
      </div>`,
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 横向定位
      verticalOrigin: Cesium.VerticalOrigin.CENTER // 垂直定位
    }
  })
  graphicLayer.addGraphic(divgraphic)

  // 扫描圆形
  const scanCircle = new mars3d.graphic.CircleEntity({
    position: Cesium.Cartesian3.fromDegrees(121.501618, 31.235704, 24.2),
    style: {
      radius: 480.0,
      material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.CircleScan, {
        image: "/img/textures/circle-scan.png",
        color: "#ffffff"
      }),
      stRotation: new Cesium.CallbackProperty(getRotationValue, false),
      classificationType: Cesium.ClassificationType.BOTH,
      clampToGround: true
    }
  })
  graphicLayer.addGraphic(scanCircle)

  // 远眺的线 ,数据获取的pointArr
  mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/shanghai-point.json" })
    .then((result) => {
      const pointArr = []
      result.features.forEach((obj) => {
        pointArr.push({
          name: obj.properties.Name,
          point: obj.geometry.coordinates
        })
      })

      const lineMaterial = mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.ODLine, {
        color: new Cesium.Color(1, 1, 1),
        bgColor: new Cesium.Color(0.1, 0.7, 0.5, 0.4),
        speed: 5 + 1.0 * Math.random(),
        startTime: Math.random()
      })

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

        const color = ["#ffff00", "#81d8ff", "#fff9ed"]
        const thisPoint = Cesium.Cartesian3.fromDegrees(item.point[0], item.point[1], 1)
        const positions = mars3d.PolyUtil.getLinkedPointList(center, thisPoint, 40000, 100) // 计算曲线点

        const primitive = new mars3d.graphic.PolylinePrimitive({
          positions: positions,
          style: {
            width: 4,
            material: lineMaterial // 动画线材质
          }
        })
        primitive.bindPopup(item.name)
        graphicLayer.addGraphic(primitive)

        // 圆椎体
        const coneGlow = new mars3d.graphic.LightCone({
          position: Cesium.Cartesian3.fromDegrees(item.point[0], item.point[1], 10),
          style: {
            radius: 10,
            height: 200,
            color: color[i % color.length]
          },
          popup: item.name
        })
        graphicLayer.addGraphic(coneGlow)
      }
    })
    .catch(function (error) {
      console.log("加载JSON出错", error)
    })

  // 竖直飞线
  const arrData = []
  for (let j = 0; j < 100; ++j) {
    const startPt = randomPoint()

    const endPt = startPt.clone()
    endPt.alt = random(600, 1000)

    const startTime = random(0, 10000)
    const speed = random(1, 35)

    arrData.push({
      positions: [startPt, endPt],
      style: {
        width: 1,
        material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.ODLine, {
          color: "rgb(255, 255, 2)",
          bgColor: "rgb(255,255,255,0.01)",
          startTime: startTime,
          speed: speed
        })
      }
    })
  }
  const upPoly = new mars3d.graphic.PolylineCombine({
    instances: arrData
  })
  graphicLayer.addGraphic(upPoly)
}

// 取区域内的随机图标；用于线对象的合并渲染
function randomPoint() {
  const jd = random(121.500525 * 1000, 121.518298 * 1000) / 1000
  const wd = random(31.231515 * 1000, 31.24228 * 1000) / 1000
  return new mars3d.LngLatPoint(jd, wd, 50)
}

// 取随机数字
function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}