import * as Cesium from 'cesium';
import { appointroutePlanning } from '@/api/RoutePlanning';
import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz.js';
import { getLnglatAltitude } from '@/utils/cesium/mapUtil';
import cesiumOperation from '@/utils/cesium-tsa';
const { removeAllPoint, removeById } = cesiumOperation();

export default {
  methods: {
    // 初始化航线
    async initPlanarWayline(route) {
      removeAllPoint();
      if (!route) return;
      const { data: waylineUrl } = await appointroutePlanning(
        this.wId,
        route.id,
      );
      if (waylineUrl.code !== 0)
        return this._showMessage.error(waylineUrl.message);
      const { fileInfoObj } = await analyzeKmzFile(
        `${waylineUrl.data}?_t=${new Date().getTime()}`,
      );
      const templateXML = await fileInfoObj['wpmz/template.kml'];
      const waylinesXML = await fileInfoObj['wpmz/waylines.wpml'];
      const templateXMLJSON = XMLToJSON(templateXML)?.['Document'];
      const waylinesXMLJSON = XMLToJSON(waylinesXML)?.['Document'];
      this.drawPlanarWayline(templateXMLJSON, waylinesXMLJSON);
    },
    async drawPlanarWayline(templateXMLJSON, waylinesXMLJSON) {
      let coordArr = null;
      const placemark = templateXMLJSON.Folder?.Placemark;
      // 取出点位
      const coordinates =
        placemark.Polygon?.outerBoundaryIs.LinearRing.coordinates?.[
          '#text'
        ]?.split('\n') || [];
      // 数组转换
      coordArr = coordinates.map((coordinate) =>
        coordinate
          .replace(/\s+/g, '')
          .split(',')
          .map((v) => Number(v)),
      );
      // 获取当前经纬度海拔高度
      const newCoordArr = [];
      // 面状点位
      for (let [index, coord] of coordArr.entries()) {
        const [lng, lat] = coord;
        const { height: hAltitude } = await getLnglatAltitude(
          Number(lng),
          Number(lat),
          global.$viewer,
        );
        newCoordArr.push([lng, lat, hAltitude]);
      }
      // 航线点位
      const waylinePoints = waylinesXMLJSON.Folder.Placemark;
      const waylinePointLnglats = waylinePoints.map((json) => {
        const executeHeight = Number(json.executeHeight['#text']);
        const coordinate = json.Point.coordinates['#text']
          .split(',')
          .map((lnglat) => Number(lnglat));
        coordinates.push();
        return Cesium.Cartesian3.fromDegrees(
          coordinate[0],
          coordinate[1],
          executeHeight,
        );
      });
      // 绘制面状航线--------------------
      waylinePointLnglats.unshift(this.droneCoordinates);
      if (!this.clampToGroundshow) {
        let cartesian = this.addTurnPoint(
          waylinePointLnglats[0],
          waylinePointLnglats[1],
        );
        waylinePointLnglats.splice(1, 0, cartesian);
      }

      global.$viewer.entities.add({
        id: 'task_result_wayline',
        polyline: {
          width: 3,
          positions: waylinePointLnglats,
          material: Cesium.Color.CHARTREUSE,
          zIndex: 1,
          clampToGround: this.clampToGroundshow,
        },
      });
      // 面状航线第一个点突出展示
      this.StartingIncreasePoint(waylinePointLnglats);
      // 面状判断当前点位数量
      const cloneCoordArr = [...newCoordArr];
      if (cloneCoordArr.length >= 3) {
        cloneCoordArr.push(newCoordArr[0]);
      }

      this.$store.commit('SET_WAYLINE_POINTS', {
        type: 'planar',
        data: waylinePointLnglats,
        planarOutline: cloneCoordArr,
        planarPolygon: newCoordArr,
        clampToGroundshow: this.clampToGroundshow,
      });

      // 绘制面状边框线--------------------
      global.$viewer.entities.add({
        id: 'task_planarOutline',
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(
            cloneCoordArr.flat(),
          ),
          width: 4,
          material: new Cesium.PolylineOutlineMaterialProperty({
            color: new Cesium.Color.fromBytes(74, 138, 233),
            outlineWidth: 2,
            outlineColor: Cesium.Color.WHITE,
          }),
          zIndex: -1,
          clampToGround: true,
        },
      });
      // 绘制面状地块--------------------
      global.$viewer.entities.add({
        id: 'task_planarWayline',
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(
            newCoordArr.flat(),
          ),
          material: new Cesium.Color.fromBytes(75, 159, 221, 100),
          outline: true,
          outlineColor: new Cesium.Color.fromBytes(35, 85, 216, 255),
          zIndex: -1,
          clampToGround: true,
        },
      });
      // 飞向此处
      this.flyToRouterShow(waylinePointLnglats);
    },
    // 起点增加点展示
    StartingIncreasePoint(wayData) {
      let positions = this.clampToGroundshow ? wayData[1] : wayData[2];
      removeById('task_point_start');
      let setting = {
        id: 'task_point_start',
        position: positions,
        billboard: {
          image: this.PlanaBillboard('#2D8CF0'),
          pixelOffset: new Cesium.Cartesian2(146, 72),
          zIndex: 2,
          clampToGround: this.clampToGroundshow,
        },
      };
      global.$viewer.entities.add(setting);
    },
    //面状点设置
    PlanaBillboard(color) {
      const billboard = document.createElement('canvas');
      const ctx = billboard.getContext('2d');
      const radius = 4;
      ctx.beginPath();
      ctx.arc(radius, radius, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = color; // 设置填充颜色
      ctx.fill();
      return billboard;
    },
  },
};