import Draw from "../../../Draw/draw";
import MouseEvent from "../../../Event";
import MouseTip from "../../../MouseTip";
import Dialog from '../../../BaseDialog';
import { html } from "./_element";
class Profile extends Draw {
  /**
   * @constructor 剖面分析
   * @param sdk 
  **/
  constructor(sdk, _Dialog = {}) {
    window.addEventListener("resize", () => {
      this.echartsObject && this.echartsObject.resize();
    });
    super(sdk)
    this.viewer = sdk.viewer;
    this.Dialog = _Dialog
    YJ.Analysis.Analyses.push(this)
    Profile.create(this)
  }
  static create(that) {
    this._currentId = Cesium.createGuid()
    let id = this._currentId
    that.clean()
    if (YJ.Measure.GetMeasureStatus()) {
      console.warn('上一次测量未结束')
    } else {
      YJ.Measure.SetMeasureStatus(true)
      that.tip = new MouseTip('左键确定，右键取消', that.sdk)
      that.event = new MouseEvent(that.sdk)
      that.positions = []
      that.points_ids = [] //存放左键点击时临时添加的point的id

      let cache_positions = []
      let car = undefined
      that.event.mouse_left(async (movement, cartesian) => {
        try {
          if (!that.entityHasCreated) {
            Profile.create_polyline(that)
          }
          cache_positions.push(cartesian)
          that.points_ids.push(that.create_point(cartesian,))
          if (cache_positions.length == 2) {
            that.end()
            let positions = []
            cache_positions.forEach((item) => {
              positions.push(that.cartesian3Towgs84(item, that.viewer))
            })
            Profile.interPoints(that).then((points) => {
              if (this._currentId && this._currentId === id) {
                that._DialogObject ? Profile.initEcharts(that, points) : Profile.edit(that, points)
              }
            })
          }
        } catch (error) {
          console.log(error)
        }

      })
      that.event.mouse_right((movement, cartesian) => {
        let positions = []
        cache_positions = []
        that.clean()
      })
      that.event.mouse_move((movement, cartesian) => {
        that.positions = cache_positions.concat(cartesian)
        that.tip.setPosition(
          cartesian,
          movement.endPosition.x,
          movement.endPosition.y
        )
      })

      that.event.gesture_pinck_start((movement, cartesian) => {
        let startTime = new Date()
        that.event.gesture_pinck_end(() => {
          let endTime = new Date()
          if (endTime - startTime >= 500) {
            let positions = []
            cache_positions = []
            that.end()
          }
        })
      })
    }
  }

  static create_polyline(that) {
    that.entityHasCreated = true
    let id = that.randomString()
    that.polyline = that.viewer.entities.add(
      new Cesium.Entity({
        id: id,
        polyline: {
          positions: new Cesium.CallbackProperty(() => {
            return that.positions
          }, false),
          width: 5,
          material: Cesium.Color.fromCssColorString(that.color),
          clampToGround: true,
          zIndex: 99999999
        },
      })
    )
    return id
  }

  /**
 * 线段插值点
 */
  static async interPoints(that) {
    let viewer = that.viewer
    let positions = that.positions
    let positionsCartographic = []
    let positions84 = [];
    for (let index = 0; index < positions.length; index++) {
      const element = positions[index];
      let cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(element);
      positionsCartographic.push(cartographic);
      let pos84 = that.cartesian3Towgs84(element, viewer)
      positions84.push(pos84);
    }
    let positions_Inter = [];
    let height = await that.getClampToHeight({ lng: positions84[0].lng, lat: positions84[0].lat });
    positions_Inter.push({
      position: { lng: positions84[0].lng, lat: positions84[0].lat, height: height },
      distance: 0,
    });
    for (let i = 0; i < positionsCartographic.length - 1; i++) {
      let line = turf.lineString([[positions84[i].lng, positions84[i].lat], [positions84[i + 1].lng, positions84[i + 1].lat]]);
      let totalDistance = turf.length(line, { units: 'kilometers' });

      const m_Cartographic0 = positionsCartographic[i];
      const m_Cartographic1 = positionsCartographic[i + 1];
      let a =
        Math.abs(m_Cartographic0.longitude - m_Cartographic1.longitude) *
        10000000;
      let b =
        Math.abs(m_Cartographic0.latitude - m_Cartographic1.latitude) *
        10000000;
      //等距采样
      if (a > b) b = a;
      let length = parseInt(b / 2);
      if (length > 150) length = 150;
      if (length < 2) length = 2;
      let distance = totalDistance / (length - 1)
      for (let j = 0; j < length - 1; j++) {
        let start = j * distance
        let stop = (j + 1) * distance
        let sliced = await turf.lineSliceAlong(line, start, stop, { units: 'kilometers' });
        let lng = sliced.geometry.coordinates[sliced.geometry.coordinates.length - 1][0]
        let lat = sliced.geometry.coordinates[sliced.geometry.coordinates.length - 1][1]
        let height = await that.getClampToHeight({ lng: lng, lat: lat });
        positions_Inter.push({
          position: { lng: lng, lat: lat, height: height },
          distance: stop * 1000,
        });
      }
    }
    return positions_Inter
  }

  static async edit(that, points) {
    if (that._DialogObject && that._DialogObject.close) {
      that._DialogObject.close()
      that._DialogObject = null
    }
    that._DialogObject = await new Dialog(that.sdk.viewer._container, {
      title: '剖面分析', left: '180px', top: '100px',
      closeCallBack: () => {
        that.clean()
        that.Dialog.closeCallBack && that.Dialog.closeCallBack()
      },
    })
    await that._DialogObject.init()
    that._DialogObject._element.body.className = that._DialogObject._element.body.className + ' profile'
    let contentElm = document.createElement('div');
    contentElm.innerHTML = html()
    that._DialogObject.contentAppChild(contentElm)
    let resetBtn = document.createElement('button');
    resetBtn.innerHTML = '<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>重新绘制'
    resetBtn.style.width = 'auto'
    resetBtn.addEventListener('click', () => {
      Profile.create(that)
      Profile.initEcharts(that)
    })
    that._DialogObject.footAppChild(resetBtn)
    Profile.initEcharts(that, points)
  }

  static initEcharts(that, points) {
    let datas = [],
      coords = [];
    const pointsData = points;

    let option
    if (pointsData) {
      const maxDistance = pointsData[pointsData.length - 1].distance;
      let xAixMax = Math.ceil(maxDistance);
      for (let index = 0; index < pointsData.length; index++) {
        const element = pointsData[index];
        if (element.position.height === void 0) {
          continue
        }
        const curData = [
          element.distance.toFixed(2),
          element.position.height.toFixed(2),
        ];
        datas.push(curData);
        const curCoords = [element.position.lng, element.position.lat];
        coords.push(curCoords);
      }
      const pointOption = {
        show: true,
        pixelSize: 10,
        color: Cesium.Color.GREEN,
        outlineColor: Cesium.Color.SKYBLUE,
        outlineWidth: 3,
        disableDepthTestDistance: Number.POSITIVE_INFINITY
      };
      const ele = that._DialogObject._element.content.getElementsByClassName("profile-echarts")[0];
      that.echartsObject = echarts.init(ele);
      option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
          formatter(params) {
            const xy = coords[params[0].dataIndex];
            const tipData = params[0]["data"];
            if (!that.tipEntity) {
              that.tipEntity = that.sdk.viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(
                  xy[0],
                  xy[1],
                  Number(tipData[1])
                ),
                point: pointOption,
              });
            } else {
              that.tipEntity.position = Cesium.Cartesian3.fromDegrees(
                xy[0],
                xy[1],
                Number(tipData[1])
              );
            }
            return (
              "距离：" +
              tipData[0] +
              "m<br>" +
              "高度：" +
              tipData[1] +
              "m<br>" +
              "坐标：" +
              xy[0].toFixed(5) +
              "，" +
              xy[1].toFixed(5)
            );
          },
        },
        grid: {
          top: 40,
          bottom: 20,
          left: 55,
          right: 30
        },
        calculable: true,
        xAxis: [
          {
            type: "value",
            max: xAixMax,
            scale: true,
            axisLabel: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff"
              }
            }
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            axisLabel: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff"
              }
            }
          },
        ],
        series: [
          {
            name: "ProfileLine",
            type: "line",
            data: datas,
            smooth: true,
            itemStyle: {
              normal: {
                color: "#39FDA1",
              },
            },
            lineStyle: {
              normal: {
                width: 3,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(85,254,139,1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(7,252,202,1)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(14,245,210,1)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(102,153,255,1)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(102,153,255,0.08)",
                    },
                    {
                      offset: 1,
                      color: "rgba(9,173,208,0.15)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(14,245,210,1)", //阴影颜色
                shadowBlur: 20,
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最高点",
                  label: {
                    color: '#ffffff',
                  }
                },
                {
                  type: "min",
                  name: "最低点",
                  label: {
                    color: '#ffffff',
                  }
                },
              ],
            },
          },
        ],
      };
    }
    else {
      const ele = that._DialogObject._element.content.getElementsByClassName("profile-echarts")[0];
      that.echartsObject = echarts.init(ele);
      option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          }
        },
        grid: {
          top: 40,
          bottom: 20,
          left: 55,
          right: 30
        },
        calculable: true,
        xAxis: [
          {
            type: "value",
            scale: true,
            axisLabel: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff"
              }
            }
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            axisLabel: {
              color: '#ffffff'
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff"
              }
            }
          },
        ],
        series: [
          {
            name: "ProfileLine",
            type: "line",
            data: [],
            smooth: true,
            itemStyle: {
              normal: {
                color: "#39FDA1",
              },
            },
            lineStyle: {
              normal: {
                width: 3,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(85,254,139,1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(7,252,202,1)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(14,245,210,1)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(102,153,255,1)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(102,153,255,0.08)",
                    },
                    {
                      offset: 1,
                      color: "rgba(9,173,208,0.15)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(14,245,210,1)", //阴影颜色
                shadowBlur: 20,
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最高点",
                  label: {
                    color: '#ffffff',
                  }
                },
                {
                  type: "min",
                  name: "最低点",
                  label: {
                    color: '#ffffff',
                  }
                },
              ],
            },
          },
        ],
      };
    }

    that.echartsObject.setOption(option);
  }

  clean() {
    this.end()
    this._currentId = null
    this.entityHasCreated = false
    this.polyline && this.viewer.entities.remove(this.polyline)
    this.tipEntity && this.viewer.entities.remove(this.tipEntity)
    this.polyline = null
    this.tipEntity = null
  }

  destroy() {
    this.clean()
    if (this._DialogObject && this._DialogObject.close) {
      this._DialogObject.close()
      this._DialogObject = null
    }
  }
}

// const Profile = function (viewer, callback) {
//   if (!viewer) throw new Error("no viewer object!");
//   if (window.profileEntities && window.profileEntities.length > 0) {
//     window.profileEntities.forEach((element) => {
//       window.viewer.entities.remove(element);
//     });
//   }
//   window.profileEntities = [];
//   CreatePolyline(
//     viewer,
//     window.profileEntities,
//     { color: Cesium.Color.RED, width: 2 },
//     function (e) {
//       e.polyline.clampToGround = true;
//       console.log(e.pottingPoint);
//       let points = interPoints(viewer, e.pottingPoint, [e]);
//       console.log(points);
//       if (typeof callback == "function") callback(points);
//     }
//   );
// };
// /**
//  * 线段插值点
//  * @param {*} viewer
//  * @param {*} positions 线段节点集合
//  * @param {*} objectsToExclude 高度采集时排除的对象集合
//  * @returns 经纬度点集合，包含距离值
//  */
// function interPoints(viewer, positions, objectsToExclude) {
//   let positionsCartographic = [];
//   let terrainSamplePositions = [];
//   for (let index = 0; index < positions.length; index++) {
//     const element = positions[index];
//     let ellipsoid = viewer.scene.globe.ellipsoid;
//     let cartographic = ellipsoid.cartesianToCartographic(element);
//     positionsCartographic.push(cartographic);
//   }
//   for (let i = 0; i < positionsCartographic.length; i++) {
//     const m_Cartographic0 = positionsCartographic[i];
//     const m_Cartographic1 = positionsCartographic[i + 1];
//     if (m_Cartographic1) {
//       let a =
//         Math.abs(m_Cartographic0.longitude - m_Cartographic1.longitude) *
//         10000000;
//       let b =
//         Math.abs(m_Cartographic0.latitude - m_Cartographic1.latitude) *
//         10000000;
//       //等距采样
//       if (a > b) b = a;
//       let length = parseInt(b / 2);
//       if (length > 1000) length = 1000;
//       if (length < 2) length = 2;
//       for (let j = 0; j < length; j++) {
//         terrainSamplePositions.push(
//           new Cesium.Cartographic(
//             Cesium.Math.lerp(
//               m_Cartographic0.longitude,
//               m_Cartographic1.longitude,
//               j / (length - 1)
//             ),
//             Cesium.Math.lerp(
//               m_Cartographic0.latitude,
//               m_Cartographic1.latitude,
//               j / (length - 1)
//             )
//           )
//         );
//       }
//       terrainSamplePositions.pop();
//     } else {
//       terrainSamplePositions.push(m_Cartographic0);
//     }
//   }
//   let positions_Inter = [];
//   let distance = 0;
//   for (let n = 0; n < terrainSamplePositions.length; n++) {
//     //地理坐标（弧度）转经纬度坐标
//     let curCartographic = terrainSamplePositions[n];
//     let height = viewer.scene.sampleHeight(curCartographic, objectsToExclude);
//     const lon = (curCartographic.longitude / Math.PI) * 180;
//     const lat = (curCartographic.latitude / Math.PI) * 180;
//     let point = Cesium.Cartesian3.fromDegrees(lon, lat, height);
//     let preCartographic = terrainSamplePositions[n - 1];
//     if (preCartographic) {
//       const lon1 = (preCartographic.longitude / Math.PI) * 180;
//       const lat1 = (preCartographic.latitude / Math.PI) * 180;
//       let point1 = Cesium.Cartesian3.fromDegrees(lon1, lat1, height);
//       let curDis = Cesium.Cartesian3.distance(point1, point);
//       distance += curDis;
//     }
//     positions_Inter.push({
//       position: { lon: lon, lat: lat, height: height },
//       distance: distance,
//     });
//   }
//   return positions_Inter;
// }
export default Profile;