import * as mars3d from "mars3d";
// 地图函数列表
export function mapFun() {
  const ceshiClick = () => {
    console.log('ceshi');
    alert('ceshi');
  };

  // 根据坐标点跳转位置
  const handlerFlyToPoint = (params) => {
    window.globalMap.flyToPoint([118.000666,35.11987],
    {"alt":4269.7,"heading":359.2,"pitch":-51.9}); 
  }



  const handlerMeasureSurfaceLength = async () => {
    const graphic = await window.measureTool.distanceSurface({
      showAddText: true,
      exact: false
    })
  }
  
  const handlerMeasureLenth = async () => {

  }

  const handlerMeasureLength = async () => {
    const graphic = await window.measureTool.distance({
      showAddText: true,
      label: {
        type: "div",
        updateText: function (text, graphic) {
          graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`
        },
        html: `<div class="marsGreenGradientPnl" ></div>`,
      }
    })
  }

  const handlerMeasureSurfaceArea = async () => {
    const graphic = await window.measureTool.areaSurface({
      style: {
        color: "#ffff00"
      },
      splitNum: 10, // step插值分割的个数
      exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
    })
  }

  const handlerMeasureArea = async () => {
    const graphic = await window.measureTool.area({
      style: {
        color: '#00fff2',
        opacity: 0.4,
        outline: true,
        outlineColor: '#fafa5a',
        outlineWidth: 1,
        clampToGround: false //贴地
      }
    })
  }

  const handlerMeasurePoint = async () => {
    const graphic = await window.measureTool.point({
      popupOptions: {
        pointerEvents: false
      },
      popup: function (point, event) {
        return `<div class="mars3d-template-title">位置信息</div>
        <div class="mars3d-template-content">
            <div><label>经度</label>${point.lng}</div>
            <div><label>纬度</label>${point.lat}</div>
            <div><label>海拔</label>${point.alt}米</div>
        </div>`
      }
    })
  }


  const handlerMeasureHeight = async () => {
    const graphic = await window.measureTool.height();
  }

  const handlerClearMeasure =  () => {
    window.measureTool.clear();
  }

  const handlerDrawPolygon = async () => {
    const graphic = await window.drawGraphicLayer.startDraw({
      type: "polygon",
      style: {
        color: "#3388ff",
        opacity: 0.5,
        outline: true,
        outlineColor: "#ffffff",
        outlineWidth: 2.0,
        clampToGround:true
      }
    })
  }

  const handlerClearDraw = async ()=>{
    window.drawGraphicLayer.clear();
  }

  const handlerDrawRectangle = async () => {
    const graphic = await window.drawGraphicLayer.startDraw({
      type: isEntityPrimitive ? "rectangle" : "rectangleP",
      style: {
        color: clampToGround ? "#ffff00" : "#3388ff",
        opacity: 0.6,
        outline: true,
        outlineColor: "#ffffff",
        outlineWidth: 2.0,
        clampToGround
      }
    })
  }



  const handlerDrawBrushLine =async ()=> {
    const graphic = await window.drawGraphicLayer.startDraw({
      type: "brushLine",
      style: {
        color: "#ffff00",
        width: 3,
        clampToGround:true
      }
    })
  
  }

  const handlerDrawLine =async () => {

    const graphic = await window.drawGraphicLayer.startDraw({
      type: "polylineP",
      style: {
        color: "#ffff00",
        width: 3,
        clampToGround:true
      }
    })
  
    console.log("标绘完成", graphic.toJSON())
  }


  const handlerDrawPoint= async () => {
    const graphic = await window.drawGraphicLayer.startDraw({
      type: "pointP",
      style: {
        pixelSize: 12,
        color: "#3388ff",
        label: {
          // 不需要文字时，去掉label配置即可
          text: "可以同时支持文字",
          font_size: 20,
          color: "#ffffff",
          outline: true,
          outlineColor: "#000000",
          pixelOffsetY: -20
        }
      }
    })
  
    console.log("标绘完成", graphic.toJSON())
  }




  // 矢量坐标点控制

  const handlerGetPoint = async () => {
    const graphic = await window.drawGraphicLayer.startDraw({
      type: "point",
    })
  
    let position = graphic.toJSON().position;
  
    let res = {
      lng:position[0],
      lat:position[1],
      alt:position[0]
    }
    
    graphicLayer.removeGraphic(graphic);
  
    return res;
  }
  
  // 添加Entity
  const handlerAddEntity = () => { 

    let data = {
      id:10000001,
      position:{
        lat:35.451451,
        lng:118.0804257,
      },
      image:{
        generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
        activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
      },
      attribute:{
        label:"测试火点",
        address:"遍历"
      }
      
    }

    let graphicOptions = {
      id:data.id,
      position: [parseFloat(data.position.lng), parseFloat(data.position.lat)],
      style: {
        image: data.image.generalIcon,
        clampToGround: true,
        scale: 0.5,
        label: {
          text: data.attribute.label,
          font_size: 14,
          color: "#ffffff",
          pixelOffsetY: 10,
          distanceDisplayCondition: true,
          distanceDisplayCondition_far: 500000,
          distanceDisplayCondition_near: 0,
        },
      },
      popup: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
          <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">火点信息</div>
                      <div class="label-content">
                          <div class="data-li">
                              <div class="data-label">火点地址：${data.attribute.address}</div>
                          </div>
                          <div class="data-li">
                              <div class="data-label">上报时间：</div>
                              <div class="data-value"><span id="lablYeWei"  class="label-num">2025-2-11 12:00:00</span><span class="label-unit"></span>
                              </div>
                          </div>
                          <div class="data-li">
                              <div class="data-value">
                                  <span id="lablCSFM3" onclick="aroundYuAn([${data.position.lng},${data.position.lat}])"  class="label-tag data-value-status-2" >防灭火资源</span>
                                  <span id="lablCSFM2" onclick="delFirePoint(${data.id})"  class="label-tag data-value-status-3" title="删除火点">删除火点</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="b-t-l"></div>
              <div class="b-b-r"></div>
          </div>
          <div class="arrow" ></div>
      </div>`,
      popupOptions: {
        offsetY: -30,
        template: "{content}",
        horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
        verticalOrigin: "Cesium.VerticalOrigin.CENTER",
      },
    }
  
    let graphic = window.graphicLayer.getGraphicById(data.id);
  
    if(graphic){
        graphic.setStyleOptions(graphicOptions);
    }else{
        graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
        window.graphicLayer.addGraphic(graphic);
    }
  }
  
  
  const handlerShowEntity = () => {
    let data = {
      id:10000001,
      position:{
        lat:35.451451,
        lng:118.0804257,
      },
      image:{
        generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
        activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
      },
      attribute:{
        label:"测试火点",
        address:"遍历"
      }
      
    }

    let graphic =  window.graphicLayer.getGraphicById(data.id);
    if(graphic){
      graphic.show = true;
    }
  }

  const handlerHiddenEntity = () => {
    let data = {
      id:10000001,
      position:{
        lat:35.451451,
        lng:118.0804257,
      },
      image:{
        generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
        activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
      },
      attribute:{
        label:"测试火点",
        address:"遍历"
      }
      
    }

    let graphic =  window.graphicLayer.getGraphicById(data.id);
    if(graphic){
      graphic.show = false;
    }
  }
  
  
  const handlerRemoveEntity = () => {

    let data = {
      id:10000001,
      position:{
        lat:35.451451,
        lng:118.0804257,
      },
      image:{
        generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
        activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
      },
      attribute:{
        label:"测试火点",
        address:"遍历"
      }
      
    }

    let graphic =  window.graphicLayer.getGraphicById(data.id);
    if(graphic){
      graphicLayer.removeGraphic(graphic);
    }
  }
  
  const handlerFlyToEntity = ()  => {

    let data = {
      id:10000001,
      position:{
        lat:35.451451,
        lng:118.0804257,
      },
      image:{
        generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
        activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
      },
      attribute:{
        label:"测试火点",
        address:"遍历"
      }
      
    }
  
    let graphic =  window.graphicLayer.getGraphicById(data.id);
  
    if(graphic){
  
      // if(data.image.activeIcon){
      //   grasphic.setStyle({
      //     image:data.image.activeIcon
      //   })
      // }
  
      window.globalMap.flyToGraphic(graphic);
    }
  
  
  }
  
  // 清空所有适量图标
  const handlerClearEntityLayer = () => {
    window.graphicLayer.clear();
  }
  
  // 隐藏所有矢量图标
  const handlerHiddenEntityLayer = ()=> {
    window.graphicLayer.show = false;
  }

  const handlerShowEntityLayer = () => {
    window.graphicLayer.show = true;
  }

  // 图层控制类
  const handlerAddLayer = ()=>{
    let layer = new mars3d.layer.WmsLayer({
        "id": 4460,
        "name": "建筑物面",
        "type": "wms",
        "url": "http://221.2.83.254:9007/geoserver/ksp/wms",
        "layers": "ksp:beibushanqudaolufenlei0923",
        "crs": "EPSG:4326",
        "parameters": {
            "transparent": "true",
            "format": "image/png"
        },
        "highlight": {
            "showTime": 5000,
            "fill": true,
            "color": "#2deaf7",
            "opacity": 0.6,
            "outline": true,
            "outlineWidth": 3,
            "outlineColor": "#e000d9",
            "outlineOpacity": 1,
            "clampToGround": true
        },
        "center": {"lat":35.376403,"lng":117.97628,"alt":3615.8,"heading":3.1,"pitch":-26.8},
        "popup": "all",
        "show": true,
        "flyTo": true
    })

    window.globalMap.addLayer(layer);

  }

  const handlerHiddenLayer = ()=>{

    let layer = window.globalMap.getLayerById(4460);
    if(layer){
      layer.show = false;
    }

  }

  const handlerShowLayer = ()=>{
    let layer = window.globalMap.getLayerById(4460);
    console.log("layer",layer);

    if(layer){
      layer.show = true;
    }
  }

  const handlerRemoveLayer = ()=>{
    let layer = window.globalMap.getLayerById(4460);

    if(layer){
      window.globalMap.removeLayer(layer);
    }
  }

  const handlerFlyToLayer = ()=>{
    let layer = window.globalMap.getLayerById(4460);

    if(layer){
      layer.flyTo();
    }
  }

  // 三维模型
  const handlerAddModel = ()=>{
    // {"lat":35.4422,"lng":117.985466,"alt":2070.2,"heading":1.1,"pitch":-87.1}
    const graphic = new mars3d.graphic.ModelEntity({
      name:"消防车",
      position: [117.985466, 35.4422, 11.34],
      style: {
        url: "http://221.2.83.254:9010/cartoon_fire_truck/xiaofangche.gltf",
        scale: 20,
        minimumPixelSize: 50,
        heading: 90,
        distanceDisplayCondition: true,
        distanceDisplayCondition_near: 0,
        distanceDisplayCondition_far: 10000,
        distanceDisplayPoint: {
          // 当视角距离超过一定距离(distanceDisplayCondition_far定义的) 后显示为点对象的样式
          color: "#00ff00",
          pixelSize: 8
        },
        label: {
          text: "显示信息",
          font_size: 18,
          color: "#ffffff",
          pixelOffsetY: -50,
          distanceDisplayCondition: true,
          distanceDisplayCondition_far: 10000,
          distanceDisplayCondition_near: 0
        }
      },
      attr: { remark: "示例1" }
    })
    
    window.graphicLayer.addGraphic(graphic)
  }


  return {
    ceshiClick,
    handlerFlyToPoint,
    handlerAddEntity,
    handlerMeasureSurfaceLength,
    handlerMeasureLength,
    handlerMeasureSurfaceArea,
    handlerMeasureArea,
    handlerMeasurePoint,
    handlerMeasureHeight,
    handlerClearMeasure,
    handlerDrawPolygon,
    handlerDrawBrushLine,
    handlerDrawLine,
    handlerDrawPoint,
    handlerDrawRectangle,
    handlerClearDraw,
    // 矢量操作
    handlerHiddenEntity,
    handlerShowEntity,
    handlerRemoveEntity,
    handlerFlyToEntity,
    // 图层操作
    handlerClearEntityLayer,
    handlerHiddenEntityLayer,
    handlerShowEntityLayer,
    // 图层控制类
    handlerAddLayer,
    handlerHiddenLayer,
    handlerShowLayer,
    handlerRemoveLayer,
    handlerFlyToLayer,
    // 三维模型
    handlerAddModel
  };
}

// 地图函数列表options
export const funSelectOptions = [
  {
    // 事件名称（用于选择显示）
    label: 'ceshi点击',
    // 事件名(用于触发)
    value: 'ceshiClick',
  },
  {
    label:"根据坐标定位地图视角",
    value: 'handlerFlyToPoint'
  },
  {
    label:"添加任意类型图层",
    value: 'handlerAddLayer'
  },
  {
    label:"隐藏指定图层",
    value: 'handlerHiddenLayer'
  },{
    label:"显示指定图层",
    value: 'handlerShowLayer'
  },
  {
    label:"删除指定图层",
    value: 'handlerRemoveLayer'
  },
  {
    label:"跳转到指定图层",
    value: 'handlerFlyToLayer'
  },
  {
    label:"添加单个矢量数据",
    value: 'handlerAddEntity'
  },
  {
    label:"隐藏单个矢量数据",
    value:"handlerHiddenEntity"
  },
  {
    label:"显示单个矢量数据",
    value:"handlerShowEntity"
  },
  {
    label:"移除单个矢量数据",
    value:"handlerRemoveEntity"
  },
  {
    label:"定位和高亮矢量数据",
    value:"handlerFlyToEntity"
  },
  {
    label:"清除全部矢量数据",
    value:"handlerClearEntityLayer"
  },
  {
    label:"隐藏全部矢量数据",
    value:"handlerHiddenEntityLayer"
  },
  {
    label:"显示全部矢量数据",
    value:"handlerShowEntityLayer"
  },
  {
    label:"点击地图拾取坐标",
    value:"handlerGetPoint"
  },
  {
    label:"绘制贴地线",
    value:"handlerDrawLine"
  },
  {
    label:"绘制图标点",
    value:"handlerDrawPoint"
  },
  {
    label:"绘制贴地自由线",
    value:"handlerDrawBrushLine"
  },
  {
    label:"军事标绘",
    value:"handlerDrawJun"
  },
  {
    label:"绘制贴地矩形",
    value:"handlerDrawRectangle"
  },
  {
    label:"绘制贴地面",
    value:"handlerDrawPolygon"
  },
  {
    label:"清除图层绘制",
    value:"handlerClearDraw"
  },
  {
    label:"贴地距离测量",
    value:"handlerMeasureSurfaceLength"
  },
  {
    label:"绘制自由线",
    value:"drawBrushLine",
  },
  {
    label:"空间距离测量",
    value:"handlerMeasureLength"
  },
  {
    label:"贴地面积测量",
    value:"handlerMeasureSurfaceArea"
  },
  {
    label:"水平面积测量",
    value:"handlerMeasureArea"
  },
  {
    label:"坐标点位测量",
    value:"handlerMeasurePoint"
  },
  {
    label:"高度差测量",
    value:"handlerMeasureHeight"
  },
  {
    label:"清空测量数据",
    value:"handlerClearMeasure"
  },{
    label:"添加三维模型",
    value:"handlerAddModel"
  }
];