<template>
  <div class="cesium-container">
    <div id="cesiumViewer" ref="cesiumViewer"></div>

    <!-- 主工具栏 -->
    <div class="main-toolbar" v-if="drawDomClick" :class="{ collapsed: isToolbarCollapsed }">
      <!-- 展开/收起按钮 -->
      <!-- <div class="collapse-btn" @click="toggleToolbar">
        <span class="collapse-icon">{{ isToolbarCollapsed ? '▶' : '◀' }}</span>
        <span class="collapse-text" v-if="!isToolbarCollapsed">收起</span>
      </div> -->

      <!-- 工具栏内容 -->
      <div class="toolbar-content"  v-show="!isToolbarCollapsed">
        <div class="toolbar-group">
          <button
            @click="toggleDrawing('point')"
            :class="{ active: drawingMode === 'point' }"
            title="点"
            class="tool-btn"
          >
            <span class="icon">📍</span>
            <span class="text">{{ drawingMode === 'point' ? '停止' : '点' }}</span>
          </button>

          <button
            @click="toggleDrawing('line')"
            :class="{ active: drawingMode === 'line' }"
            title="线"
            class="tool-btn"
          >
            <span class="icon">📏</span>
            <span class="text">{{ drawingMode === 'line' ? '停止' : '线' }}</span>
          </button>

          <button
            @click="toggleDrawing('polygon')"
            :class="{ active: drawingMode === 'polygon' }"
            title="面"
            class="tool-btn"
          >
            <span class="icon">🔶</span>
            <span class="text">{{ drawingMode === 'polygon' ? '停止' : '面' }}</span>
          </button>
        </div>

        <div class="toolbar-group">
          <button
            @click="toggleDrawing('rectangle')"
            :class="{ active: drawingMode === 'rectangle' }"
            title="矩形"
            class="tool-btn"
          >
            <span class="icon">⬜</span>
            <span class="text">{{ drawingMode === 'rectangle' ? '停止' : '矩形' }}</span>
          </button>

          <button
            @click="toggleDrawing('circle')"
            :class="{ active: drawingMode === 'circle' }"
            title="圆形"
            class="tool-btn"
          >
            <span class="icon">⭕</span>
            <span class="text">{{ drawingMode === 'circle' ? '停止' : '圆形' }}</span>
          </button>
        </div>

        <div class="toolbar-group">
          <button
            @click="clearAll"
            :disabled="!allEntities.length"
            title="清除所有"
            class="tool-btn danger"
          >
            <span class="icon">🗑️</span>
            <span class="text">清除</span>
          </button>

          <button
            @click="exportData"
            :disabled="!allEntities.length"
            title="导出数据"
            class="tool-btn success"
          >
            <span class="icon">💾</span>
            <span class="text">导出</span>
          </button>
        </div>
      </div>

      <!-- 收起时的最小化工具栏 -->
      <div class="toolbar-minimized" v-show="isToolbarCollapsed">
        <button
          @click="toggleDrawing('point')"
          :class="{ active: drawingMode === 'point' }"
          title="点"
          class="min-tool-btn"
        >
          <span class="icon">📍</span>
        </button>
        <button
          @click="toggleDrawing('line')"
          :class="{ active: drawingMode === 'line' }"
          title="线"
          class="min-tool-btn"
        >
          <span class="icon">📏</span>
        </button>
        <button
          @click="toggleDrawing('polygon')"
          :class="{ active: drawingMode === 'polygon' }"
          title="面"
          class="min-tool-btn"
        >
          <span class="icon">🔶</span>
        </button>
        <button
          @click="toggleDrawing('rectangle')"
          :class="{ active: drawingMode === 'rectangle' }"
          title="矩形"
          class="min-tool-btn"
        >
          <span class="icon">⬜</span>
        </button>
        <button
          @click="toggleDrawing('circle')"
          :class="{ active: drawingMode === 'circle' }"
          title="圆形"
          class="min-tool-btn"
        >
          <span class="icon">⭕</span>
        </button>
        <div class="min-tool-separator"></div>
        <button
          @click="clearAll"
          :disabled="!allEntities.length"
          title="清除所有"
          class="min-tool-btn danger"
        >
          <span class="icon">🗑️</span>
        </button>
        <button
          @click="exportData"
          :disabled="!allEntities.length"
          title="导出数据"
          class="min-tool-btn success"
        >
          <span class="icon">💾</span>
        </button>
      </div>
    </div>

    <!-- 测量结果显示 -->
    <div class="measurement-panel" v-if="measurementResult">
      <div class="measurement-content">
        <h5>测量结果</h5>
        <div class="measurement-item" v-if="measurementResult.distance">
          <span>长度：</span>
          <strong>{{ measurementResult.distance.toFixed(2) }} 米</strong>
        </div>
        <div class="measurement-item" v-if="measurementResult.area">
          <span>面积：</span>
          <strong>{{ measurementResult.area.toFixed(2) }} 平方米</strong>
        </div>
        <div class="measurement-item" v-if="measurementResult.radius">
          <span>半径：</span>
          <strong>{{ measurementResult.radius.toFixed(2) }} 米</strong>
        </div>
        <button @click="measurementResult = null" class="close-btn">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
// import * as Cesium from 'cesium'
// import 'cesium/Build/Cesium/Widgets/widgets.css'
export default {
  name: 'CesiumMap',
  props: {
    drawDomClick: {
      type: Boolean,
      default: false,
      // 增加 props 类型校验，方便调试
      validator(val) {
        const isBoolean = typeof val === 'boolean'
        if (!isBoolean) {
          console.error('drawDomClick 必须是布尔值，当前值：', val, '类型：', typeof val)
        }
        return isBoolean
      }
    },
  },
  watch: {
    drawDomClick: {
      immediate: true, // 组件初始化时立即执行一次
      handler(newVal, oldVal) {
        // 可选：如果需要在值变化时执行额外逻辑（比如初始化地图）
        if (newVal) {
          // this.initMap()
        }
      }
    }
  },
  data() {
    return {
      viewer: null,
      scaleBar: null,
      isToolbarCollapsed: false,

      // 绘制相关
      drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle'
      drawingHandler: null,
      tempEntity: null,      // 最终实体
      tempPreviewEntity: null, // 预览实体（新增）
      drawingPoints: [],
      drawingStartPoint: null,
      isDrawing: false,

      // 实体管理
      allEntities: [], // 所有绘制的实体
      entityCounter: 0,
      selectedEntity: null, // 当前选中的实体

      // 测量结果
      measurementResult: null,

      // 默认样式
      defaultStyles: {
        point: { color: '#FF0000', size: 12 },
        line: { color: '#00FF00', width: 3 },
        polygon: { color: '#0000FF', opacity: 0.5, width: 2 },
        rectangle: { color: '#FFA500', opacity: 0.3, width: 2 },
        circle: { color: '#800080', opacity: 0.4, width: 2 }
      }
    }
  },

  mounted() {
    console.log(this.drawDomClick,999999)
    // this.initMap()
    this.checkCesiumLoaded()
  },

  beforeDestroy() {
    this.destroyViewer()
  },

  methods: {
    // 切换工具栏展开/收起
    toggleToolbar() {
      this.isToolbarCollapsed = !this.isToolbarCollapsed
    },
    checkCesiumLoaded() {
      if (typeof Cesium === 'undefined') {
        console.error('Cesium未加载，请检查CDN链接');
        // 可以设置重试机制
        setTimeout(() => {
          if (typeof Cesium !== 'undefined') {
            this.initMap();
          } else {
            console.error('Cesium加载失败');
          }
        }, 1000);
      } else {
        this.initMap();
      }
    },
    initMap() {
      try {
        // 确保 Cesium 已加载
    // Cesium.buildModuleUrl.setBaseUrl(window.CESIUM_BASE_URL)
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjN2MzMmE5OS01NGU3LTQzOGQtYjdjZi1mNGIwZTFjZjQ0NmEiLCJpZCI6MTQ0MDc2LCJpYXQiOjE2ODU3NjY1OTN9.iCmFY-5WNdvyAT-EO2j-unrFm4ZN9J6aSuB2wElQZ-I'

        this.viewer = new Cesium.Viewer('cesiumViewer', {
          animation: false,
          fullscreenButton: false,
          baseLayerPicker: false,
          navigationInstructionsInitiallyVisible: false,
          geocoder: false,
          homeButton: false,
          infoBox: false,
          sceneModePicker: false,
          selectionIndicator: false,
          timeline: false,
          navigationHelpButton: false,
          sceneMode: Cesium.SceneMode.SCENE2D,
          mapProjection: new Cesium.WebMercatorProjection(),
          imageryProvider: false,
          terrainProvider: new Cesium.EllipsoidTerrainProvider(),
          baseLayer: false
        })

        this.viewer.cesiumWidget.creditContainer.style.display = "none"
        this.loadOfflineMap()
        this.setup2DConstraints()

        this.viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(116.3974, 39.9093, 5000000),
          orientation: {
            heading: 0,
            pitch: -Cesium.Math.PI_OVER_TWO,
            roll: 0
          }
        })

        this.initScaleBar()
        console.log('Cesium离线二维地图已加载')

      } catch (error) {
        console.error('地图错误:', error)
        // 如果Cesium加载失败，显示错误信息
        this.showErrorMessage();
      }
    },
    showErrorMessage() {
      const container = document.getElementById('cesiumViewer');
      if (container) {
        container.innerHTML = `
          <div style="
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            color: #666;
            font-family: Arial, sans-serif;
          ">
            <h3 style="margin-bottom: 20px;">地图加载失败</h3>
            <p>可能的原因：</p>
            <ul style="text-align: left; margin: 10px 0;">
              <li>网络连接问题</li>
              <li>Cesium CDN资源未加载</li>
              <li>浏览器兼容性问题</li>
            </ul>
            <button onclick="location.reload()" style="
              margin-top: 20px;
              padding: 10px 20px;
              background: #4dabf7;
              color: white;
              border: none;
              border-radius: 4px;
              cursor: pointer;
            ">
              重新加载
            </button>
          </div>
        `;
      }
    },

    setup2DConstraints() {
      const scene = this.viewer.scene
      const controller = scene.screenSpaceCameraController

      controller.enableTilt = false
      controller.enableRotate = false
      controller.enableLook = false
      scene.screenSpaceCameraController.maximumPitch = 0
      scene.screenSpaceCameraController.minimumPitch = 0
    },

    loadOfflineMap() {
      this.viewer.imageryLayers.removeAll()

      try {
        const offlineProvider = new Cesium.UrlTemplateImageryProvider({
          url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
          minimumLevel: 0,
          maximumLevel: 18,
          tileWidth: 256,
          tileHeight: 256,
          tilingScheme: new Cesium.WebMercatorTilingScheme(),
          credit: '离线地图'
        })

        this.viewer.imageryLayers.addImageryProvider(offlineProvider)

      } catch (error) {
        console.error('加载离线地图失败:', error)
        this.showGridLayer()
      }
    },

    showGridLayer() {
      const gridProvider = new Cesium.GridImageryProvider()
      this.viewer.imageryLayers.addImageryProvider(gridProvider)
      this.addCoordinateLabels()
    },

    addCoordinateLabels() {
      for (let lon = -180; lon <= 180; lon += 30) {
        for (let lat = -90; lat <= 90; lat += 30) {
          this.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(lon, lat),
            label: {
              text: `${lat}°N\n${lon}°E`,
              font: '12px sans-serif',
              fillColor: Cesium.Color.BLACK,
              outlineColor: Cesium.Color.WHITE,
              outlineWidth: 2,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              pixelOffset: new Cesium.Cartesian2(10, 0)
            }
          })
        }
      }
    },

    // ================== 绘制功能 ==================

    toggleDrawing(mode) {
      if (this.drawingMode === mode) {
        // 停止当前绘制
        this.stopDrawing()
        this.drawingMode = null
      } else {
        // 停止之前的绘制
        if (this.drawingMode) {
          this.stopDrawing()
        }

        // 开始新的绘制
        this.drawingMode = mode
        this.startDrawing(mode)
      }
    },

    startDrawing(mode) {
      this.stopDrawing()
      this.drawingPoints = []
      this.drawingStartPoint = null
      this.isDrawing = true

      this.drawingHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)

      // 根据模式设置不同的鼠标样式和事件
      switch(mode) {
        case 'point':
          this.startPointDrawing()
          break
        case 'line':
          this.startLineDrawing()
          break
        case 'polygon':
          this.startPolygonDrawing()
          break
        case 'rectangle':
          this.startRectangleDrawing()
          break
        case 'circle':
          this.startCircleDrawing()
          break
      }

      this.viewer.scene.canvas.style.cursor = 'crosshair'
      console.log(`开始绘制 ${this.getTypeName(mode)}`)
    },

    stopDrawing() {
      if (this.drawingHandler) {
        this.drawingHandler.destroy();
        this.drawingHandler = null;
      }

      if (this.tempEntity) {
        this.viewer.entities.remove(this.tempEntity);
        this.tempEntity = null;
      }
      
      // 确保也清理预览实体
      if (this.tempPreviewEntity) {
        this.viewer.entities.remove(this.tempPreviewEntity);
        this.tempPreviewEntity = null;
      }

      this.drawingPoints = [];
      this.drawingStartPoint = null;
      this.isDrawing = false;

      this.viewer.scene.canvas.style.cursor = 'default';
    },
    // ********************************************************************
    // 绘制点
    startPointDrawing() {
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position)
        if (position) {
          const { lat, lng } = this.cartesianToLatLng(position)
          this.addPointEntity(lat, lng)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },

    // 绘制线
    startLineDrawing() {
      this.drawingPoints = [];
      
      // 鼠标点击事件 - 添加点
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position);
        if (position) {
          this.drawingPoints.push(position);
          
          // 如果这是第一个点，创建一个与自身连接的线段（看起来像一个点）
          if (this.drawingPoints.length === 1) {
            const previewPositions = [position, position];
            
            if (this.tempPreviewEntity) {
              this.viewer.entities.remove(this.tempPreviewEntity);
            }
            
            this.tempPreviewEntity = this.viewer.entities.add({
              polyline: {
                positions: previewPositions,
                width: this.defaultStyles.line.width,
                material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color).withAlpha(0.5),
                clampToGround: true
              }
            });
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 鼠标移动事件 - 实时更新预览线段
      this.drawingHandler.setInputAction((movement) => {
        if (this.drawingPoints.length > 0) {
          const mousePosition = this.getClickPosition(movement.endPosition);
          if (mousePosition) {
            // 创建包含当前鼠标位置的预览线段
            const previewPositions = [...this.drawingPoints, mousePosition];
            
            // 如果已有预览线段，先移除
            if (this.tempPreviewEntity) {
              this.viewer.entities.remove(this.tempPreviewEntity);
            }
            
            // 创建预览线段（半透明效果），显示实时轨迹
            this.tempPreviewEntity = this.viewer.entities.add({
              polyline: {
                positions: previewPositions,
                width: this.defaultStyles.line.width,
                material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color).withAlpha(0.5), // 半透明效果
                clampToGround: true
              }
            });
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 右键完成绘制
      this.drawingHandler.setInputAction(() => {
        if (this.drawingPoints.length > 1) {
          this.finishLineDrawing();
        } else {
          this.cancelDrawing();
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    finishLineDrawing() {
      // 将预览线段转换为最终线段
      if (this.drawingPoints.length > 1) {
        // 移除预览线段
        if (this.tempPreviewEntity) {
          this.viewer.entities.remove(this.tempPreviewEntity);
          this.tempPreviewEntity = null;
        }
        
        // 创建最终的实线实体
        const entity = this.addLineEntity([...this.drawingPoints]);

        // 计算长度
        const length = this.calculateLineLength([...this.drawingPoints]);
        this.measurementResult = {
          distance: length,
          type: 'line'
        };

        this.stopDrawing();
        return entity;
      } else {
        this.cancelDrawing();
        return null;
      }
    },

    // 绘制多边形
    startPolygonDrawing() {
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position)
        if (position) {
          this.drawingPoints.push(position)

          // 更新临时多边形
          if (this.tempEntity) {
            this.viewer.entities.remove(this.tempEntity)
          }

          if (this.drawingPoints.length > 2) {
            // 闭合多边形
            const polygonPoints = [...this.drawingPoints, this.drawingPoints[0]]
            this.tempEntity = this.viewer.entities.add({
              polygon: {
                hierarchy: new Cesium.PolygonHierarchy(polygonPoints),
                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
                  .withAlpha(this.defaultStyles.polygon.opacity),
                outline: true,
                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
                outlineWidth: this.defaultStyles.polygon.width
              }
            })
          } else if (this.drawingPoints.length === 2) {
            // 只有两个点时显示线
            this.tempEntity = this.viewer.entities.add({
              polyline: {
                positions: this.drawingPoints,
                width: this.defaultStyles.polygon.width,
                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
                clampToGround: true
              }
            })
          } else if (this.drawingPoints.length === 1) {
            // 只有一个点时显示点
            this.tempEntity = this.viewer.entities.add({
              position: this.drawingPoints[0],
              point: {
                pixelSize: 8,
                color: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
              }
            })
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

      // 双击完成绘制
      this.drawingHandler.setInputAction((click) => {
        if (this.drawingPoints.length > 2) {
          this.finishPolygonDrawing()
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

      // 右键取消
      this.drawingHandler.setInputAction(() => {
        this.cancelDrawing()
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    },

    finishPolygonDrawing() {
      const positions = [...this.drawingPoints]
      const entity = this.addPolygonEntity(positions)

      // 计算面积
      const area = this.calculatePolygonArea(positions)
      this.measurementResult = {
        area: area,
        type: 'polygon'
      }

      this.stopDrawing()
      return entity
    },

    // 绘制矩形
    startRectangleDrawing() {
      let startPosition = null

      this.drawingHandler.setInputAction((click) => {
        startPosition = this.getClickPosition(click.position)
        if (startPosition) {
          this.drawingStartPoint = startPosition
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN)

      this.drawingHandler.setInputAction((movement) => {
        if (startPosition) {
          const endPosition = this.getClickPosition(movement.endPosition)
          if (endPosition) {
            // 更新临时矩形
            if (this.tempEntity) {
              this.viewer.entities.remove(this.tempEntity)
            }

            const rectangle = this.calculateRectangle(startPosition, endPosition)
            this.tempEntity = this.viewer.entities.add({
              rectangle: {
                coordinates: rectangle,
                material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
                  .withAlpha(this.defaultStyles.rectangle.opacity),
                outline: true,
                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
                outlineWidth: this.defaultStyles.rectangle.width
              }
            })
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

      this.drawingHandler.setInputAction(() => {
        if (startPosition && this.tempEntity) {
          this.finishRectangleDrawing(startPosition)
          startPosition = null
        }
      }, Cesium.ScreenSpaceEventType.LEFT_UP)

      // 右键取消
      this.drawingHandler.setInputAction(() => {
        this.cancelDrawing()
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    },

    finishRectangleDrawing(startPosition) {
      if (!this.tempEntity) return

      const rectangleCoords = this.tempEntity.rectangle.coordinates.getValue()
      const entity = this.addRectangleEntity(rectangleCoords)

      // 计算面积
      const area = this.calculateRectangleArea(rectangleCoords)
      this.measurementResult = {
        area: area,
        type: 'rectangle'
      }

      this.stopDrawing()
      return entity
    },

    // 绘制圆形
    startCircleDrawing() {
      let centerPosition = null
      let radius = 0

      this.drawingHandler.setInputAction((click) => {
        centerPosition = this.getClickPosition(click.position)
        if (centerPosition) {
          this.drawingStartPoint = centerPosition

          // 创建中心点
          if (this.tempEntity) {
            this.viewer.entities.remove(this.tempEntity)
          }

          this.tempEntity = this.viewer.entities.add({
            position: centerPosition,
            point: {
              pixelSize: 8,
              color: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
            }
          })
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN)

      this.drawingHandler.setInputAction((movement) => {
        if (centerPosition) {
          const currentPosition = this.getClickPosition(movement.endPosition)
          if (currentPosition) {
            radius = Cesium.Cartesian3.distance(centerPosition, currentPosition)

            // 更新临时圆形
            if (this.tempEntity) {
              this.viewer.entities.remove(this.tempEntity)
            }

            // 创建圆形多边形
            const positions = this.calculateCircle(centerPosition, radius, 64)
            this.tempEntity = this.viewer.entities.add({
              polygon: {
                hierarchy: new Cesium.PolygonHierarchy(positions),
                material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
                  .withAlpha(this.defaultStyles.circle.opacity),
                outline: true,
                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
                outlineWidth: this.defaultStyles.circle.width
              }
            })
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

      this.drawingHandler.setInputAction(() => {
        if (centerPosition && radius > 0) {
          this.finishCircleDrawing(centerPosition, radius)
          centerPosition = null
          radius = 0
        }
      }, Cesium.ScreenSpaceEventType.LEFT_UP)

      // 右键取消
      // this.drawingHandler.setInputAction(() => {
      //   this.cancelDrawing()
      // }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    },

    finishCircleDrawing(center, radius) {
      const positions = this.calculateCircle(center, radius, 64)
      const entity = this.addCircleEntity(center, radius, positions)

      // 计算面积
      const area = Math.PI * radius * radius
      this.measurementResult = {
        area: area,
        radius: radius,
        type: 'circle'
      }

      this.stopDrawing()
      return entity
    },

    cancelDrawing() {
      this.stopDrawing()
      this.drawingMode = null
    },

    // ================== 实体创建方法 ==================

    addPointEntity(lat, lng) {
      this.entityCounter++
      const id = `point_${this.entityCounter}`

      const entity = this.viewer.entities.add({
        id: id,
        name: `点 ${this.entityCounter}`,
        position: Cesium.Cartesian3.fromDegrees(lng, lat),
        point: {
          pixelSize: this.defaultStyles.point.size,
          color: Cesium.Color.fromCssColorString(this.defaultStyles.point.color),
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2
        },
        label: {
          text: `${this.entityCounter}`,
          font: '14px Arial',
          fillColor: Cesium.Color.WHITE,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER
        }
      })

      const entityData = {
        id,
        type: 'point',
        lat,
        lng,
        entity: entity,
        color: this.defaultStyles.point.color,
        size: this.defaultStyles.point.size,
        label: `点 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      // 添加点击事件
      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    addLineEntity(positions) {
      this.entityCounter++
      const id = `line_${this.entityCounter}`

      const entity = this.viewer.entities.add({
        id: id,
        name: `线 ${this.entityCounter}`,
        polyline: {
          positions: positions,
          width: this.defaultStyles.line.width,
          material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
          clampToGround: true
        }
      })

      const entityData = {
        id,
        type: 'line',
        points: positions.map(p => this.cartesianToLatLng(p)),
        positions: positions,
        entity: entity,
        color: this.defaultStyles.line.color,
        width: this.defaultStyles.line.width,
        label: `线 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    addPolygonEntity(positions) {
      this.entityCounter++
      const id = `polygon_${this.entityCounter}`

      // 闭合多边形
      const polygonPositions = [...positions, positions[0]]

      const entity = this.viewer.entities.add({
        id: id,
        name: `面 ${this.entityCounter}`,
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(polygonPositions),
          material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
            .withAlpha(this.defaultStyles.polygon.opacity),
          outline: true,
          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
          outlineWidth: this.defaultStyles.polygon.width
        }
      })

      const entityData = {
        id,
        type: 'polygon',
        points: positions.map(p => this.cartesianToLatLng(p)),
        positions: polygonPositions,
        entity: entity,
        color: this.defaultStyles.polygon.color,
        opacity: this.defaultStyles.polygon.opacity,
        width: this.defaultStyles.polygon.width,
        label: `面 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    addRectangleEntity(coordinates) {
      this.entityCounter++
      const id = `rectangle_${this.entityCounter}`

      const entity = this.viewer.entities.add({
        id: id,
        name: `矩形 ${this.entityCounter}`,
        rectangle: {
          coordinates: coordinates,
          material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
            .withAlpha(this.defaultStyles.rectangle.opacity),
          outline: true,
          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
          outlineWidth: this.defaultStyles.rectangle.width
        }
      })

      const entityData = {
        id,
        type: 'rectangle',
        coordinates: coordinates,
        entity: entity,
        color: this.defaultStyles.rectangle.color,
        opacity: this.defaultStyles.rectangle.opacity,
        width: this.defaultStyles.rectangle.width,
        label: `矩形 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    addCircleEntity(center, radius, positions) {
      this.entityCounter++
      const id = `circle_${this.entityCounter}`

      const entity = this.viewer.entities.add({
        id: id,
        name: `圆形 ${this.entityCounter}`,
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(positions),
          material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
            .withAlpha(this.defaultStyles.circle.opacity),
          outline: true,
          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
          outlineWidth: this.defaultStyles.circle.width
        },
        position: center,
        point: {
          pixelSize: 5,
          color: Cesium.Color.RED
        }
      })

      const centerLL = this.cartesianToLatLng(center)
      const entityData = {
        id,
        type: 'circle',
        center: centerLL,
        radius: radius,
        positions: positions,
        entity: entity,
        color: this.defaultStyles.circle.color,
        opacity: this.defaultStyles.circle.opacity,
        width: this.defaultStyles.circle.width,
        label: `圆形 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    // ================== 工具方法 ==================

    getClickPosition(pixelPosition) {
      const cartesian = this.viewer.camera.pickEllipsoid(pixelPosition, this.viewer.scene.globe.ellipsoid)
      return cartesian
    },

    cartesianToLatLng(cartesian) {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
      return {
        lat: Cesium.Math.toDegrees(cartographic.latitude),
        lng: Cesium.Math.toDegrees(cartographic.longitude)
      }
    },

    calculateRectangle(start, end) {
      const startLL = this.cartesianToLatLng(start)
      const endLL = this.cartesianToLatLng(end)

      return Cesium.Rectangle.fromDegrees(
        Math.min(startLL.lng, endLL.lng),
        Math.min(startLL.lat, endLL.lat),
        Math.max(startLL.lng, endLL.lng),
        Math.max(startLL.lat, endLL.lat)
      )
    },

    calculateCircle(center, radius, segments) {
      const positions = []
      const centerLL = Cesium.Cartographic.fromCartesian(center)

      for (let i = 0; i < segments; i++) {
        const angle = (i / segments) * Math.PI * 2
        const lat = centerLL.latitude + (radius / 6378137) * Math.sin(angle)
        const lon = centerLL.longitude + (radius / 6378137) * Math.cos(angle) / Math.cos(centerLL.latitude)

        positions.push(Cesium.Cartesian3.fromRadians(lon, lat))
      }

      return positions
    },

    calculateLineLength(positions) {
      let totalLength = 0
      for (let i = 0; i < positions.length - 1; i++) {
        totalLength += Cesium.Cartesian3.distance(positions[i], positions[i + 1])
      }
      return totalLength
    },

    calculatePolygonArea(positions) {
      if (positions.length < 3) return 0

      let area = 0
      const n = positions.length

      for (let i = 0; i < n; i++) {
        const j = (i + 1) % n
        const p1 = Cesium.Cartographic.fromCartesian(positions[i])
        const p2 = Cesium.Cartographic.fromCartesian(positions[j])

        area += p1.longitude * p2.latitude - p2.longitude * p1.latitude
      }

      area = Math.abs(area) * 6378137 * 6378137 / 2
      return area
    },

    calculateRectangleArea(coordinates) {
      const rect = coordinates.getValue ? coordinates.getValue() : coordinates
      const width = Cesium.Cartesian3.distance(
        Cesium.Cartesian3.fromRadians(rect.west, rect.north),
        Cesium.Cartesian3.fromRadians(rect.east, rect.north)
      )
      const height = Cesium.Cartesian3.distance(
        Cesium.Cartesian3.fromRadians(rect.west, rect.north),
        Cesium.Cartesian3.fromRadians(rect.west, rect.south)
      )

      return width * height
    },

    // ================== 实体管理 ==================

    selectEntity(entity) {
      this.selectedEntity = entity

      // 居中显示
      if (entity.type === 'point') {
        this.viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(entity.lng, entity.lat, 1000),
          duration: 1.0
        })
      } else if (entity.positions && entity.positions.length > 0) {
        const rectangle = Cesium.Rectangle.fromCartographicArray(
          entity.positions.map(p => Cesium.Cartographic.fromCartesian(p))
        )
        this.viewer.camera.flyTo({
          destination: rectangle,
          duration: 1.0
        })
      }
    },

    updateEntityStyle() {
      if (!this.selectedEntity || !this.selectedEntity.entity) return

      const entity = this.selectedEntity.entity
      const data = this.selectedEntity

      switch(data.type) {
        case 'point':
          entity.point.color = Cesium.Color.fromCssColorString(data.color)
          entity.point.pixelSize = data.size
          break
        case 'line':
          entity.polyline.material = Cesium.Color.fromCssColorString(data.color)
          entity.polyline.width = data.width
          break
        case 'polygon':
          entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
          entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color)
          entity.polygon.outlineWidth = data.width
          break
        case 'rectangle':
          entity.rectangle.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
          entity.rectangle.outlineColor = Cesium.Color.fromCssColorString(data.color)
          entity.rectangle.outlineWidth = data.width
          break
        case 'circle':
          entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
          entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color)
          entity.polygon.outlineWidth = data.width
          break
      }
    },

    updateEntityLabel() {
      if (!this.selectedEntity || !this.selectedEntity.entity) return

      const entity = this.selectedEntity.entity
      entity.name = this.selectedEntity.label

      // 如果是点，更新标签
      if (this.selectedEntity.type === 'point') {
        entity.label.text = this.selectedEntity.label
      }
    },

    deleteSelectedEntity() {
      if (this.selectedEntity) {
        this.removeEntity(this.selectedEntity.id)
        this.selectedEntity = null
      }
    },

    removeEntity(id) {
      const index = this.allEntities.findIndex(e => e.id === id)
      if (index > -1) {
        const entity = this.allEntities[index]

        // 从地图中移除
        if (entity.entity) {
          this.viewer.entities.remove(entity.entity)
        }

        // 从数组中移除
        this.allEntities.splice(index, 1)

        // 如果删除的是选中的实体，清空选中状态
        if (this.selectedEntity && this.selectedEntity.id === id) {
          this.selectedEntity = null
        }
      }
    },

    clearAll() {
      // 停止绘制
      this.stopDrawing()
      this.drawingMode = null

      // 移除所有实体
      this.allEntities.forEach(entity => {
        if (entity.entity) {
          this.viewer.entities.remove(entity.entity)
        }
      })

      // 清空数组
      this.allEntities = []
      this.entityCounter = 0
      this.selectedEntity = null
      this.measurementResult = null

      console.log('已清除所有图形')
    },

    // ================== 其他方法 ==================

    getTypeName(type) {
      const names = {
        point: '点',
        line: '线',
        polygon: '面',
        rectangle: '矩形',
        circle: '圆形'
      }
      return names[type] || type
    },

    exportData() {
      const data = {
        version: '1.0',
        date: new Date().toISOString(),
        entities: this.allEntities.map(entity => ({
          id: entity.id,
          type: entity.type,
          label: entity.label,
          color: entity.color,
          data: entity.type === 'point' ? {
            lat: entity.lat,
            lng: entity.lng
          } : entity.type === 'line' || entity.type === 'polygon' ? {
            points: entity.points
          } : entity.type === 'rectangle' ? {
            coordinates: entity.coordinates
          } : {
            center: entity.center,
            radius: entity.radius
          }
        }))
      }

      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `cesium-drawing-${new Date().toISOString().slice(0, 10)}.json`
      a.click()
      URL.revokeObjectURL(url)

      console.log('数据已导出', data)
    },

    initScaleBar() {
      // ... 原有的比例尺代码保持不变
    },

    updateScaleBar() {
      // ... 原有的比例尺更新代码保持不变
    },

    destroyViewer() {
      this.stopDrawing()
      this.clearAll()

      if (this.viewer) {
        this.viewer.destroy()
        this.viewer = null
      }
    }
  }
}
</script>

<style scoped>
.cesium-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

#cesiumViewer {
  width: 100%;
  height: 100%;
}

/* 主工具栏 - 修改后 */
.main-toolbar {
  position: absolute;
  top: 365px; /* 增大这个数值即可整体下移，比如从100px改成150px */
  left: 62px;
  z-index: 1000;
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.main-toolbar.collapsed {
  background: rgba(255, 255, 255, 0.9);
}

/* 工具栏内容 - 无需修改 */
.toolbar-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  min-width: 180px;
}

/* 收起按钮 */
.collapse-btn {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  background: #f8f9fa;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-right: 1px solid #e9ecef;
  transition: all 0.3s ease;
  user-select: none;
}

.collapse-btn:hover {
  background: #e9ecef;
}

.collapse-icon {
  font-size: 14px;
  font-weight: bold;
  color: #495057;
  margin-right: 5px;
}

.collapse-text {
  font-size: 12px;
  color: #6c757d;
  white-space: nowrap;
}

/* 工具栏组 */
.toolbar-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9ecef;
}

.toolbar-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* 收起时的最小化工具栏 */
.toolbar-minimized {
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  gap: 8px;
}

.min-tool-btn {
  width: 36px;
  height: 36px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #495057;
  transition: all 0.3s ease;
}

.min-tool-btn:hover {
  background: #f8f9fa;
  border-color: #4dabf7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.min-tool-btn.active {
  background: #4dabf7;
  color: white;
  border-color: #4dabf7;
}

.min-tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.min-tool-btn.danger {
  color: #dc3545;
}

.min-tool-btn.danger:hover {
  background: #f8d7da;
  border-color: #dc3545;
}

.min-tool-btn.success {
  color: #28a745;
}

.min-tool-btn.success:hover {
  background: #d4edda;
  border-color: #28a745;
}

.min-tool-separator {
  height: 1px;
  background: #e9ecef;
  margin: 5px 0;
}

/* 原来的工具按钮样式保持不变，但添加展开/收起状态的调整 */
.tool-btn {
  padding: 10px 15px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  transition: all 0.3s ease;
  min-width: 120px;
}

.tool-btn:hover {
  background: #f8f9fa;
  border-color: #4dabf7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tool-btn.active {
  background: #4dabf7;
  color: white;
  border-color: #4dabf7;
}

.tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.tool-btn.danger {
  color: #dc3545;
}

.tool-btn.danger:hover {
  background: #f8d7da;
  border-color: #dc3545;
}

.tool-btn.success {
  color: #28a745;
}

.tool-btn.success:hover {
  background: #d4edda;
  border-color: #28a745;
}

.tool-btn .icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.tool-btn .text {
  white-space: nowrap;
}

/* 其他样式保持不变... */

/* 属性面板 */
.property-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 250px;
  max-width: 300px;
}

/* 测量结果面板 */
.measurement-panel {
  position: absolute;
  bottom: 80px;
  left: 20px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 200px;
}

/* 自定义比例尺样式 */
:deep(.scale-bar-container) {
  user-select: none;
  pointer-events: none;
}

/* 隐藏Cesium的默认控件 */
:deep(.cesium-viewer-bottom) {
  display: none !important;
}

:deep(.cesium-credit-logoContainer) {
  display: none !important;
}

:deep(.cesium-credit-textContainer) {
  display: none !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .main-toolbar {
    right: 10px;
    top: 80px;
  }

  .toolbar-content {
    min-width: 150px;
  }

  .tool-btn {
    min-width: 100px;
    padding: 8px 12px;
  }
}
</style>
