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

import { ElMessage } from 'element-plus'

import { useMyStore } from '@/store'

export function initPlanarWayline () {
  const store = useMyStore()
  const state = reactive({
    droneCoordinates: null,
    longitude: 0, // 机场经纬度
    latitude: 0,
    clampToGroundshow: (store.state.common.mapSetting.visual == '2D' ? true : false)
  })
  async function planarWayline (route:any,longitude:any, latitude:any) {
    removeAllPoint();
    if (!route || !longitude) return;
    state.longitude = longitude
    state.latitude = latitude
    // 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 { fileInfoObj } = await analyzeKmzFile(`${route}?_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'];
    drawPlanarWayline(templateXMLJSON, waylinesXMLJSON);
  }
  async function drawPlanarWayline(templateXMLJSON:any, waylinesXMLJSON:any) {
    let coordArr = null;
    const placemark = templateXMLJSON.Folder?.Placemark;
    // 取出点位
    const coordinates = placemark.Polygon?.outerBoundaryIs.LinearRing.coordinates?.['#text']?.split('\n') || [];
    // 数组转换
    coordArr = coordinates.map((coordinate:any) =>
      coordinate
        .replace(/\s+/g, '')
        .split(',')
        .map((v) => Number(v)),
    );
    // 获取当前经纬度海拔高度
    const newCoordArr = [];
    // 获取机场信息
    getLnglatAltitude(state.longitude, state.latitude, window.cesiumViewer).then((res) => {
      state.droneCoordinates = Cesium.Cartesian3.fromDegrees(
        Number(state.longitude),
        Number(state.latitude),
        Number(res.height),
      )
    })
    // 面状点位
    for (let [index, coord] of coordArr.entries()) {
      const [lng, lat] = coord;
      const { height: hAltitude } = await getLnglatAltitude(
        Number(lng),
        Number(lat),
        window.cesiumViewer,
      );
      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(state.droneCoordinates);
    if (!state.clampToGroundshow) {
      let cartesian = addTurnPoint(
        waylinePointLnglats[0],
        waylinePointLnglats[1],
      );
      waylinePointLnglats.splice(1, 0, cartesian);
    }

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

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

    // 绘制面状边框线--------------------
    window.cesiumViewer.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,
      },
    });
    // 绘制面状地块--------------------
    window.cesiumViewer.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,
      },
    });
    // 飞向此处
    flyToRouterShow(waylinePointLnglats);
  }
  // 指向该区域
  function flyToRouterShow (waylinePosition:any) {
    let cartesianlengthArr = waylinePosition.map((cartesian:any) => {
      return [
        cartesian3Convert(cartesian, window.cesiumViewer).longitude,
        cartesian3Convert(cartesian, window.cesiumViewer).latitude,
      ]
    })
    const centerpoint = getCenterPoint(cartesianlengthArr)
    let maxlength = 0
    cartesianlengthArr.forEach((item:any, index:any) => {
      let banseTwoPoints = getLnglatDist(
        item[0],
        item[1],
        centerpoint.lng,
        centerpoint.lat,
      )
      if (banseTwoPoints > maxlength) {
        maxlength = banseTwoPoints
      }
    })
    let flyNum = state.clampToGroundshow ? 7 : 12
    flyTo(
      { longitude: centerpoint.lng, latitude: centerpoint.lat },
      3,
      maxlength * flyNum,
    )
  }
  // 在机场和第一个点直接增加一个中间转折点
  function addTurnPoint (firstPoint:any, SecondPoint:any) {
    const dronePosition = cartesian3Convert(firstPoint, window.cesiumViewer)
    const firstPosition = cartesian3Convert(SecondPoint, window.cesiumViewer)
    return new Cesium.Cartesian3.fromDegrees(
      dronePosition?.longitude,
      dronePosition?.latitude,
      firstPosition?.height,
    )
  }
  function StartingIncreasePoint(wayData) {
    let positions = state.clampToGroundshow ? wayData[1] : wayData[2];
    removeById('task_point_start');
    let setting = {
      id: 'task_point_start',
      position: positions,
      billboard: {
        image: PlanaBillboard('#2D8CF0'),
        pixelOffset: new Cesium.Cartesian2(146, 72),
        zIndex: 2,
        clampToGround: state.clampToGroundshow,
      },
    };
    window.cesiumViewer.entities.add(setting);
  }
  //面状点设置
  function 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;
  }
  return {
    planarWayline
  }
}