<template>
  <!-- 地图 -->
  <div ref="vChartRef" id="mars3d-container" class="mars3d-container">

    <!-- 航点航线 -->
    <div v-if="props.airLineForm.airLineType == 'waypoint'" class="air-container">
      <airPoint
        :airInfo="lineInfo"
        :editModel="props.editMode"
        :polygonAirForm="polygonAirForm"
        :airLineForm="props.airLineForm"
        :wayline="props.wayline"
        :airPoints="airPoints"
        :waylineInfo="props.waylineInfo"
        :templateKmlConfig="props.templateKmlConfig"
        :waylineWpmlConfig="props.waylineWpmlConfig"
        @setTakeOffPoint="setTakeOffPoint"
        @exitDraw="exitDraw"
        @addAction="addAction"
        @checkPoint="checkPoint"
      ></airPoint>
    </div>

    <!-- 航面航线 -->
    <div v-if="props.airLineForm.airLineType == 'mapping2d'" class="airpolygon-container">
        <airPolygon
          :airInfo="airInfo"
          :editModel="props.editMode"
          :polygonAirForm="polygonAirForm"
          :airLineForm="props.airLineForm"
          :waylineInfo="props.waylineInfo"
          :airPoints="airPoints"
          :polygon="polygonGeoJson"
          :templateKmlConfig="props.templateKmlConfig"
          :waylineWpmlConfig="props.waylineWpmlConfig"
          @setTakeOffPoint="setTakeOffPoint"
          @calculatParamChange="calculatParamChange"
          @exitDraw="exitDraw"
        ></airPolygon>
    </div>

    <!-- 航点航线配置 -->
    <div class="airpoint-config-container" v-if="airPointConfigShow">
      <airPointConfig 
        :currentAirPoint="currentAirPoint" 
        :airPoints="airPoints"
      ></airPointConfig>
    </div>

  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, defineProps, watch, defineEmits } from 'vue';
  import { message } from 'ant-design-vue';
  import { GeojsonToWkt,WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import { buildUUID } from '@/utils/uuid';
  import airPoint from './airPoint.vue';
  import * as mars3d from 'mars3d';
  import { EventBus } from '@/utils/eventBus';

  import 'mars3d-space';

  import * as Cesium from 'mars3d-cesium';
  // import * as turf from '@turf/turf';
  import airPolygon from './airPolygon.vue';
  import airPointConfig from './airPointConfig.vue';


  // const props = defineProps([
  //   'airLineForm',
  //   'flyToTherePosition',
  //   'wayline',
  //   'waylineInfo',
  //   'workPlanFormShow',
  //   'airPort',
  //   'uavTrack',
  //   'homeAirport'
  // ]);


  const props = defineProps({
    "editMode":{
        type:String,
        default:"add"
    },
    "airLineForm":{
        type:Object,
        default: () => ({
            "id": null,
            "airLineName": null,
            "airLineType": null,
            "uavId": null,
            "flyToFirstPointMode": null,
            "safeTakeoffAltitude": 0,
            "safeTakeoffSpeed": 0,
            "globalRouteSpeed": 0,
            "taskCompletionAction": null,
            "outOfControlOption": null,
            "typeOfOutOfControlAction": null,
            "globalWayPointType": null,
            "ptzControlMode": null,
            "aircraftYawAngleMode": null,
            "createTime": null,
            "wpml": null,
            "taskOffLng": 0,
            "taskOffLat": 0,
            "folder": null
        })
    },
    "wayline":{
        type:Object,
    },
    "waylineInfo":{
        type:Object,
        default: () => ({
            "missionConfig":{
                "flyToWaylineMode": "safely",            // 爬升模式  safely  pointToPoint
                "finishAction": "goHome",                // 航线结束动作 
                "exitOnRCLost": "executeLostAction",     // 失控是否继续执行航线
                "executeRCLostAction": "goBack",         // 失控动作类型
                "takeOffSecurityHeight": 20,             // 安全起飞高度
                "globalTransitionalSpeed": 15,           // 全局航线过渡速度
                "globalRTHHeight": 100,                  // 全局返航高度
                "droneInfo": {                           // 飞行器机型信息
                    "droneEnumValue": 100,
                    "droneSubEnumValue": 1
                },
                "autoRerouteInfo": {                     // 航线绕行
                    "transitionalAutoRerouteMode": 1,
                    "missionAutoRerouteMode": 1
                },
                "waylineAvoidLimitAreaMode": 0,
                "payloadInfo": {                         // 负载机型信息
                    "payloadEnumValue": 99,              // 负载机型主类型
                    "payloadSubEnumValue": 2,
                    "payloadPositionIndex": 0            // 负载挂载位置
                }
            },
            "Folder":{
                "templateId": 0,
                "executeHeightMode": "WGS84",
                "waylineId": 0,
                "distance": 1391.755859375,
                "duration": 200.941531419754,
                "autoFlightSpeed": 8.2,                          // 全局航线飞行速度
                "startActionGroup": {
                    "action": [
                        {
                            "actionId": 0,
                            "actionActuatorFunc": "gimbalRotate",
                            "actionActuatorFuncParam": {
                                "gimbalHeadingYawBase": "aircraft",
                                "gimbalRotateMode": "absoluteAngle",
                                "gimbalPitchRotateEnable": 1,
                                "gimbalPitchRotateAngle": -90,
                                "gimbalRollRotateEnable": 0,
                                "gimbalRollRotateAngle": 0,
                                "gimbalYawRotateEnable": 1,
                                "gimbalYawRotateAngle": 0,
                                "gimbalRotateTimeEnable": 0,
                                "gimbalRotateTime": 10,
                                "payloadPositionIndex": 0
                            }
                        },
                        {
                            "actionId": 1,
                            "actionActuatorFunc": "hover",
                            "actionActuatorFuncParam": {
                                "hoverTime": 0.5
                            }
                        },
                        {
                            "actionId": 2,
                            "actionActuatorFunc": "setFocusType",
                            "actionActuatorFuncParam": {
                                "cameraFocusType": "manual",
                                "payloadPositionIndex": 0
                            }
                        },
                        {
                            "actionId": 3,
                            "actionActuatorFunc": "focus",
                            "actionActuatorFuncParam": {
                                "focusX": 0,
                                "focusY": 0,
                                "focusRegionWidth": 0,
                                "focusRegionHeight": 0,
                                "isPointFocus": 0,
                                "isInfiniteFocus": 1,
                                "payloadPositionIndex": 0,
                                "isCalibrationFocus": 0
                            }
                        },
                        {
                            "actionId": 4,
                            "actionActuatorFunc": "hover",
                            "actionActuatorFuncParam": {
                                "hoverTime": 1
                            }
                        }
                    ]
                },
                Placemark:[]
            }
        })
    },
    "workPlanFormShow":{
        type:Boolean
    },
    "airPort":{
      type:Object
    },
    "uavTrack":{
        type:Object
    },
    "homeAirport":{
        type:Object
    },
    "templateKmlConfig":{
      type:Object
    },
    "waylineWpmlConfig":{
      type:Object
    }
  })




  watch(
    () => props.editMode,
    (newVal,oldVal)=>{
      if(newVal == 'edit' ){
        handlerEditPolygonAirLine();
      }
    }
  )
  
  

  watch(
    () => props.uavTrack,
    (val) => {
      setUAVPosition();
    },
    { deep: true },
  );


  watch(
    () => props.airPort,
    (val) => {
      setAirportPosition();
    },
    { deep: true },
  );

  watch(
    () => props.homeAirport,
    (val) => {
      homeSetAirportPosition();
    },
    { deep: true },
  );

  watch(
    () => props.workPlanFormShow,
    (newVal, oldVal) => {
      if (!newVal) {
        clearAllLayer();
      }
    },
  );

  // 航线表单
  watch(
    () => props.airLineForm,
    (newVal, oldVal) => {
        // 根据编辑模式更新地图右键菜单
        handlerBindMapMenus();
    },
    {
      deep:true,
    }
  );

  // 航线文件
  watch(
    () => props.wayline,
    (newVal, oldVal) => {
      generatePreviewPoint(newVal?.Folder?.Placemark);
    },
  );

  watch(
    () => props.waylineInfo,
    (newVal,oldVal) => {
      console.log("newval999",newVal);
    }
  )



// 航线预览：生成点
const generatePreviewPoint = (placemark)=>{

    // 设置默认起飞点
    takeOffPointPosition.value = [props.airLineForm?.taskOffLng, props.airLineForm?.taskOffLat, 70];

    // 先清空所有数据
    clearAllLayer();

    placemark?.forEach((item, index) => {
      let coordinate = item.Point.coordinates.split(',');
      let airPointInfo = {
        id: item.index,
        name: '航点',
        lng: coordinate[0],
        lat: coordinate[1],
        alt: item.executeHeight,
        aircraftHorizontalAngle: 0,
        cameraHorizontalAngle: 0,
        cameraVerticalAngle: 0,
        focalLength: 2,
      };
      airPoints.value?.push(airPointInfo);
    });

    if (props.airLineForm?.airLineType == 'waypoint') {
      // 航点航线

      airPoints.value?.forEach((item, index) => {
        let drawPoint = {
          _lng: item.lng,
          _lat: item.lat,
          _alt: item.alt,
        };
        preViewPointWayLine(drawPoint);
      });
    } else if (props.airLineForm?.airLineType == 'mapping2d') {
      let coordinates = [];
      airPoints.value?.forEach((item, index) => {
        coordinates.push([item.lng, item.lat]);
      });
      let line = turf.lineString(coordinates);
      preViewPolygonWayLine(line);
    }
};

  const emits = defineEmits(['exitDraw', 'flyToThere', 'mapOnLoad', 'clickAirPort', 'changeAirportLive', 'changeUAVLive']);

  const airPoints = ref([]);
  const currentAirPoint = ref({});
  const airPointConfigShow = ref(false);

  // 全局平移工具
  let moveTool: mars3d.thing.MatrixMove2;

  // 监听航点变化
  watch(
    currentAirPoint,
    (newVal, oldVal) => {
        //   更新航点
        updateAirPoint(newVal);
        //   更新镜头
        handlerDrawCamera(newVal);
    },
    { deep: true },
  );

  const clickPoint = (id) => {
    airPoints.value?.forEach((item, index) => {
      if (item.id == id) {
        currentAirPoint.value = item;
        airPointConfigShow.value = true;
      }
    });
  };

  const checkPoint = (e) => {
    currentAirPoint.value = e;
    airPointConfigShow.value = true;
  };

///////////////////////////////图层中心////////////////////////////////////////////

  let map: mars3d.Map; // 地图对象

  let graphicLayer: mars3d.layer.GraphicLayer;

  let uavGraphicLayer: mars3d.layer.GraphicLayer;

  // 设置参考起飞点图层
  let takeOffPointGraphicLayer:mars3d.layer.GraphicLayer;

  // 测区面图层
  let polygonGraphicLayer: mars3d.layer.GraphicLayer;

  // 面航线图层
  let polygonLineGraphicLayer: mars3d.layer.GeoJsonLayer;

  // 文本标注图层
  let textLabelGraphicLayer: mars3d.layer.GraphicLayer;

  // 航点地面投影点图层
  let stickGroundPointLayer: mars3d.layer.GraphicLayer;

  // 航点连接线
  let lineGroundPointLayer: mars3d.layer.GraphicLayer;

  // 项目首页机场位置
  let homeStartGraphic;

  let homeStartGraphicLive;

  let graphic = null;

  const exitDraw = () => {

    // 清空数据
    graphicLayer ? graphicLayer.clear() : null;

    takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;

    stickGroundPointLayer ? stickGroundPointLayer.clear() : null;

    lineGroundPointLayer ? lineGroundPointLayer.clear() : null;

    textLabelGraphicLayer ? textLabelGraphicLayer.clear() : null;
    
    polygonGraphicLayer ? polygonGraphicLayer.clear() : null;

    polygonLineGraphicLayer ? polygonLineGraphicLayer.clear() : null;

    airPoints.value = [];

    props.airLineForm.airLineType = null;

    airPointConfigShow.value = false;

    emits('exitDraw');
  };

  // 航点航线信息
  const lineInfo = ref({
    count: 0,
    length: 0,
    time: 0,
    picture: '- -',
  });
  // 面航线信息
  const airInfo = ref({
    area: 0,
    length: 0,
    time: 0,
    picture: '- -',
  });

  const polygonAirForm = ref({
    startingPoint: null,
    lensMode: 1,
    gatherMode: 1,
    heightMode: 1,
    height: 120,
    speed: 15,
    angle: 0,
    complete: 1,
  });

  const vChartRef = ref<HTMLElement>();

  onMounted(() => {
    initMap();
    EventBus.on('closeTranslation', (val: any) => {
      if (moveTool) {
        moveTool.destroy();
        moveTool = null;
      }
    });
  });

// 初始化地图
const initMap = () => {
  map = new mars3d.Map(vChartRef.value, {
    scene: {
      center: { lat: 35.132103, lng: 118.296315, alt: 260.9, heading: 357.9, pitch: -32 },
      scene3DOnly: false,
      shadows: false,
      removeDblClick: true,
      sceneMode: 3,
      showSun: true,
      showMoon: true,
      showSkyBox: true,
      showSkyAtmosphere: true,
      fog: true,
      fxaa: true,
      requestRenderMode: true,
      contextOptions: {
        requestWebgl1: false,
        webgl: {
          preserveDrawingBuffer: true,
          alpha: false,
          stencil: true,
          powerPreference: 'high-performance',
        },
      },

      globe: {
        depthTestAgainstTerrain: true,
        baseColor: '#546a53',
        showGroundAtmosphere: true,
        enableLighting: false,
      },
      cameraController: {
        zoomFactor: 3,
        minimumZoomDistance: 1,
        maximumZoomDistance: 50000000,
        enableRotate: true,
        enableTranslate: true,
        enableTilt: true,
        enableZoom: true,
        enableCollisionDetection: true,
        minimumCollisionTerrainHeight: 15000,
      },
    },
    control: {
      homeButton: true,
      baseLayerPicker: false,
      sceneModePicker: true,
      vrButton: false,
      fullscreenButton: true,
      navigationHelpButton: true,
      animation: false,
      timeline: false,
      infoBox: false,
      geocoder: false,
      selectionIndicator: false,
      showRenderLoopErrors: true,
      contextmenu: {
        hasDefault: true,
      },
      mouseDownView: true,
      zoom: {
        insertIndex: 1,
      },
      compass: {
        bottom: 'toolbar',
        left: '5px',
        rotation: true,
      },
      distanceLegend: {
        left: '10px',
        bottom: '2px',
      },
      locationBar: {
        crs: 'CGCS2000_GK_Zone_3',
        crsDecimal: 0,
        template:
          "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx}  纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
        cacheTime: 50,
      },
    },
    method: {
      templateValues: {
        dataServer: '//data.mars3d.cn',
        gltfServerUrl: '//data.mars3d.cn/gltf',
      },
    },
    terrain: {
      url: '//data.mars3d.cn/terrain',
      show: true,
      clip: true,
    },
    basemaps: [
      {
          "id": 10,
          "name": "地图底图",
          "type": "group"
      },
      {
          "id": 2021,
          "pid": 10,
          "name": "天地图影像",
          "icon": "https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png",
          "type": "group",
          "layers": [
              {
                  "name": "底图",
                  "type": "tdt",
                  "layer": "img_d"
              },
              {
                  "name": "注记",
                  "type": "tdt",
                  "layer": "img_z",
                  "zIndex":20,
              }
          ],
          "zIndex":20,
          "show": true
      },
    ],
    layers: [

    ],
  });

  map.on(mars3d.EventType.load, function (event) {
    // 地图右键菜单
    handlerBindMapMenus();

    graphicLayer = new mars3d.layer.GraphicLayer({
      isAutoEditing: false, // 是否自动激活编辑
    });

    graphicLayer.bindContextMenu([
      {
        text: '按轴平移',
        icon: 'fa fa-pencil',
        callback: (event) => {
          const graphic = event.graphic;
          let id = event.graphic.options.id;

          if (moveTool) {
            return null;
          }
          // 按轴移动
          moveTool = new mars3d.thing.MatrixMove2({
            position: graphic.position,
          });
          map.addThing(moveTool);
          moveTool.on(mars3d.EventType.change, (event) => {
            graphic.position = event.position;
            pointMove(event, id);
          });
        },
      },
      {
        text: '停止平移',
        icon: 'fa fa-pencil',
        callback: (event) => {
          const graphic = event.graphic;
          if (moveTool) {
            map.removeThing(moveTool);
            moveTool.destroy();
            moveTool = null;
          }
        },
      },
      {
        text: '删除',
        icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
        callback: (e) => {
          deleteAirPoint(e);
        },
      },
    ]);

    map.addLayer(graphicLayer);


    // 参考起飞点图层
    takeOffPointGraphicLayer = new mars3d.layer.GraphicLayer({
      isAutoEditing:true,
    })

    takeOffPointGraphicLayer.on(mars3d.EventType.editMovePoint, function (event) {
        takeOffPointMove(event);
    });

    map.addLayer(takeOffPointGraphicLayer);

    // 航点地面投影点
    stickGroundPointLayer = new mars3d.layer.GraphicLayer({
      isAutoEditing: false, // 是否自动激活编辑
    });
    map.addLayer(stickGroundPointLayer);

    // 航点连接线
    lineGroundPointLayer = new mars3d.layer.GraphicLayer({
      isAutoEditing: false, // 是否自动激活编辑
    });
    map.addLayer(lineGroundPointLayer);

    // 绘制航线
    graphicLayer.on(mars3d.EventType.click, (e) => {
      // 设置当前选中点

      clickPoint(e.graphic.options.id);
    });


    // 面测区图层
    polygonGraphicLayer = new mars3d.layer.GraphicLayer({
      isAutoEditing: true, // 是否自动激活编辑
    });

    polygonGraphicLayer.bindContextMenu([
      {
        text: '删除测区',
        icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
        callback: (e) => {
          handlerClearPolygonGraphicLayer(e);
        },
      },
    ]);

    polygonGraphicLayer.on(mars3d.EventType.editMovePoint,(event)=>{
      onPolygonGraphicLayerEdit(event);
    })

    map.addLayer(polygonGraphicLayer);


    // 绘制起点
    // handlerDrawStartPoint();

    if (props.airPort) {
      setAirportPosition();
    }
    if (props.uavTrack) {
      setUAVPosition();
    }
    // 加载长光高清影像
    // loadChangGuangLayer();

    // 图层回显
    if(props.editMode == 'edit' ){
      handlerEditPolygonAirLine();
    }

    emits('mapOnLoad',map)

  });
};



// 绑定地图右键菜单
const handlerBindMapMenus = () => {

  let mapContextmenuItems = [];

  if(props.airLineForm.airLineType == null){
      mapContextmenuItems = [
          {
            text: '飞行到此处',
            icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
            callback: (e) => {
              flyToThere(e);
            },
          }
      ]
  }else if(props.airLineForm.airLineType == 'waypoint'){
    mapContextmenuItems = [
      {
        text: '飞行到此处',
        icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
        callback: (e) => {
          flyToThere(e);
        },
      },
      {
        text: '添加航点',
        icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
        callback: (e) => {
          if (!takeOffPointPosition.value) {
            message.warning('请先设置起飞点');
            return null;
          }
          handlerDrawPoint(e);
        },
      }
    ];
  }else if(props.airLineForm.airLineType == 'mapping2d'){
    mapContextmenuItems = [
      {
        text: '飞行到此处',
        icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
        callback: (e) => {
          flyToThere(e);
        },
      },
      {
        text: '添加面区域',
        icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
        callback: (e) => {
          if (!polygonAirForm.value.startingPoint) {
            message.warning('请先设置起飞点');
            return null;
          }
          handlerDrawPolygon();
        },
      },
    ];
  }

  map.bindContextMenu(mapContextmenuItems);
};

///////////////////////////////图层和影像加载////////////////////////////////////////////

// 加载长光卫星高分影像
const loadChangGuangLayer = ()=>{
    var layer = new mars3d.layer.XyzLayer({
        url: "https://api.jl1mall.com/getMap/{z}/{x}/{reverseY}",
        queryParameters:{
            mk:"73ad26c4aa6957eef051ecc5a15308b4",
            tk:"5538f710dfc641048a8bdf1a7f705cd1",
            pro:"9297426cbe4c4ac2a01ca228a4ad30f7",
            vf:0
        },
        minimumLevel: 1,
        maximumLevel: 18,
        zIndex:2,
    });
    map.addLayer(layer);
}

///////////////////////////////参考起飞点////////////////////////////////////////////

// 全局参考起飞点  数据格式：[lng,lat,alt]
const takeOffPointPosition = ref(null);    

// 设置起飞点
const setTakeOffPoint = async () => {

  takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;

  const graphic = await takeOffPointGraphicLayer.startDraw({
    type: 'billboardP',
    style: {
      image: '/map/start.png',
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      label: {
        text: '参考起飞点',
        font_size: 16,
        color: '#ffffff',
        outline: true,
        outlineColor: '#000000',
        pixelOffsetY: -50,
      },
    }
  });

  takeOffPointPosition.value = graphic.toJSON().position;

  props.templateKmlConfig.missionConfig.takeOffRefPoint = takeOffPointPosition.value[1]+","+takeOffPointPosition.value[0]+","+takeOffPointPosition.value[2]
  
  polygonAirForm.value.startingPoint = graphic.toJSON().position;

  // 设置表单数据
  props.airLineForm.taskOffLng = takeOffPointPosition.value[0]
  props.airLineForm.taskOffLat = takeOffPointPosition.value[1]

  // 更新航线
  updatePolygonLineByParams();
};

// 参考起飞点移动
const takeOffPointMove = (e) => {

  let res = handlerGetLngLatHeight(e);

  takeOffPointPosition.value = [res.lng,res.lat,res.alt];
  polygonAirForm.value.startingPoint = [res.lng,res.lat,res.alt];

  // 设置表单数据
  props.airLineForm.taskOffLng = takeOffPointPosition.value[0]
  props.airLineForm.taskOffLat = takeOffPointPosition.value[1]

  props.templateKmlConfig.missionConfig.takeOffRefPoint = takeOffPointPosition.value[1].toFixed(8)+","+takeOffPointPosition.value[0].toFixed(8)+","+takeOffPointPosition.value[2].toFixed(2)

  
  // 根据航线类型更新航线
  if(props.airLineForm.airLineType == 'mapping2d'){
    updatePolygonLineByParams();
  }else if(props.airLineForm.airLineType == 'waypoint'){
    handlerDrawLine();
  }
  

}

// 处理Graphic鼠标事件返回信息
const handlerGetLngLatHeight = (e)=>{

  let cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.cartesian);
  let longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
  let latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
  let height = cartographic.height; 

  let res = {
    lng:longitude,
    lat:latitude,
    alt:height
  }
  return res;
}

///////////////////////////////面状航线计算////////////////////////////////////////////

// 全局面状测区

const polygonGeoJson = ref();

// 计算参数
const polygonCalculateParams = ref({
    "gsd": 0,
    "overlapY": 70,
    "overlapX": 80,
    "overlapAngle": 0,
    "height": 0,
    "spacing": 0,
    "safeyFlyHeight":20,
})

// 绘制面状测区
const handlerDrawPolygon = async () => {

  const graphic = await polygonGraphicLayer.startDraw({
    type: 'polygon',
    style: {
      color: '#408eff',
      opacity: 0.3,
      outline: true,
      outlineColor: '#408eff',
      outlineWidth: 3.0,
      clampToGround: true,
    },
  });

  let coordinates = graphic.toJSON().positions;

  coordinates.push(coordinates[0]);

  polygonGeoJson.value = coordinates;

  let polygon = turf.polygon([coordinates]);

  let polygonWkt = GeojsonToWkt(polygon['geometry']);

  props.airLineForm.flyToFirstPointMode = polygonWkt;

  let spceing = parseFloat(polygonCalculateParams.value?.spacing) / 10000;
  let lines = generateScanLines(polygon,spceing, 0);

  // 计算面积
  CalculateAreaInfo(polygon, lines);
  // 绘制面航线
  handlerDrawPolygonLine(lines);
  // 计算边长等信息
  handlerGetPolygonBorderInfo(polygonGeoJson.value);
};

// 测区编辑后重新计算航线
const onPolygonGraphicLayerEdit = (e)=>{

  let coordinates = e.graphic.toJSON().positions;
 
  if(props.editMode == 'add'){
    coordinates.push(coordinates[0]);
  }

  polygonGeoJson.value = coordinates;

  let polygon = turf.polygon([coordinates]);

  let polygonWkt = GeojsonToWkt(polygon['geometry']);
  props.airLineForm.flyToFirstPointMode = polygonWkt;

  let spceing = parseFloat(polygonCalculateParams.value?.spacing) / 10000;
  let lines = generateScanLines(polygon,spceing, 0);

  // 计算面积
  CalculateAreaInfo(polygon, lines);
  // 绘制面航线
  handlerDrawPolygonLine(lines);
  // 计算边长等信息
  handlerGetPolygonBorderInfo(polygonGeoJson.value);

}

// 绘制面航线
const handlerDrawPolygonLine = (lines) => {
  // 设置首航点
  let firstAirLinePoint = polygonGraphicLayer.getGraphicById("polygon-node-1");
  if(firstAirLinePoint){
      firstAirLinePoint.setOptions({
        position: lines.geometry.coordinates[0],
      })
  }else{
    const graphic = new mars3d.graphic.BillboardEntity({
      id: 'polygon-node-1',
      name: '航点',
      position: lines.geometry.coordinates[0],
      style: {
        image: '/map/node.png',
        scale: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
          text: '',
          font_size: 14,
          color: '#ffffff',
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -35,
        },
      },
    });
    polygonGraphicLayer.addGraphic(graphic);
  }
  

  // 判断飞行模式 设置航点高度
  lines.geometry.coordinates.unshift([
    polygonAirForm.value.startingPoint[0],
    polygonAirForm.value.startingPoint[1],
    polygonAirForm.value.startingPoint[2] + parseFloat(polygonCalculateParams.value.safeyFlyHeight),
  ]);

  // 链接起点
  lines.geometry.coordinates.unshift(polygonAirForm.value.startingPoint);

  if (polygonLineGraphicLayer) {
    polygonLineGraphicLayer.clear();
    polygonLineGraphicLayer.loadGeoJSON(lines);
  } else {
    polygonLineGraphicLayer = new mars3d.layer.GeoJsonLayer({
      name: '面航线',
      data: lines,
      symbol: {
        type: 'polyline',
        styleOptions: {
          arcType: Cesium.ArcType.GEODESIC, // 使用大地线
          width: 2.0,
          color: '#0aed8b',
        },
      },
      flyTo: true,
    });
    map.addLayer(polygonLineGraphicLayer);
  }
};

// 计算面航线
function generateScanLines(polygon, spacing, angle = 0) {
  
  if (!turf.booleanValid(polygon)) throw new Error('无效的多边形');

  spacing = Math.abs(spacing);

  // 获取多边形的旋转边界框
  const bbox = turf.bbox(polygon);
  const center = turf.center(polygon).geometry.coordinates;

  // 计算需要生成的线数量(加缓冲确保完全覆盖)
  const diagLength = turf.distance(
    turf.point([bbox[0], bbox[1]]),
    turf.point([bbox[2], bbox[3]]),
  );
  const lineCount = Math.ceil(diagLength / spacing) + 2;

  // 生成基础水平线
  const lines = [];

  for (let i = -1; i <= lineCount; i++) {
    const y = bbox[1] + i * spacing * 0.11 - spacing * 0.11;
    lines.push(
      turf.lineString([
        [bbox[0] - spacing, y],
        [bbox[2] + spacing, y],
      ]),
    );
  }

  // 旋转线条到指定角度
  const rotatedLines = lines.map((line) => turf.transformRotate(line, angle, { pivot: center }));

  // 裁剪线条到多边形内并处理结果
  const coverageLines = [];

  rotatedLines.forEach((line) => {
    try {
      const intersection = turf.lineIntersect(line, polygon);

      if (intersection.features.length >= 2) {
        // 按与线起点距离排序交点
        const sortedPoints = intersection.features
          .map((f) => f.geometry.coordinates)
          .sort(
            (a, b) =>
              turf.distance(line.geometry.coordinates[0], turf.point(a)) -
              turf.distance(line.geometry.coordinates[0], turf.point(b)),
          );

        // 创建连接最远两个交点的线段
        coverageLines.push(
          turf.lineString([sortedPoints[0], sortedPoints[sortedPoints.length - 1]]),
        );
      }
    } catch (e) {
      console.warn('处理线段时出错:', e);
    }
  });

  let connectedLine = connectLinesManual(turf.featureCollection(coverageLines));


  // 将航点提取并添加到airPoints
  airPoints.value = [];

  connectedLine.geometry.coordinates?.forEach((item,index)=>{
    let point = {
        id: index,
        lng: item[0],
        lat: item[1],
        alt: item[2],
        aircraftHorizontalAngle: 0,
        cameraHorizontalAngle: 0,
        cameraVerticalAngle: 0,
        focalLength: 1,
    }

    airPoints.value?.push(point);
  })

  // 倒数第2个点
  let penultimatePoint =JSON.parse(JSON.stringify( airPoints.value[airPoints.value.length - 1]));
  penultimatePoint.id = penultimatePoint.id+1;
  airPoints.value?.push(penultimatePoint);


  // 添加测区中心点 （最后1个点）
  let turfPolygon = turf.polygon([
      polygonGeoJson.value
  ]);

  let polygonCenter = turf.centroid(turfPolygon);
  
  let lastPoint =  {
      id: airPoints.value[airPoints.value.length - 1].id+1,
      lng: polygonCenter.geometry.coordinates[0],
      lat: polygonCenter.geometry.coordinates[1],
      alt: airPoints.value[airPoints.value.length-1].alt,
      aircraftHorizontalAngle: 0,
      cameraHorizontalAngle: 0,
      cameraVerticalAngle: 0,
      focalLength: 1,
  }
  airPoints.value?.push(lastPoint);


  // 添加最后一个点到线数据中
  connectedLine.geometry.coordinates.push([lastPoint.lng,lastPoint.lat,lastPoint.alt])

  return connectedLine;
}

// 处理面航线
const connectLinesManual = (lines) => {
  // 确保输入是FeatureCollection
  if (lines.type !== 'FeatureCollection') {
    lines = turf.featureCollection([lines]);
  }

  // 收集所有坐标点
  let allCoords = [];
  lines.features.forEach((line, index) => {


    // 相对起飞点高度
    let relativeHeight = takeOffPointPosition.value[2] + parseFloat(polygonCalculateParams.value.height);

    line.geometry.coordinates?.forEach((item, idx) => {
      line.geometry.coordinates[idx].push(relativeHeight);
    });

    if (line.geometry.type === 'LineString' && index % 2 == 0) {
      allCoords = allCoords.concat(line.geometry.coordinates.reverse());
    } else {
      allCoords = allCoords.concat(line.geometry.coordinates);
    }
  });

  // 移除连续重复的点
  const cleanedCoords = [];
  if (allCoords.length > 0) {
    cleanedCoords.push(allCoords[0]);
    for (let i = 1; i < allCoords.length; i++) {
      const prev = cleanedCoords[cleanedCoords.length - 1];
      if (prev[0] !== allCoords[i][0] || prev[1] !== allCoords[i][1]) {
        cleanedCoords.push(allCoords[i]);
      }
    }
  }

  return turf.lineString(cleanedCoords);
};

// 标绘面状航线起点
const handlerDrawStartPoint = async () => {
  graphic = await graphicLayer.startDraw({
    type: 'billboard',
    style: {
      image: '/map/start.png',
      scale: 0.7,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      label: {
        text: '无人机起始位置',
        font_size: 16,
        color: '#ffffff',
        outline: true,
        outlineColor: '#000000',
        pixelOffsetY: -60,
      },
    },
  });
  // 设置贴地点 和 连接线
};

// 计算面状测区面积、长度、完成用时、拍摄数量
const CalculateAreaInfo = (polygon, lines) => {
  // 测区面积
  airInfo.value.area = turf.area(polygon).toFixed(2);

  // 航线长度
  airInfo.value.length = turf.length(lines).toFixed(2);

  // 预计用时
  airInfo.value.time = ((airInfo.value.length * 1000) / polygonAirForm.value.speed / 60).toFixed(
    2,
  );

  // 照片数量
};

// 删除面状测区 和 面状航线
const handlerClearPolygonGraphicLayer = () => {

  polygonGraphicLayer ? polygonGraphicLayer.clear() : null;

  polygonLineGraphicLayer ? polygonLineGraphicLayer.clear() : null;

  textLabelGraphicLayer ? textLabelGraphicLayer.clear() : null;

  polygonGeoJson.value = null;

  airInfo.value = {
    area: 0,
    length: 0,
    time: 0,
    picture: '- -',
  };

};

// 面状航线测区、参数改变
const calculatParamChange = (params) => {
    polygonCalculateParams.value = params;
    
    if(polygonGeoJson.value){
      let polygon = turf.polygon([polygonGeoJson.value]);
      let spceing = parseFloat(params.spacing) / 10000;
      let angle = parseFloat(params.overlapAngle);
      // 生成航线
      let lines = generateScanLines(polygon, spceing,angle);
      // 计算面积 长度
      CalculateAreaInfo(polygon, lines);
      // 绘制面航线
      handlerDrawPolygonLine(lines);
      // 计算边长等信息
      handlerGetPolygonBorderInfo(polygonGeoJson.value);
    }
}

// 根据参数更新面状航线
const updatePolygonLineByParams = ()=>{

  if(polygonGeoJson.value && polygonCalculateParams.value){
      let polygon = turf.polygon([polygonGeoJson.value]);
      let spceing = parseFloat(polygonCalculateParams.value.spacing) / 10000;
      let angle = parseFloat(polygonCalculateParams.value.overlapAngle);
      // 生成航线
      let lines = generateScanLines(polygon, spceing,angle);
      // 计算面积 长度
      CalculateAreaInfo(polygon, lines);
      // 绘制面航线
      handlerDrawPolygonLine(lines);
      // 计算边长等信息
      handlerGetPolygonBorderInfo(polygonGeoJson.value);
    }
}

// 计算绘制的多边形每条线的长度和中心点
const polygonBorderInfo = ref([]);

// 计算测区各边长
const handlerGetPolygonBorderInfo = (polygonCoords) => {

    // 创建Turf多边形对象
    let polygon = turf.polygon([polygonCoords]);
  
    // 1. 计算边长
    let coordinates = polygon.geometry.coordinates[0];
    let edgeLengths = [];
    
    for (let i = 0; i < coordinates.length - 1; i++) {
      let start = coordinates[i];
      let end = coordinates[i + 1];
      let distance = turf.distance(turf.point(start), turf.point(end), {units: 'meters'});
      
      let midpoint = turf.midpoint(start, end);

      edgeLengths.push({
        length: distance.toFixed(2),
        center:midpoint?.geometry?.coordinates
      });
    }

    handlerLoadtextLabelGraphicLayer(edgeLengths);
    return edgeLengths;
}

// 绘制文本标注
const handlerLoadtextLabelGraphicLayer = (info) => {

  if(textLabelGraphicLayer == null){
    textLabelGraphicLayer = new mars3d.layer.GraphicLayer({
      isAutoEditing:false
    })
    map.addLayer(textLabelGraphicLayer);
  }else{
    textLabelGraphicLayer.clear();
  }
  
  info?.forEach((item,index)=>{
    const graphic = new mars3d.graphic.LabelEntity({
      position: [item.center[0], item.center[1], 0],
      style: {
        text: item.length+"m",
        font_size: 15, 
        scale: 1, 
        font_family: "微软雅黑",
        color: "#ffffff",
        outline: true,
        outlineColor: "#000000",
        outlineWidth: 2,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        visibleDepth: false,
        clampToGround:true,
      },
      attr: { remark: "示例1" }
    })
    textLabelGraphicLayer.addGraphic(graphic)
  })
}


// 编辑回显航线
const handlerEditPolygonAirLine =async () => {

  // 解析和设置参考起飞点

  let takeoffArray = props.templateKmlConfig.missionConfig.takeOffRefPoint.split(",");

  takeOffPointPosition.value = [parseFloat(takeoffArray[1]),parseFloat(takeoffArray[0]),parseFloat(takeoffArray[2])]
  
  polygonAirForm.value.startingPoint = [parseFloat(takeoffArray[1]),parseFloat(takeoffArray[0]),parseFloat(takeoffArray[2])];

  takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;

  let startFlyGraphic = new mars3d.graphic.BillboardEntity({
    position:takeOffPointPosition.value,
    style: {
      image: '/map/start.png',
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      label: {
        text: '参考起飞点',
        font_size: 16,
        color: '#ffffff',
        outline: true,
        outlineColor: '#000000',
        pixelOffsetY: -50,
      },
      clampToGround: true,
    },
  })

  takeOffPointGraphicLayer.addGraphic(startFlyGraphic);

  // 处理 和 加载测区数据

  let coordinateArray = props.templateKmlConfig.Folder.Placemark.Polygon.outerBoundaryIs.LinearRing.coordinates.split("\n");

  let geomtryCoorinate = [];

  coordinateArray.forEach((item,index)=>{
     let trimStr = item.trim();
     let arr = trimStr.split(",")
     for(let i=0;i<arr.length;i++){
        arr[i] = parseFloat(arr[i])
     }
     geomtryCoorinate.push(arr);
  })

  geomtryCoorinate.push(geomtryCoorinate[0])

  let geometry = {
        "type": "Polygon",
        "coordinates": [geomtryCoorinate]
    }


  // let areaJson = WktToGeojson(props.airLineForm.flyToFirstPointMode)
  polygonGeoJson.value = geometry.coordinates[0];

  let geojsonData = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": geometry
      }
    ]
  }

  polygonGraphicLayer ? polygonGraphicLayer.clear() : null;
  
  polygonGraphicLayer.loadGeoJSON(geojsonData,{
    type: 'polygon',
    flyTo:true,
    style: {
      color: '#408eff',
      opacity: 0.3,
      outline: true,
      outlineColor: '#408eff',
      outlineWidth: 3.0,
      clampToGround: true,
    },
  })
  
  // 加载文本标注
  handlerGetPolygonBorderInfo(geometry.coordinates[0])

  // 加载航线
  // let placemark = props.waylineInfo?.Folder?.Placemark

  // placemark?.forEach((item, index) => {
  //     let coordinate = item.Point.coordinates.split(',');
  //     let airPointInfo = {
  //       id: item.index,
  //       name: '航点',
  //       lng: coordinate[0],
  //       lat: coordinate[1],
  //       alt: item.executeHeight,
  //       aircraftHorizontalAngle: 0,
  //       cameraHorizontalAngle: 0,
  //       cameraVerticalAngle: 0,
  //       focalLength: 2,
  //     };
  //     airPoints.value?.push(airPointInfo);
  // });

  // let coordinates = [];

  // airPoints.value?.forEach((item, index) => {
  //   coordinates.push([item.lng, item.lat]);
  // });

  // let line = turf.lineString(coordinates);

  // handlerDrawPolygonLine(line);
}

///////////////////////////////航点航线计算////////////////////////////////////////////

// 航点移动
const pointMove = (e, id) => {
  const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.position);
  const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
  const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
  const height = cartographic.height; // 高度（米）
  let stickGraphic = stickGroundPointLayer.getGraphicById('stick' + id);
  if (stickGraphic) {
    stickGraphic.setOptions({
      position: [longitude, latitude],
      style: {
        color: '#f5f5f5',
        pixelSize: 8,
        outline: true,
        outlineColor: '#f5f5f5',
        outlineWidth: 1,
        clampToGround: true,
      },
    });
  }
  let lineGraphic = lineGroundPointLayer.getGraphicById('line' + id);
  if (lineGraphic) {
    lineGraphic.setOptions({
      positions: [
        [longitude, latitude, height],
        [longitude, latitude, 0],
      ],
      style: {
        color: '#f5f5f5',
        width: 1,
      },
    });
  }

  // 更新坐标数据
  airPoints.value?.forEach((item, index) => {
    if (item.id == id) {
      airPoints.value[index].lng = longitude;
      airPoints.value[index].lat = latitude;
      airPoints.value[index].alt = height;
    }
  });

  // 更新航线
  handlerDrawLine();
};

// 绘制航线
const handlerDrawLine = () => {

  let positions = [];

  airPoints.value?.forEach((item, index) => {
    positions.push([item.lng, item.lat, item.alt]);
  });

  positions.unshift([takeOffPointPosition.value[0], takeOffPointPosition.value[1], airPoints.value[0].alt]);

  positions.unshift([takeOffPointPosition.value[0], takeOffPointPosition.value[1], takeOffPointPosition.value[2]]);

  // 判断是否已经绘制
  if (positions.length > 1) {
    let lineGraphic = graphicLayer.getGraphicById('pointsLine');

    if (lineGraphic) {
      lineGraphic.setOptions({
        id: 'pointsLine',
        positions: positions,
        style: {
          width: 2,
          color: '#3388ff',
        },
      });
    } else {
      const graphic = new mars3d.graphic.PolylineEntity({
        id: 'pointsLine',
        positions: positions,
        style: {
          width: 2,
          color: '#3388ff',
        },
      });
      graphicLayer.addGraphic(graphic);
    }
  }

  // 计算航线长度
  // let lineString = turf.lineString(positions);
  // lineInfo.value.length = turf.length(lineString).toFixed(2);
};
    
const uavPoints = ref([]);

// 绘制航点
const handlerDrawPoint = (e) => {
    if (moveTool) {
        moveTool.destroy();
        moveTool = null;
    }

    let position = mars3d.LngLatPoint.fromCartesian(e.position);

    let uuid = buildUUID();

    // 航点三维模型
    let uavAngleGraphic = new mars3d.graphic.ModelEntity({
        id:uuid,
        name: "航向",
        position: [position._lng, position._lat, position._alt],
        style: {
            url: "/map/uav-angle.gltf",
            scale: 0.1,
            heading: 90,
            distanceDisplayCondition: true,
            distanceDisplayCondition_near: 0,
            distanceDisplayPoint: {
                color: "#00ff00",
                pixelSize: 8
            },
            label: {
                text: "",
                font_size: 18,
                color: "#ffffff",
                pixelOffsetY: -50,
                distanceDisplayCondition: true,
                distanceDisplayCondition_far: 10000,
                distanceDisplayCondition_near: 0
            }
        },
        attr: { remark: "示例1" }
    })
    graphicLayer.addGraphic(uavAngleGraphic)

    // 地面投影点
    let stickGraphic = new mars3d.graphic.PointEntity({
        id: 'stick' + uuid,
        position: [position._lng, position._lat],
        style: {
        color: '#f5f5f5',
        pixelSize: 8,
        outline: true,
        outlineColor: '#f5f5f5',
        outlineWidth: 1,
        clampToGround: true,
        },
    });
    stickGroundPointLayer.addGraphic(stickGraphic);

    // 航点 投影点连接线
    let lineGraphic = new mars3d.graphic.PolylineEntity({
        id: 'line' + uuid,
        positions: [
        [position._lng, position._lat, position._alt],
        [position._lng, position._lat, 0],
        ],
        style: {
        color: '#f5f5f5',
        width: 1,
        },
    });
    lineGroundPointLayer.addGraphic(lineGraphic);

    // 航点列表
    let airPointInfo = {
        id: uuid,
        name: '航点',
        lng: position._lng,
        lat: position._lat,
        alt: position._alt,
        aircraftHorizontalAngle: 0,
        cameraHorizontalAngle: 0,
        cameraVerticalAngle: 0,
        focalLength: 2,
        actions:[],
    };
    airPoints.value?.push(airPointInfo);

    uavPoints.value.push(graphic);

    // 当前航点
    currentAirPoint.value = airPoints.value[airPoints.value?.length - 1];

    // 更新航线
    handlerDrawLine();
};

// 绘制镜头
const handlerDrawCamera = (e) => {

    // 判断是否已经添加
    const graphic = graphicLayer.getGraphicById("cameraGraphic");
    if(graphic){ // 如果存在更新数据
        graphic.setOptions({
            id: "cameraGraphic",
            position: [e.lng,e.lat,e.alt],
            show:true,
            style: {
                angle1: 30,   // 椎体夹角1
                angle2: 30,   // 椎体夹角2
                length: 100,   // 椎体长度
                rayEllipsoid: false,
                color: "rgba(0,255,255,0.3)",
                outline: true,
                topShow: true,
                topSteps: 2,
                flat: true,
                cameraHpr: true,
                heading:e.aircraftHorizontalAngle,
                pitch: e.cameraVerticalAngle+90,                   // 俯仰角 0 - 360度
                roll: 0,
            }
        })
    }else{  
        let satelliteSensor = new mars3d.graphic.RectSensor({
            id:"cameraGraphic",
            position: [e.lng,e.lat,e.alt],
            style: {
                flat: true,
                angle1: 30,   // 椎体夹角1
                angle2: 30,   // 椎体夹角2
                length: 100,   // 椎体长度
                rayEllipsoid: false,
                color: "rgba(0,255,255,0.3)",
                outline: true,
                topShow: true,
                topSteps: 2,
                cameraHpr: true,
                heading:e.aircraftHorizontalAngle,
                pitch: e.cameraVerticalAngle+90,                   // 俯仰角 0 - 360度
                roll: 0,
            }
        })
        graphicLayer.addGraphic(satelliteSensor)
    }
}

// 更新航点
const updateAirPoint = (e) => {
    // 更新航点
    let graphic = graphicLayer.getGraphicById(e.id);
    if (graphic) {
        graphic.setOptions(
            {
                name: "航向",
                position: [e.lng, e.lat, e.alt],
                style: {
                    url: "/map/uav-angle.gltf",
                    scale: 0.1,
                    heading: e.aircraftHorizontalAngle,
                    distanceDisplayCondition: true,
                    distanceDisplayCondition_near: 0,
                    distanceDisplayPoint: {
                        color: "#00ff00",
                        pixelSize: 8
                    },
                    label: {
                        text: "",
                        font_size: 18,
                        color: "#ffffff",
                        pixelOffsetY: -50,
                        distanceDisplayCondition: true,
                        distanceDisplayCondition_far: 10000,
                        distanceDisplayCondition_near: 0
                    }
                },
                attr: { remark: "示例1" }
            }
        );
    }

    // 更新贴地点
    let stickGraphic = stickGroundPointLayer.getGraphicById('stick' + e.id);
    if (stickGraphic) {
    stickGraphic.setOptions({
        position: [e.lng, e.lat],
        style: {
        color: '#f5f5f5',
        pixelSize: 8,
        outline: true,
        outlineColor: '#f5f5f5',
        outlineWidth: 1,
        clampToGround: true,
        },
    });
    }

    // 更新投影点连线
    let lineGraphic = lineGroundPointLayer.getGraphicById('line' + e.id);
    if (lineGraphic) {
    lineGraphic.setOptions({
        positions: [
        [e.lng, e.lat, e.alt],
        [e.lng, e.lat, 0],
        ],
        style: {
        color: '#f5f5f5',
        width: 1,
        },
    });
    }

    let cameraGraphic = graphicLayer.getGraphicById('camera' + e.id);
    if (cameraGraphic) {
    cameraGraphic.setOptions({
        position: [e.lng, e.lat, e.alt],
        // style: {
        //     angle1: 30,   // 椎体夹角1
        //     angle2: 30,   // 椎体夹角2
        //     length: 50,  // 椎体长度
        //     rayEllipsoid: true,
        //     color: "rgba(0,255,255,0.3)",
        //     outline: true,
        //     topShow: true,
        //     topSteps: 2,
        //     flat: true,
        //     cameraHpr: true,
        //     heading: 0,
        //     pitch: 180,
        //     roll: 0,   //
        //     clippingPlanes: [{
        //         distance: 0, // 设置裁剪平面在地表（0高度）
        //         normal: new Cesium.Cartesian3(0, 0, -1) // 法向量向下（隐藏地表以下部分）
        //     }]
        // }
    });
    }

    // 更新航线
    handlerDrawLine();
};

// 删除航点
const deleteAirPoint = (e) => {
    let id = e.graphic.id;

    // 删除航点
    let point = graphicLayer.getGraphicById(id);
    if (point) {
    graphicLayer.removeGraphic(point);
    }

    // 删除相机
    let camera = graphicLayer.getGraphicById('camera' + id);
    if (camera) {
    graphicLayer.removeGraphic(camera);
    }

    // 删除数据
    airPoints.value?.forEach((item, index) => {
    if (item.id == id) {
        airPoints.value?.splice(index, 1);
    }
    });

    // 更新航线
    handlerDrawLine();
};

let stickGraphicLayer: mars3d.layer.GraphicLayer;

// 飞行到此处
const flyToThere = (e) => {
    if (!uavGraphicLayer) {
    uavGraphicLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: false, // 是否自动激活编辑
    });

    uavGraphicLayer.bindContextMenu([
        {
        text: '按轴平移',
        icon: 'fa fa-pencil',
        callback: (event) => {
            const graphic = event.graphic;
            if (moveTool) {
            return null;
            }

            // 按轴移动
            moveTool = new mars3d.thing.MatrixMove2({
            position: graphic.position,
            });
            map.addThing(moveTool);
            moveTool.on(mars3d.EventType.change, (event) => {
            graphic.position = event.position;
            uavGraphicMove(event);
            });
        },
        },
        {
        text: '停止平移',
        icon: 'fa fa-pencil',
        callback: (event) => {
            const graphic = event.graphic;
            if (moveTool) {
            moveTool.destroy();
            moveTool = null;
            }
        },
        },
        {
        text: '删除',
        icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
        callback: (e) => {
            deleteFlyToThere(e);
        },
        },
    ]);

    map.addLayer(uavGraphicLayer);

    uavGraphicLayer.on(mars3d.EventType.editMouseMove, (e) => {});
    }

    if (moveTool) {
    moveTool.destroy();
    moveTool = null;
    }

    if (!stickGraphicLayer) {
    stickGraphicLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: false, // 是否自动激活编辑
    });
    map.addLayer(stickGraphicLayer);
    }

    uavGraphicLayer.clear();
    stickGraphicLayer.clear();

    let position = mars3d.LngLatPoint.fromCartesian(e.position);



    let mark = graphicLayer.getGraphicById('flytothere');

    if (mark) {
        graphicLayer.removeGraphic(mark);
    }

    // 无人机点
    const graphic = new mars3d.graphic.BillboardEntity({
    id: 'flytothere-uav',
    name: '标点',
    position: [position._lng, position._lat, position._alt+80],
    style: {
        image: '/map/uav-mark.png',
        scale: 0.3,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
        text: '',
        font_size: 14,
        color: '#ffffff',
        outline: true,
        outlineColor: '#000000',
        pixelOffsetY: -40,
        },
    },
    });

    // 贴地点
    const stickGraphic = new mars3d.graphic.PointEntity({
    id: 'flytothere-stick',
    position: [position._lng, position._lat],
    style: {
        color: '#f5f5f5',
        pixelSize: 8,
        outline: true,
        outlineColor: '#f5f5f5',
        outlineWidth: 1,
        clampToGround: true,
    },
    });

    stickGraphic.on(mars3d.EventType.editMouseMove, (e) => {
    const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.cartesian);
    // 弧度转度数
    const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
    const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
    const height = cartographic.height; // 高度（米）
    stickGraphicMove([longitude, latitude, height]);
    });

    // 连接线
    let connectLine = new mars3d.graphic.PolylineEntity({
    id: 'flytothere-line',
    positions: [
        [position._lng, position._lat, position._alt+80],
        [position._lng, position._lat, 0],
    ],
    style: {
        color: '#f5f5f5',
        width: 1,
    },
    });

    uavGraphicLayer.addGraphic(graphic);
    stickGraphicLayer.addGraphic(stickGraphic);
    uavGraphicLayer.addGraphic(connectLine);

    // 获取无人机的坐标并返回
    let flyToPosition = mars3d.LngLatPoint.fromCartesian(graphic.position);
    emits('flyToThere', flyToPosition);
};

// 移动贴地点
const stickGraphicMove = (e) => {
    return null;
    let uav = uavGraphicLayer.getGraphicById('flytothere-uav');

    if (uav) {
    uav.setOptions({
        id: 'flytothere-uav',
        name: '标点',
        position: [e[0], e[1], 200],
        style: {
        image: '/map/uav-mark.png',
        scale: 0.3,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
            text: '',
            font_size: 14,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -40,
        },
        },
    });
    }

    let line = uavGraphicLayer.getGraphicById('flytothere-line');
    if (line) {
    line.setOptions({
        id: 'flytothere-line',
        positions: [
        [e[0], e[1], 200],
        [e[0], e[1], 0],
        ],
        style: {
        color: '#f5f5f5',
        width: 1,
        },
    });
    }
};

// 删除飞行到此处
const deleteFlyToThere = (e) => {
    let id = e.graphic.id;

    let uavGraphic = uavGraphicLayer.getGraphicById(id);
    if (uavGraphic) {
    uavGraphicLayer.removeGraphic(uavGraphic);
    }

    let lineGraphic = uavGraphicLayer.getGraphicById('flytothere-line');
    if (lineGraphic) {
    uavGraphicLayer.removeGraphic(lineGraphic);
    }

    let stickGraphic = stickGraphicLayer.getGraphicById('flytothere-stick');
    if (stickGraphic) {
    stickGraphicLayer.removeGraphic(stickGraphic);
    }

    if (moveTool) {
    moveTool.destroy();
    moveTool = null;
    }
    emits('flyToThere', { _lng: null, _lat: null, _alt: null });
};

// 无人机点按轴移动
const uavGraphicMove = (e) => {
    const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.position);

    // 弧度转度数
    const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
    const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
    const height = cartographic.height; // 高度（米）

    emits('flyToThere', { _lng: longitude, _lat: latitude, _alt: height });

    let line = uavGraphicLayer.getGraphicById('flytothere-line');

    if (line) {
    line.setOptions({
        id: 'flytothere-line',
        positions: [
        [longitude, latitude, height],
        [longitude, latitude, 0],
        ],
        style: {
        color: '#f5f5f5',
        width: 1,
        },
    });
    }

    let stick = stickGraphicLayer.getGraphicById('flytothere-stick');
    if (stick) {
    stick.setOptions({
        id: 'flytothere-stick',
        position: [longitude, latitude],
        style: {
        color: '#f5f5f5',
        pixelSize: 8,
        outline: true,
        outlineColor: '#f5f5f5',
        outlineWidth: 1,
        clampToGround: true,
        },
    });
    }
};

// 预览航点航线
const preViewPointWayLine = (position) => {
    if (moveTool) {
    moveTool.destroy();
      moveTool = null;
    }

    let uuid = buildUUID();
    // 参考起飞点
    
    let startGraphic = new mars3d.graphic.BillboardEntity({
      id: 'start-graphic',
      position: takeOffPointPosition.value,
      style: {
          image: '/map/start.png',
          scale: 1,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          label: {
          text: '参考起飞点',
          font_size: 14,
          color: '#ffffff',
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -35,
          },
      },
    });
    graphicLayer.addGraphic(startGraphic);

    // 航点
    let graphic = new mars3d.graphic.BillboardEntity({
    id: uuid,
    name: '航点',
    position: [position._lng, position._lat, position._alt],
    style: {
        image: '/map/node.png',
        scale: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
        text: '航点',
        font_size: 14,
        color: '#ffffff',
        outline: true,
        outlineColor: '#000000',
        pixelOffsetY: -35,
        },
    },
    });
    graphicLayer.addGraphic(graphic);

    // 地面投影点
    let stickGraphic = new mars3d.graphic.PointEntity({
    id: 'stick' + uuid,
    position: [position._lng, position._lat],
    style: {
        color: '#f5f5f5',
        pixelSize: 8,
        outline: true,
        outlineColor: '#f5f5f5',
        outlineWidth: 1,
        clampToGround: true,
    },
    });
    stickGroundPointLayer.addGraphic(stickGraphic);

    // 航点 投影点连接线
    let lineGraphic = new mars3d.graphic.PolylineEntity({
    id: 'line' + uuid,
    positions: [
        [position._lng, position._lat, position._alt],
        [position._lng, position._lat, 0],
    ],
    style: {
        color: '#f5f5f5',
        width: 1,
    },
    });
    lineGroundPointLayer.addGraphic(lineGraphic);

    graphicLayer.flyTo();

    // 绘制航线
    handlerDrawLine();
};

// 预览面状航线
const preViewPolygonWayLine = (lines) => {
    handlerDrawLine();
};

// 清空所有图层
const clearAllLayer = () => {

    graphicLayer ? graphicLayer.clear() : null;

    stickGroundPointLayer ? stickGroundPointLayer.clear() : null;

    lineGroundPointLayer ? lineGroundPointLayer.clear() : null;

    polygonGraphicLayer ? polygonGraphicLayer.clear() : null;

    // 面状航线
    polygonLineGraphicLayer ? polygonLineGraphicLayer.clear() : null;

    // 文字标注
    textLabelGraphicLayer ? textLabelGraphicLayer.clear() : null;

    airPoints.value = [];
    polygonGeoJson.value = null;
};


//////////////////////////////项目、机场、无人机////////////////////////////////////////////

//   设置机场位置
const setAirportPosition = async () => {
    if(!graphicLayer){
      return
    }
    if(props.airPort.longitude == null){
      return;
    }
    let point = graphicLayer.getGraphicById('set-airport');
    // // 创建点的经纬度信息
    let position = [props.airPort.longitude, props.airPort.latitude, 70];
    // 更新航点
    if (point) {
    // point.setOptions({
    //   id: 'set-airport',
    //   name: '机场位置',
    //   position: position,
    //   style: {
    //     image: '/projecthome/airport.png',
    //     width: 35,
    //     height: 59,
    //     scale: 1,
    //     horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    //     label: {
    //       text: '机场',
    //       font_size: 14,
    //       color: '#ffffff',
    //       outline: true,
    //       outlineColor: '#000000',
    //       pixelOffsetY: -70,
    //     },
    //   },
    // });
    } else {
    let startGraphic = new mars3d.graphic.BillboardEntity({
        id: 'set-airport',
        position: position,
        style: {
        image: '/projecthome/airport.png',
        width: 35,
        height: 59,
        scale: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
            text: '机场',
            font_size: 14,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -70,
        },
        },
    });
    graphicLayer.addGraphic(startGraphic);
    }
};

// 项目首页设置机场位置
const homeSetAirportPosition = () => {
  if(!graphicLayer){
    return
  }
  // // 创建点的经纬度信息
  let position = [props.homeAirport.longitude, props.homeAirport.latitude, 70];
  let airportImg = props.homeAirport.mode_code == 4? '/projecthome/work_airport.png': '/projecthome/standby_airport.png'
  let airportLiveImg = props.homeAirport.mode_code == 4? '/projecthome/work_airport_live.png': '/projecthome/standby_airport_live.png'
  // 更新航点
  if (homeStartGraphic && homeStartGraphicLive) {
    homeStartGraphic.position = position
    homeStartGraphic.image = airportImg
    homeStartGraphicLive.position = position
    homeStartGraphicLive.image = airportLiveImg
  } else {
    homeStartGraphic = new mars3d.graphic.BillboardEntity({
      id: 'set-home-airport',
      position: position,
      style: {
        image: airportImg,
        width: 118,
        height: 133,
        scale: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
            text: '机场',
            font_size: 14,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -70,
        },
      },
    });
    homeStartGraphicLive = new mars3d.graphic.BillboardEntity({
      id: 'set-home-airport-live',
      position: position,
      style: {
        image: airportLiveImg,
        width: 21,
        height: 21,
        scale: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(45, -107),
        label: {
            text: '机场',
            font_size: 14,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -70,
        },
      },
    });
    homeStartGraphic.on(mars3d.EventType.click, function (event) {
      emits('clickAirPort')
    });
    homeStartGraphicLive.on(mars3d.EventType.click, function (event) {
      emits('changeAirportLive', true)
      if(props.homeAirport.mode_code == 4){
        emits('changeUAVLive', true)
      }
    });
    graphicLayer.addGraphic(homeStartGraphic);
    graphicLayer.addGraphic(homeStartGraphicLive);
  }
}
//   设置无人机轨迹
const setUAVPosition = () => {
    let point = graphicLayer.getGraphicById('set-uav');
    const position = [props.uavTrack.longitude, props.uavTrack.latitude, props.uavTrack.height];
    // 更新航点
    if (point) {
    point.setOptions({
        id: 'set-uav',
        name: '飞行器位置',
        position: position,
        style: {
        url: '/projecthome/dajiang.gltf',
        scale: 0.1,
        minimumPixelSize: 100,
        },
        frameRate: 1,
    });

    } else {
    const graphicModel = new mars3d.graphic.ModelPrimitive({
        id: 'set-uav',
        name: '飞行器位置',
        position: position,
        style: {
        url: '/projecthome/dajiang.gltf',
        scale: 0.1,
        minimumPixelSize: 100,
        },
        frameRate: 1,
    });
    graphicLayer.addGraphic(graphicModel);
    }

    let route = graphicLayer.getGraphicById('uav-route');
    if (!route) {
    route = new mars3d.graphic.Route({
        id: 'uav-route',
        polyline: {
        color: '#3388ff',
        width: 2,
        },
        flyTo: true,
    });
    graphicLayer.addGraphic(route);
    }
    if (props.uavTrack.longitude) {
    const positionVal = Cesium.Cartesian3.fromDegrees(
        props.uavTrack.longitude,
        props.uavTrack.latitude,
        props.uavTrack.height,
    );
    route.addTimePosition(positionVal);
    }
};


/////////////////////////////////动作处理//////////////////////////////////////
const addAction = (action) => {
    // 当前航点添加动作
    
    console.log("action",action);
    currentAirPoint.value.actions.push(action);
    console.log("currentAirPoint",currentAirPoint.value)

}

</script>

<style scoped>
  .mars3d-container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .air-container {
    width: 400px;
    background: #0d0e15c1;
    position: absolute;
    height: calc(100vh - 80px);
    top: 40px;
    left: 40px;
    z-index: 999;
  }

  .airpolygon-container {
    width: 400px;
    background: #0d0e15c1;
    overflow-y: hidden;
    position: absolute;
    height: calc(100vh - 80px);
    top: 40px;
    left: 40px;
    z-index: 999;
  }

  .airpoint-config-container {
    width: 400px;
    background: #0d0e15c1;
    overflow-y: hidden;
    position: absolute;
    height: calc(100vh - 80px);
    top: 40px;
    right: 40px;
    z-index: 999;
  }
</style>
