<template>
  <div class="app-container home">
    <!-- Cesium地图容器 -->
    <div id="cesiumContainer" class="cesium-container"></div>

    <!-- 人员实时追踪控制面板 -->
    <div class="tracking-panel">
      <select v-model="selectedPerson" @change="onPersonSelect">
        <option value="">选择人员</option>
        <option
          v-for="person in personnelList"
          :key="person.perName"
          :value="person.perName"
        >
          {{ person.perName }}
        </option>
      </select>
    </div>

    <!-- 电子围栏管理面板 -->
    <div class="fence-panel">
      <div class="panel-header">
        <h3>电子围栏管理</h3>
        <div class="fence-type-switch">
          <label>
            <input
              type="radio"
              v-model="currentFenceType"
              value="person"
              checked
            />
            人员围栏
          </label>
          <label>
            <input type="radio" v-model="currentFenceType" value="vehicle" />
            车辆围栏
          </label>
        </div>
      </div>

      <div class="fence-controls">
        <button
          @click="startCreatingFence"
          :disabled="isCreatingFence || isEditingFence"
        >
          创建围栏
        </button>
        <button
          @click="editSelectedFence"
          :disabled="!selectedFence || isCreatingFence || isEditingFence"
          :class="{ editing: isEditingFence }"
        >
          {{ isEditingFence ? "编辑中" : "编辑围栏" }}
        </button>
        <button
          @click="deleteSelectedFence"
          :disabled="!selectedFence || isCreatingFence || isEditingFence"
        >
          删除围栏
        </button>
        <button
          @click="
            isCreatingFence
              ? stopCreatingFence
              : isEditingFence
              ? completeEditingFence
              : null
          "
          :disabled="!isCreatingFence && !isEditingFence"
        >
          {{ isCreatingFence ? "取消创建" : "完成编辑" }}
        </button>
      </div>

      <div class="fence-list">
        <h4>围栏列表</h4>
        <ul>
          <li
            v-for="fence in getCurrentFences"
            :key="fence.id"
            :class="{ active: selectedFence && selectedFence.id === fence.id }"
            @click="selectFence(fence)"
          >
            {{ fence.name }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 告警信息面板 -->
    <div class="alarm-panel" v-if="alarms.length > 0">
      <h3>越界告警</h3>
      <div class="alarm-list">
        <div v-for="alarm in alarms" :key="alarm.id" class="alarm-item">
          <span class="alarm-time">{{ alarm.time }}</span>
          <span class="alarm-content">{{ alarm.content }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.9",
      // Cesium查看器实例
      viewer: null,
      tileset: null,
      personnelList: [],
      vehicleList: [], // 添加车辆列表
      personModelInterval: null,
      trackingInterval: null,
      bgEntities: {}, // 所有的key都对应一个实体对象

      // 轨迹追踪相关数据
      selectedPerson: "", // 选中的人员
      timePoints: [], // 时间点数组
      currentTimeIndex: 0, // 当前时间索引
      personTrajectories: {}, // 人员轨迹数据 { 人员名称: [{time, lng, lat, height}] }
      trailEntities: {}, // 轨迹实体
      isTracking: false, // 是否正在实时追踪
      currentTimeDisplay: "", // 当前显示时间
      // 添加轨迹相关配置
      trajectoryConfig: {
        pointCount: 5, // 每个人员的轨迹点数量
        maxRange: 0.001, // 约100米范围（1度约等于111公里，0.001度约等于111米）
        heightOffset: 50, // 轨迹点高度偏移
      },

      // 电子围栏相关数据
      personFences: [], // 人员电子围栏
      vehicleFences: [], // 车辆电子围栏
      isCreatingFence: false, // 是否正在创建围栏
      currentFencePoints: [], // 当前围栏的点
      selectedFence: null, // 当前选中的围栏
      currentFenceType: "person", // 当前围栏类型
      drawingEntity: null, // 绘制中的实体
      fenceEntities: {}, // 围栏实体映射

      // 电子围栏编辑相关
      isEditingFence: false, // 是否正在编辑围栏
      editingFence: null, // 当前编辑的围栏
      vertexEntities: [], // 顶点实体集合
      isDraggingVertex: false, // 是否正在拖拽顶点
      draggedVertexIndex: -1, // 当前拖拽的顶点索引
      temporaryPointEntities: null, // 临时点实体
      originalRightClickHandler: null, // 原始右键点击处理器

      // 告警相关
      alarms: [], // 告警列表
    };
  },
  mounted() {
    // 组件挂载后初始化地图
    this.initCesium();
    this.personCardList(() => {
      console.log("人员数据", this.personnelList);
    });
    this.vehicleCardList(); // 初始化车辆数据

    // 开始定时检查越界
    this.startBoundaryCheckInterval();
  },
  beforeDestroy() {
    // 组件销毁前清理地图资源
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
    if (this.personModelInterval) {
      clearInterval(this.personModelInterval);
    }
    if (this.trackingInterval) {
      clearInterval(this.trackingInterval);
    }
    if (this.boundaryCheckInterval) {
      clearInterval(this.boundaryCheckInterval);
    }
    // 清理编辑状态相关资源
    this.stopEditingFence();
  },
  computed: {
    // 获取当前类型的围栏列表
    getCurrentFences() {
      return this.currentFenceType === "person"
        ? this.personFences
        : this.vehicleFences;
    },
  },
  methods: {
    // 修改编辑围栏方法
    editSelectedFence() {
      if (!this.selectedFence || this.isCreatingFence) return;

      this.startEditingFence(this.selectedFence);
    },

    // 开始编辑围栏
    startEditingFence(fence) {
      if (!this.viewer || this.isCreatingFence) {
        console.error("Cesium viewer未初始化或正在创建围栏");
        return;
      }

      // 设置编辑状态
      this.isEditingFence = true;
      this.editingFence = fence;

      // 清除之前可能存在的顶点
      this.clearVertexEntities();

      console.log("显示围栏顶点");
      // 显示围栏顶点
      this.showFenceVertices(fence);

      console.log("添加编辑模式事件监听");
      // 添加鼠标事件监听
      this.addEditModeEventListeners();

      // 显示提示信息
      alert("围栏编辑模式已开启，可拖拽黄色顶点改变围栏形状，右键完成编辑");
    },

    // 显示围栏顶点
    showFenceVertices(fence) {
      if (
        !this.viewer ||
        !fence ||
        !fence.points ||
        fence.points.length === 0
      ) {
        console.error("无法显示围栏顶点：参数无效");
        return;
      }

      console.log("创建顶点实体，共", fence.points.length, "个顶点");

      // 创建顶点实体
      fence.points.forEach((point, index) => {
        try {
          const vertexEntity = this.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 10),
            point: {
              pixelSize: 12, // 增大顶点大小，更容易点击
              color: Cesium.Color.YELLOW,
              outlineColor: Cesium.Color.BLACK,
              outlineWidth: 2,
              heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
              disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保显示在最前面
            },
            // 为顶点添加ID用于识别
            properties: {
              vertexIndex: index,
              isFenceVertex: true,
            },
          });

          this.vertexEntities.push(vertexEntity);
          console.log("创建顶点实体", index, "成功");
        } catch (error) {
          console.error("创建顶点实体失败:", error);
        }
      });
    },
    // 清除顶点实体
    clearVertexEntities() {
      if (
        this.viewer &&
        this.vertexEntities &&
        this.vertexEntities.length > 0
      ) {
        console.log("清除顶点实体");
        this.vertexEntities.forEach((entity) => {
          try {
            this.viewer.entities.remove(entity);
          } catch (error) {
            console.error("移除顶点实体失败:", error);
          }
        });
        this.vertexEntities = [];
      }
    },

    // 添加编辑模式事件监听
    addEditModeEventListeners() {
      if (!this.viewer) {
        console.error("Cesium viewer未初始化");
        return;
      }

      console.log("移除现有事件监听器");
      // 移除现有的事件监听器，避免冲突
      try {
        this.viewer.screenSpaceEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_DOWN
        );
        this.viewer.screenSpaceEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.MOUSE_MOVE
        );
        this.viewer.screenSpaceEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_UP
        );
        this.viewer.screenSpaceEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.RIGHT_CLICK
        );
      } catch (error) {
        console.log("移除事件监听器时出错:", error);
      }

      console.log("添加左键按下事件");
      // 添加左键按下事件用于开始拖拽
      this.viewer.screenSpaceEventHandler.setInputAction((event) => {
        this.handleVertexDragStart(event);
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

      console.log("添加鼠标移动事件");
      // 添加鼠标移动事件用于拖拽中
      this.viewer.screenSpaceEventHandler.setInputAction((event) => {
        this.handleVertexDragging(event);
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      console.log("添加左键释放事件");
      // 添加左键释放事件用于结束拖拽
      this.viewer.screenSpaceEventHandler.setInputAction((event) => {
        this.handleVertexDragEnd(event);
      }, Cesium.ScreenSpaceEventType.LEFT_UP);

      console.log("添加右键点击事件");
      // 添加右键点击事件用于完成编辑
      this.viewer.screenSpaceEventHandler.setInputAction((event) => {
        this.completeEditingFence();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },
    // 处理顶点拖拽开始
    handleVertexDragStart(event) {
      console.log("开始拖拽顶点");
      const pickedObject = this.viewer.scene.pick(event.position);

      // 检查是否点击了顶点
      if (
        pickedObject &&
        pickedObject.id &&
        pickedObject.id.properties &&
        pickedObject.id.properties.isFenceVertex &&
        pickedObject.id.properties.vertexIndex !== undefined
      ) {
        this.isDraggingVertex = true;
        this.draggedVertexIndex = pickedObject.id.properties.vertexIndex;

        // 改变拖拽中顶点的样式
        pickedObject.id.point.color = Cesium.Color.RED;
        console.log("开始拖拽顶点", this.draggedVertexIndex);
      }
    },

    // 处理顶点拖拽中
    handleVertexDragging(event) {
      if (
        !this.isDraggingVertex ||
        this.draggedVertexIndex < 0 ||
        !this.editingFence
      ) {
        return;
      }

      const ray = this.viewer.camera.getPickRay(event.endPosition);
      let intersection;

      // 首先尝试从3D模型上拾取点
      if (this.tileset) {
        intersection = this.viewer.scene.pickFromRay(ray, [this.tileset]);
      }

      // 如果没有从模型上拾取到点，则从地球上拾取
      if (!intersection || !intersection.position) {
        intersection = this.viewer.scene.globe.pick(ray, this.viewer.scene);
      }

      if (intersection) {
        const position = intersection.position || intersection;
        const cartographic = Cesium.Cartographic.fromCartesian(position);
        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
        const latitude = Cesium.Math.toDegrees(cartographic.latitude);

        // 更新围栏点坐标
        this.editingFence.points[this.draggedVertexIndex] = {
          lng: longitude,
          lat: latitude,
        };

        // 更新顶点实体位置
        if (this.vertexEntities[this.draggedVertexIndex]) {
          this.vertexEntities[this.draggedVertexIndex].position =
            Cesium.Cartesian3.fromDegrees(longitude, latitude, 10);
        }

        // 重新渲染围栏
        this.renderFence(this.editingFence);
      }
    },

    // 处理顶点拖拽结束
    handleVertexDragEnd(event) {
      if (
        this.isDraggingVertex &&
        this.draggedVertexIndex >= 0 &&
        this.vertexEntities[this.draggedVertexIndex]
      ) {
        // 恢复顶点样式
        this.vertexEntities[this.draggedVertexIndex].point.color =
          Cesium.Color.YELLOW;
        console.log("结束拖拽顶点", this.draggedVertexIndex);
      }

      this.isDraggingVertex = false;
      this.draggedVertexIndex = -1;
    },

    // 完成围栏编辑
    completeEditingFence() {
      if (!this.isEditingFence || !this.editingFence) {
        return;
      }

      console.log("完成围栏编辑");

      // 移除顶点显示
      this.clearVertexEntities();

      // 重置编辑状态
      this.isEditingFence = false;
      this.editingFence = null;
      this.isDraggingVertex = false;
      this.draggedVertexIndex = -1;

      // 移除编辑模式的事件监听
      this.removeEditModeEventListeners();

      // 重新渲染所有围栏
      this.renderAllFences();

      alert("围栏编辑已完成");
    },

    // 移除编辑模式事件监听
    removeEditModeEventListeners() {
      if (!this.viewer) {
        return;
      }

      try {
        console.log("移除编辑模式事件监听");
        // 移除编辑模式添加的事件
        this.viewer.screenSpaceEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_DOWN
        );
        this.viewer.screenSpaceEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.MOUSE_MOVE
        );
        this.viewer.screenSpaceEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_UP
        );
        this.viewer.screenSpaceEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.RIGHT_CLICK
        );
      } catch (error) {
        console.log("移除编辑事件监听时出错:", error);
      }
    },

    // 停止编辑围栏
    stopEditingFence() {
      if (this.isEditingFence) {
        console.log("停止编辑围栏");
        this.completeEditingFence();
      }
    },

    // 新增：清除实体
    clearEntities() {
      if (this.viewer && this.bgEntities) {
        for (let key in this.bgEntities) {
          this.viewer.entities.remove(this.bgEntities[key]);
          delete this.bgEntities[key];
        }
      }
    },

    // 为人员设置轨迹数据
    initPersonTrajectories() {
      // 将笛卡尔坐标转换为经纬度坐标作为基准点
      const cartographic = Cesium.Cartographic.fromCartesian({
        x: -2686273.730145489,
        y: 4293961.185794622,
        z: 3863430.5618300107,
      });
      const baseLongitude = Cesium.Math.toDegrees(cartographic.longitude);
      const baseLatitude = Cesium.Math.toDegrees(cartographic.latitude);
      const baseHeight = cartographic.height + 1;

      // 为每个人生成轨迹数据
      this.personnelList.forEach((person) => {
        const trajectories = [];

        // 为每个人生成一个随机的起始位置，在基准点附近
        const personBaseLng =
          baseLongitude +
          (Math.random() - 0.5) * this.trajectoryConfig.maxRange * 0.5;
        const personBaseLat =
          baseLatitude +
          (Math.random() - 0.5) * this.trajectoryConfig.maxRange * 0.5;

        // 生成轨迹点，形成一个合理的移动路径
        for (let i = 0; i < this.trajectoryConfig.pointCount; i++) {
          // 在人员基准位置附近生成轨迹点，确保在100米范围内
          const lngOffset =
            (Math.random() - 0.5) * this.trajectoryConfig.maxRange;
          const latOffset =
            (Math.random() - 0.5) * this.trajectoryConfig.maxRange;

          trajectories.push({
            time: new Date().getTime() + i * 60000, // 每分钟一个点
            lng: personBaseLng + lngOffset,
            lat: personBaseLat + latOffset,
            height: baseHeight,
          });
        }

        this.personTrajectories[person.perName] = trajectories;
      });
    },

    // 格式化时间显示
    formatTime(date = new Date()) {
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      return `${hours}:${minutes}`;
    },

    // 人员选择变化处理
    onPersonSelect() {
      this.clearTrails();
      if (this.selectedPerson) {
        this.showFullPath();
      }
    },

    // 显示完整轨迹
    showFullPath() {
      if (
        !this.selectedPerson ||
        !this.personTrajectories[this.selectedPerson]
      ) {
        return;
      }

      this.clearTrails();
      this.updateTrailDisplay();
    },

    // 更新轨迹显示
    updateTrailDisplay() {
      const trajectories = this.personTrajectories[this.selectedPerson];
      if (!trajectories || trajectories.length < 2) return;

      // 创建轨迹点数组
      const positions = [];
      trajectories.forEach((point) => {
        positions.push(
          Cesium.Cartesian3.fromDegrees(point.lng, point.lat, point.height)
        );
      });

      // 创建轨迹线，使用更明显的样式
      const trailEntity = this.viewer.entities.add({
        polyline: {
          positions: positions,
          width: 4,
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.6,
            color: Cesium.Color.YELLOW,
          }),
          clampToGround: false,
          // 确保轨迹线在倾斜摄影上显示
          heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
        },
      });

      this.trailEntities[this.selectedPerson] = trailEntity;
    },

    // 清除轨迹
    clearTrails() {
      for (let key in this.trailEntities) {
        this.viewer.entities.remove(this.trailEntities[key]);
      }
      this.trailEntities = {};
    },

    // 设置人员列表
    personCardList(fn) {
      // 将笛卡尔坐标转换为经纬度坐标
      const cartographic = Cesium.Cartographic.fromCartesian({
        x: -2686273.730145489,
        y: 4293961.185794622,
        z: 3863430.5618300107,
      });
      const baseLongitude = Cesium.Math.toDegrees(cartographic.longitude);
      const baseLatitude = Cesium.Math.toDegrees(cartographic.latitude);
      const baseHeight = cartographic.height + 1;

      console.log("人员经纬度基准点:", {
        longitude: baseLongitude,
        latitude: baseLatitude,
        height: baseHeight,
      });

      // 清除现有的人员列表
      this.personnelList = [];

      // 生成10个不同的经纬度坐标，范围在100米内
      for (let index = 0; index < 10; index++) {
        // 生成随机偏移量，确保在100米范围内
        const lngOffset =
          (Math.random() - 0.5) * this.trajectoryConfig.maxRange;
        const latOffset =
          (Math.random() - 0.5) * this.trajectoryConfig.maxRange;

        this.personnelList.push({
          lng: baseLongitude + lngOffset,
          lat: baseLatitude + latOffset,
          height: baseHeight,
          perName: "人员" + (index + 1),
          status: "online",
          avatar: "/static/images/avatars/zhangsan.png",
        });
      }

      // 重新初始化轨迹数据
      this.initPersonTrajectories();

      fn && fn(this.personnelList);
    },

    // 设置车辆列表
    vehicleCardList() {
      const cartographic = Cesium.Cartographic.fromCartesian({
        x: -2686273.730145489,
        y: 4293961.185794622,
        z: 3863430.5618300107,
      });
      const baseLongitude = Cesium.Math.toDegrees(cartographic.longitude);
      const baseLatitude = Cesium.Math.toDegrees(cartographic.latitude);
      const baseHeight = cartographic.height + 1;

      this.vehicleList = [];

      // 生成5个车辆
      for (let index = 0; index < 5; index++) {
        const lngOffset =
          (Math.random() - 0.5) * this.trajectoryConfig.maxRange * 1.5; // 车辆活动范围更大
        const latOffset =
          (Math.random() - 0.5) * this.trajectoryConfig.maxRange * 1.5;

        this.vehicleList.push({
          lng: baseLongitude + lngOffset,
          lat: baseLatitude + latOffset,
          height: baseHeight,
          vehicleName: "车辆" + (index + 1),
          status: "online",
        });
      }
    },

    // 初始化车辆轨迹
    initVehicleTrajectories() {
      const cartographic = Cesium.Cartographic.fromCartesian({
        x: -2686273.730145489,
        y: 4293961.185794622,
        z: 3863430.5618300107,
      });
      const baseLongitude = Cesium.Math.toDegrees(cartographic.longitude);
      const baseLatitude = Cesium.Math.toDegrees(cartographic.latitude);
      const baseHeight = cartographic.height + 1;

      this.vehicleList.forEach((vehicle) => {
        const trajectories = [];
        const vehicleBaseLng =
          baseLongitude +
          (Math.random() - 0.5) * this.trajectoryConfig.maxRange;
        const vehicleBaseLat =
          baseLatitude + (Math.random() - 0.5) * this.trajectoryConfig.maxRange;

        for (let i = 0; i < this.trajectoryConfig.pointCount; i++) {
          const lngOffset =
            (Math.random() - 0.5) * this.trajectoryConfig.maxRange * 1.5;
          const latOffset =
            (Math.random() - 0.5) * this.trajectoryConfig.maxRange * 1.5;

          trajectories.push({
            time: new Date().getTime() + i * 60000,
            lng: vehicleBaseLng + lngOffset,
            lat: vehicleBaseLat + latOffset,
            height: baseHeight,
          });
        }

        // 为车辆添加轨迹属性
        vehicle.trajectories = trajectories;
      });
    },

    /**
     * 初始化Cesium地图
     */
    async initCesium() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDAxZGFhYy02MjJlLTRiNzktODNhZi00N2VjZGY0NTk4YmIiLCJpZCI6Mjc0NDAxLCJpYXQiOjE3NjMzNDYwNTR9.ZQW2DZ4KaMGbHuwrtIbyI6EdSSvgMJUHmmD74eZW7PQ";
      try {
        // 创建Cesium Viewer实例
        this.viewer = new Cesium.Viewer("cesiumContainer", {
          // 设置地图提供者，这里使用默认的Bing Maps
          imageryProvider: new Cesium.BingMapsImageryProvider({
            url: "https://dev.virtualearth.net",
            key: "AgcbDCAOb9zMfquaT4Z-MdHfx--9wUNrLRiiS7rIElFx8f-4lLulxZ0QnhqX5Lm6",
            mapStyle: Cesium.BingMapsStyle.AERIAL,
          }),
          // 配置是否显示各种控件
          animation: false, // 动画控件
          baseLayerPicker: true, // 底图选择器
          fullscreenButton: false, // 全屏按钮
          geocoder: false, // 地址搜索
          homeButton: false, // 主页按钮
          infoBox: false, // 信息框
          sceneModePicker: false, // 场景模式选择器
          selectionIndicator: false, // 选择指示器
          timeline: false, // 时间线
          navigationHelpButton: false, // 导航帮助按钮
          navigationInstructionsInitiallyVisible: false,
          // 设置初始视图位置
          center: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 10000000),
        });

        this.viewer.scene.camera.setView({
          // 视角-环翠
          duration: 1,
          destination: {
            x: -2739843.563038797,
            y: 4357442.794747324,
            z: 3880768.3292693933,
          },
          orientation: {
            heading: 6.037000745578596,
            pitch: -1.2499586064720978,
            roll: 0.000005306352659495417,
          },
        });

        // 隐藏Cesium logo
        this.viewer._cesiumWidget._creditContainer.style.display = "none";

        const VUE_APP_GIS =
          "http://192.168.2.11:8080/Apps/assets/media/gaoquyingji";
        try {
          const tileset = await Cesium.Cesium3DTileset.fromUrl(
            VUE_APP_GIS + "/tiles/01_guanwei/tileset.json"
          );
          this.viewer.scene.primitives.add(tileset);

          console.log("倾斜摄影模型加载成功tileset", tileset);

          if (tileset) {
            this.tileset = tileset;
            this.locateToTileset();
          }
        } catch (error) {
          console.error(`加载倾斜摄影模型失败: ${error}`);
        }

        console.log("Cesium地图初始化成功");
      } catch (error) {
        console.error("Cesium地图初始化失败:", error);
      }
    },

    /**
     * 获取倾斜摄影模型的经纬度并将摄像机视角转向模型上方
     */
    locateToTileset() {
      if (!this.tileset || !this.viewer) {
        console.error("模型或视图未准备就绪");
        return;
      }

      try {
        // 获取模型的边界球
        const boundingSphere = this.tileset.boundingSphere;

        if (!boundingSphere) {
          console.error("无法获取模型边界");
          return;
        }

        // 获取模型中心点的笛卡尔坐标
        const center = boundingSphere.center;

        // 将笛卡尔坐标转换为经纬度坐标
        const cartographic = Cesium.Cartographic.fromCartesian(center);
        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
        const latitude = Cesium.Math.toDegrees(cartographic.latitude);
        const height = cartographic.height;

        console.log("倾斜摄影模型中心点经纬度:", {
          longitude: longitude,
          latitude: latitude,
          height: height,
        });

        // 计算合适的观察距离 - 基于模型半径的倍数
        const distance = boundingSphere.radius * 2.5; // 可以根据需要调整倍数

        // 设置相机位置在模型上方
        const cameraPosition = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          height + distance // 相机高度为模型最高点加上观察距离
        );

        // 计算相机看向模型中心的方向
        const heading = Cesium.Math.toRadians(0); // 方向角
        const pitch = Cesium.Math.toRadians(-90); // 俯仰角 - 负数表示向下看
        const roll = Cesium.Math.toRadians(0); // 翻滚角

        // 使用flyTo方法平滑过渡到目标位置
        this.viewer.camera.flyTo({
          destination: cameraPosition,
          orientation: {
            heading: heading,
            pitch: pitch,
            roll: roll,
          },
          duration: 2, // 过渡时间2秒
          complete: () => {
            console.log("相机已成功定位到模型上方");
            // 初始化车辆轨迹
            this.initVehicleTrajectories();
            // 创建默认的电子围栏示例
            this.createDefaultFences();
            // 创建人员和车辆实体
            this.createPersonEntities();
            this.createVehicleEntities();
          },
        });
      } catch (error) {
        console.error("定位到模型上方失败:", error);
      }
    },

    // 创建默认的电子围栏示例
    createDefaultFences() {
      const cartographic = Cesium.Cartographic.fromCartesian({
        x: -2686273.730145489,
        y: 4293961.185794622,
        z: 3863430.5618300107,
      });
      const baseLongitude = Cesium.Math.toDegrees(cartographic.longitude);
      const baseLatitude = Cesium.Math.toDegrees(cartographic.latitude);

      // 创建一个人员电子围栏示例
      const personFencePoints = [
        { lng: baseLongitude - 0.0002, lat: baseLatitude - 0.0002 },
        { lng: baseLongitude + 0.0002, lat: baseLatitude - 0.0002 },
        { lng: baseLongitude + 0.0002, lat: baseLatitude + 0.0002 },
        { lng: baseLongitude - 0.0002, lat: baseLatitude + 0.0002 },
      ];

      this.personFences.push({
        id: Date.now(),
        name: "人员限制区域1",
        points: personFencePoints,
        type: "person",
        color: Cesium.Color.RED.withAlpha(0.3),
        borderColor: Cesium.Color.RED,
      });

      // 创建一个车辆电子围栏示例
      const vehicleFencePoints = [
        { lng: baseLongitude - 0.0004, lat: baseLatitude - 0.0004 },
        { lng: baseLongitude + 0.0004, lat: baseLatitude - 0.0004 },
        { lng: baseLongitude + 0.0004, lat: baseLatitude + 0.0004 },
        { lng: baseLongitude - 0.0004, lat: baseLatitude + 0.0004 },
      ];

      this.vehicleFences.push({
        id: Date.now() + 1,
        name: "车辆限制区域1",
        points: vehicleFencePoints,
        type: "vehicle",
        color: Cesium.Color.BLUE.withAlpha(0.3),
        borderColor: Cesium.Color.BLUE,
      });

      // 渲染所有围栏
      this.renderAllFences();
    },

    // 开始创建电子围栏
    startCreatingFence() {
      if (!this.viewer) {
        console.error("Cesium viewer 未初始化");
        alert("地图初始化未完成，请稍后再试");
        return;
      }

      this.isCreatingFence = true;
      this.currentFencePoints = [];

      // 清除之前的绘制
      if (this.drawingEntity) {
        this.viewer.entities.remove(this.drawingEntity);
        this.drawingEntity = null;
      }

      // 显示提示信息
      alert(
        `开始创建${
          this.currentFenceType === "person" ? "人员" : "车辆"
        }围栏，请在地图上点击至少3个点，右键完成绘制`
      );

      try {
        // 保存原始的事件处理器，避免重复添加
        if (this.originalLeftClickHandler) {
          this.viewer.screenSpaceEventHandler.removeInputAction(
            Cesium.ScreenSpaceEventType.LEFT_CLICK
          );
          this.viewer.screenSpaceEventHandler.removeInputAction(
            Cesium.ScreenSpaceEventType.RIGHT_CLICK
          );
        }

        // 添加鼠标点击事件监听 - 用于添加点
        this.viewer.screenSpaceEventHandler.setInputAction((click) => {
          const ray = this.viewer.camera.getPickRay(click.position);

          // 首先尝试从3D模型上拾取点
          let intersection;
          if (this.tileset) {
            intersection = this.viewer.scene.pickFromRay(ray, [this.tileset]);
          }

          // 如果没有从模型上拾取到点，则从地球上拾取
          if (!intersection || !intersection.position) {
            intersection = this.viewer.scene.globe.pick(ray, this.viewer.scene);
          }

          if (intersection) {
            const position = intersection.position || intersection;
            const cartographic = Cesium.Cartographic.fromCartesian(position);
            const longitude = Cesium.Math.toDegrees(cartographic.longitude);
            const latitude = Cesium.Math.toDegrees(cartographic.latitude);

            this.currentFencePoints.push({ lng: longitude, lat: latitude });
            this.updateDrawingFence();

            // 在点击位置添加临时标记点，便于用户看到已添加的点
            const pointEntity = this.viewer.entities.add({
              position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 5),
              point: {
                pixelSize: 8,
                color: Cesium.Color.YELLOW,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
              },
            });

            // 保存临时点实体，稍后清除
            if (!this.temporaryPointEntities) {
              this.temporaryPointEntities = [];
            }
            this.temporaryPointEntities.push(pointEntity);
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        // 添加右键点击完成绘制
        this.viewer.screenSpaceEventHandler.setInputAction((click) => {
          if (this.currentFencePoints.length >= 3) {
            this.completeCreatingFence();
          } else {
            alert(
              `围栏至少需要3个点，当前已添加${this.currentFencePoints.length}个点`
            );
          }
        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

        // 记录已经添加了事件处理器
        this.originalLeftClickHandler = true;
      } catch (error) {
        console.error("添加事件监听失败:", error);
        this.stopCreatingFence();
        alert("创建围栏失败，请稍后重试");
      }
    },

    // 更新绘制中的围栏
    updateDrawingFence() {
      if (!this.viewer || this.currentFencePoints.length < 2) return;

      // 清除之前的绘制
      if (this.drawingEntity) {
        this.viewer.entities.remove(this.drawingEntity);
      }

      const positions = this.currentFencePoints.map(
        (point) => Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 3) // 稍微抬高一点，确保可见
      );

      // 闭合多边形
      if (this.currentFencePoints.length > 2) {
        positions.push(positions[0]);
      }

      // 创建绘制中的围栏实体
      this.drawingEntity = this.viewer.entities.add({
        polyline: {
          positions: positions,
          width: 2,
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.8,
            color: Cesium.Color.YELLOW,
          }),
          clampToGround: false,
          heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
          disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保显示在模型上方
        },
      });
    },

    // 完成创建电子围栏
    completeCreatingFence() {
      if (!this.viewer || this.currentFencePoints.length < 3) return;

      // 获取围栏名称
      const defaultName = `${
        this.currentFenceType === "person" ? "人员" : "车辆"
      }围栏${new Date().getTime()}`;
      const fenceName = prompt("请输入围栏名称:", defaultName);

      // 如果用户取消了输入，则停止创建
      if (fenceName === null) {
        this.stopCreatingFence();
        return;
      }

      // 创建新围栏对象
      const newFence = {
        id: Date.now(),
        name: fenceName || defaultName,
        points: [...this.currentFencePoints],
        type: this.currentFenceType,
        color:
          this.currentFenceType === "person"
            ? Cesium.Color.RED.withAlpha(0.3)
            : Cesium.Color.BLUE.withAlpha(0.3),
        borderColor:
          this.currentFenceType === "person"
            ? Cesium.Color.RED
            : Cesium.Color.BLUE,
      };

      // 添加到对应类型的围栏数组
      if (this.currentFenceType === "person") {
        this.personFences.push(newFence);
      } else {
        this.vehicleFences.push(newFence);
      }

      // 渲染新创建的围栏
      this.renderFence(newFence);

      // 自动选中新创建的围栏
      this.selectedFence = newFence;

      console.log("围栏创建成功:", newFence);

      // 停止创建状态
      this.stopCreatingFence();
    },
    // 停止创建电子围栏
    stopCreatingFence() {
      console.log("停止创建围栏");
      this.isCreatingFence = false;

      // 确保同时停止编辑状态
      this.stopEditingFence();

      // ... 现有代码 ...

      // 移除临时绘制的围栏
      if (this.drawingEntity && this.viewer) {
        this.viewer.entities.remove(this.drawingEntity);
        this.drawingEntity = null;
      }

      // 移除临时点标记
      if (this.temporaryPointEntities && this.viewer) {
        this.temporaryPointEntities.forEach((entity) => {
          this.viewer.entities.remove(entity);
        });
        this.temporaryPointEntities = null;
      }

      // 移除事件监听
      if (this.viewer) {
        try {
          this.viewer.screenSpaceEventHandler.removeInputAction(
            Cesium.ScreenSpaceEventType.LEFT_CLICK
          );
          this.viewer.screenSpaceEventHandler.removeInputAction(
            Cesium.ScreenSpaceEventType.RIGHT_CLICK
          );
        } catch (error) {
          console.log("移除事件监听时出错:", error);
        }
      }

      this.originalLeftClickHandler = null;
      this.currentFencePoints = [];
    },

    // 选择围栏
    selectFence(fence) {
      console.log("选择围栏:", fence.name);
      // 停止当前编辑
      if (this.isEditingFence) {
        this.stopEditingFence();
      }

      this.selectedFence = fence;

      // 高亮显示选中的围栏
      this.renderAllFences();
    },

    // 编辑选中的围栏
    editSelectedFence() {
      if (!this.selectedFence || this.isCreatingFence) {
        console.log("无法编辑围栏：未选中围栏或正在创建围栏");
        return;
      }

      console.log("开始编辑围栏:", this.selectedFence.name);
      this.startEditingFence(this.selectedFence);
    },

    // 删除选中的围栏
    deleteSelectedFence() {
      if (confirm(`确定要删除围栏"${this.selectedFence.name}"吗？`)) {
        // 移除围栏实体
        if (this.fenceEntities[this.selectedFence.id]) {
          this.viewer.entities.remove(
            this.fenceEntities[this.selectedFence.id]
          );
          delete this.fenceEntities[this.selectedFence.id];
        }

        // 从数组中移除
        if (this.selectedFence.type === "person") {
          this.personFences = this.personFences.filter(
            (f) => f.id !== this.selectedFence.id
          );
        } else {
          this.vehicleFences = this.vehicleFences.filter(
            (f) => f.id !== this.selectedFence.id
          );
        }

        this.selectedFence = null;
      }
    },

    // 渲染所有围栏
    renderAllFences() {
      // 清除所有围栏实体
      for (let id in this.fenceEntities) {
        this.viewer.entities.remove(this.fenceEntities[id]);
      }
      this.fenceEntities = {};

      // 重新渲染所有围栏
      [...this.personFences, ...this.vehicleFences].forEach((fence) => {
        this.renderFence(fence);
      });
    },

    // 改进的渲染围栏方法
    renderFence(fence) {
      if (!this.viewer) return;

      const positions = fence.points.map((point) =>
        Cesium.Cartesian3.fromDegrees(point.lng, point.lat, 2)
      );

      // 选择边框颜色，如果是选中的围栏则使用高亮色
      const borderColor =
        this.selectedFence && this.selectedFence.id === fence.id
          ? Cesium.Color.YELLOW
          : fence.borderColor;

      // 移除已存在的围栏实体
      if (this.fenceEntities[fence.id]) {
        this.viewer.entities.remove(this.fenceEntities[fence.id]);
      }

      // 创建多边形实体
      const fenceEntity = this.viewer.entities.add({
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(positions),
          material: fence.color,
          outline: true,
          outlineWidth: 2,
          outlineColor: borderColor,
          heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
          disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保始终显示在最前面
        },
        // 添加围栏名称标签
        label: {
          text: fence.name,
          font: "14px sans-serif",
          fillColor: Cesium.Color.WHITE,
          backgroundColor: Cesium.Color.BLACK.withAlpha(0.7),
          padding: new Cesium.Cartesian2(5, 5),
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          position: this.calculatePolygonCenter(fence.points),
        },
      });

      this.fenceEntities[fence.id] = fenceEntity;
    },
    // 计算多边形中心点，用于显示标签
    calculatePolygonCenter(points) {
      let sumLng = 0,
        sumLat = 0;
      points.forEach((point) => {
        sumLng += point.lng;
        sumLat += point.lat;
      });

      const centerLng = sumLng / points.length;
      const centerLat = sumLat / points.length;

      return Cesium.Cartesian3.fromDegrees(centerLng, centerLat, 5);
    },
    // 创建人员实体
    createPersonEntities() {
      this.personnelList.forEach((person) => {
        const position = Cesium.Cartesian3.fromDegrees(
          person.lng,
          person.lat,
          person.height
        );

        const entity = this.viewer.entities.add({
          position: position,
          billboard: {
            image: "/static/images/avatars/zhangsan.png",
            scale: 0.5,
            heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
          },
          label: {
            text: person.perName,
            font: "14px sans-serif",
            backgroundColor: Cesium.Color.BLACK.withAlpha(0.7),
            fillColor: Cesium.Color.WHITE,
            padding: new Cesium.Cartesian2(5, 5),
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, -10),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
          },
        });

        this.bgEntities[person.perName] = entity;
      });
    },

    // 创建车辆实体
    createVehicleEntities() {
      this.vehicleList.forEach((vehicle) => {
        const position = Cesium.Cartesian3.fromDegrees(
          vehicle.lng,
          vehicle.lat,
          vehicle.height
        );

        const entity = this.viewer.entities.add({
          position: position,
          billboard: {
            // 使用默认图标，实际项目中可以替换为车辆图标
            image: "/poi-marker-vehicle.png",
            scale: 0.5,
            heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
          },
          label: {
            text: vehicle.vehicleName,
            font: "14px sans-serif",
            backgroundColor: Cesium.Color.BLACK.withAlpha(0.7),
            fillColor: Cesium.Color.CYAN,
            padding: new Cesium.Cartesian2(5, 5),
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, -10),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
          },
        });

        this.bgEntities[vehicle.vehicleName] = entity;
      });
    },

    // 开始越界检查定时器
    startBoundaryCheckInterval() {
      this.boundaryCheckInterval = setInterval(() => {
        this.checkBoundaryViolations();
      }, 3000); // 每3秒检查一次
    },

    // 检查越界
    checkBoundaryViolations() {
      // 检查人员越界
      this.personnelList.forEach((person) => {
        this.personFences.forEach((fence) => {
          if (this.isPointInPolygon(person, fence.points)) {
            this.addAlarm(`人员${person.perName}进入限制区域：${fence.name}`);
          }
        });
      });

      // 检查车辆越界
      this.vehicleList.forEach((vehicle) => {
        this.vehicleFences.forEach((fence) => {
          if (this.isPointInPolygon(vehicle, fence.points)) {
            this.addAlarm(
              `车辆${vehicle.vehicleName}进入限制区域：${fence.name}`
            );
          }
        });
      });
    },

    // 判断点是否在多边形内（射线法）
    isPointInPolygon(point, polygonPoints) {
      let inside = false;
      for (
        let i = 0, j = polygonPoints.length - 1;
        i < polygonPoints.length;
        j = i++
      ) {
        const xi = polygonPoints[i].lng,
          yi = polygonPoints[i].lat;
        const xj = polygonPoints[j].lng,
          yj = polygonPoints[j].lat;

        const intersect =
          yi > point.lat != yj > point.lat &&
          point.lng < ((xj - xi) * (point.lat - yi)) / (yj - yi) + xi;
        if (intersect) inside = !inside;
      }
      return inside;
    },

    // 添加告警
    addAlarm(content) {
      // 检查是否已存在相同的告警（避免重复）
      const exists = this.alarms.some((alarm) => alarm.content === content);
      if (exists) return;

      const alarm = {
        id: Date.now(),
        content: content,
        time: this.formatTime(),
      };

      this.alarms.unshift(alarm);

      // 限制告警数量
      if (this.alarms.length > 20) {
        this.alarms.pop();
      }

      // 可以在这里添加告警声音或其他提示
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  // Cesium容器样式
  .cesium-container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  // 追踪控制面板样式
  .tracking-panel {
    position: absolute;
    left: 50%;
    top: 20px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 150px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    padding: 15px;
    color: white;
    z-index: 100;

    select {
      padding: 5px 10px;
      border-radius: 4px;
      border: none;
      background: #333;
      color: white;
      width: 100%;
    }
  }

  // 电子围栏管理面板样式
  .fence-panel {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 250px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    padding: 15px;
    color: white;
    z-index: 100;

    .panel-header {
      margin-bottom: 15px;

      h3 {
        margin: 0 0 10px 0;
        font-size: 18px;
        text-align: center;
      }

      .fence-type-switch {
        display: flex;
        justify-content: space-around;

        label {
          cursor: pointer;
          display: flex;
          align-items: center;

          input {
            margin-right: 5px;
          }
        }
      }
    }

    .fence-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 15px;

      button {
        flex: 1;
        min-width: calc(50% - 5px);
        padding: 8px 5px;
        border: none;
        border-radius: 4px;
        background: #173349;
        color: white;
        cursor: pointer;

        &:hover:not(:disabled) {
          background: #1e4763;
        }

        &:disabled {
          background: #555;
          cursor: not-allowed;
        }
      }

      // 添加编辑中的按钮样式
      button.editing {
        background: #ff6600 !important;

        &:hover {
          background: #ff8833 !important;
        }
      }
    }

    .fence-list {
      max-height: 200px;
      overflow-y: auto;

      h4 {
        margin: 0 0 10px 0;
        font-size: 14px;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          padding: 8px;
          margin-bottom: 5px;
          background: #333;
          border-radius: 4px;
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: #444;
          }

          &.active {
            background: #1e4763;
            border: 1px solid #fff;
          }
        }
      }
    }
  }

  // 告警面板样式
  .alarm-panel {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 300px;
    max-height: 400px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 8px;
    padding: 15px;
    color: white;
    z-index: 100;

    h3 {
      margin: 0 0 15px 0;
      font-size: 18px;
      color: #ff4444;
      text-align: center;
    }

    .alarm-list {
      max-height: 320px;
      overflow-y: auto;
    }

    .alarm-item {
      padding: 10px;
      margin-bottom: 10px;
      background: rgba(255, 68, 68, 0.2);
      border-left: 3px solid #ff4444;
      border-radius: 4px;

      .alarm-time {
        display: block;
        font-size: 12px;
        color: #aaa;
        margin-bottom: 5px;
      }

      .alarm-content {
        font-size: 14px;
      }
    }
  }
}
</style>