import * as mars3d from 'mars3d'
import Vue from 'vue'

/**
 * BillboardP + ModelC
 * @param index 图层序号
 * @param name  图层名称
 * @param image  图片
 * @param model  模型
 * @param scale  模型缩放
 * @param condition  搜索条件
 * @returns {{"3D": string, "2D": BaseClass}}
 */

export function createPointModelLayer(index, name, image, model = '', scale, condition) {
  const queryServer = new mars3d.query.QueryArcServer({
    url: Vue.prototype.baseConfig.arcgisUrl + index,
    popup: 'all',
    pageSize: 5000
  })
  const layer = new mars3d.layer.GeoJsonLayer({
    name: name,
    onCreateGraphic: function(options) {
      const points = options.position // 坐标
      const attr = options.attr // 属性信息
      const primitive = new mars3d.graphic.BillboardPrimitive({
        allowDrillPick: true,
        attr: attr,
        id: attr.编号,
        position: points,
        style: {
          image: image,
          scale: 0.6,
          hasPixelOffset: true,
          pixelOffsetY: -10,
          scaleByDistance: true,
          scaleByDistance_far: 30000,
          scaleByDistance_farValue: 0.6,
          scaleByDistance_near: 0,
          scaleByDistance_nearValue: 1.4,
          clampToGround: true,
          highlight: { type: 'click', image: '../static/images/high-marker.png' }
        }
      })
      layer.addGraphic(primitive)
    },
    popup: 'all'
  }).bindPopup(function(event) {
    return mars3d.Util.getTemplateHtml({ template: 'all', attr: event.graphic.attr || {}})
  }).on(mars3d.EventType.click, function(event) {
    if (window.map.camera.positionCartographic.height > 5000) {
      window.map.flyToPoint(event.graphic.position, {
        radius: 5000, // 距离目标点的距离
        duration: 1
      })
    }
  })
  window.map.addLayer(layer)
  const layer3D = new mars3d.layer.GraphicLayer({
    name: name
  }).bindPopup(function(event) {
    const attr = event.graphic.attr || {}
    return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
  })
  window.map.addLayer(layer3D)
  layer3D.show = false
  queryServer.query({
    where: condition,
    success: (result) => {
      if (result.count === 0) {
        console.log('未查询到相关记录！')
      }
      layer.load({ data: result.geojson })
      if (model !== '') {
        const points = []
        result.geojson.features.forEach(item => {
          points.push({
            position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
            style: {
              scale: scale
            },
            attr: item.properties
          })
        })
        const modelCombine = new mars3d.graphic.ModelCombine({
          url: model,
          instances: points
        })
        layer3D.addGraphic(modelCombine)
      }
    },
    error: (error, msg) => {
      console.log('服务访问错误,' + error)
    }
  })
  return {
    '3D': layer3D,
    '2D': layer
  }
}

/**
 *  BillboardP
 * @param name  图层名称
 * @param index  gis图层编号
 * @param image  图片
 * @param condition 条件
 * @returns {BaseClass}
 */
export function createPointLayer(name, index, image, condition) {
  const queryServer = new mars3d.query.QueryArcServer({
    url: Vue.prototype.baseConfig.arcgisUrl + index,
    popup: 'all',
    pageSize: 5000
  })
  const layer = new mars3d.layer.GeoJsonLayer({
    name: name,
    onCreateGraphic: function(options) {
      const points = options.position // 坐标
      const attr = options.attr // 属性信息
      const primitive = new mars3d.graphic.BillboardPrimitive({
        allowDrillPick: true,
        attr: attr,
        id: attr.编号,
        position: points,
        style: {
          image: image,
          scale: 0.6,
          hasPixelOffset: true,
          pixelOffsetY: -10,
          scaleByDistance: true,
          scaleByDistance_far: 20000,
          scaleByDistance_farValue: 0.6,
          scaleByDistance_near: 0,
          scaleByDistance_nearValue: 1.4,
          clampToGround: true,
          highlight: { type: 'click', image: '../static/images/high-marker.png' }
        }
      })
      layer.addGraphic(primitive)
    },
    popup: 'all'
  }).bindPopup(function(event) {
    return mars3d.Util.getTemplateHtml({ template: 'all', attr: event.graphic.attr || {}})
  }).on(mars3d.EventType.click, function(event) {
    if (window.map.camera.positionCartographic.height > 5000) {
      window.map.flyToPoint(event.graphic.position, {
        radius: 5000, // 距离目标点的距离
        duration: 1
      })
    }
  })
    .on(mars3d.EventType.show, function(event) {
      console.log(index, ' show时间(s):', new Date().getSeconds())
    }).on(mars3d.EventType.load, function(event) {
      console.log(index, ' load时间(s):', new Date().getSeconds())
    }).on(mars3d.EventType.postRender, function(event) {
      console.log(index, ' postRender时间(s):', new Date().getSeconds())
    })
  window.map.addLayer(layer)
  queryServer.query({
    where: condition,
    success: (result) => {
      // console.log(index, '总数:', result.count, ' data时间(s):', new Date().getSeconds())
      if (result.count === 0) {
        console.log('未查询到相关记录！')
      }
      layer.load({ data: result.geojson })
    },
    error: (error, msg) => {
      console.log('服务访问错误,' + error)
    }
  })
  return layer
}