<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import BuildingInfoPanel from '../../../../components/BuildingInfoPanel.vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
const infoPanel = ref<InstanceType<typeof BuildingInfoPanel> | null>(null);
const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2();
// 添加字体加载器
const fontLoader = new FontLoader();
const container = ref<HTMLDivElement | null>(null);
const width = 600;
const height = 400;
const clickableBuildings: any = []; // 存储所有可点击建筑物

// 场景变量
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
let controls: any = null;
let animateId: any = null;

// 初始化场景
const initScene = (width: number, height: number) => {
  // 设置渲染器
  renderer.setSize(width, width * 2 / 3);
  renderer.setClearColor(0x87ceeb); // 天空蓝色背景
  renderer.shadowMap.enabled = true;
  container.value && container.value.appendChild(renderer.domElement);

  // 设置相机位置
  camera.position.set(0, 30, 60);

  // 添加轨道控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.05;

  // 添加光源
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(10, 20, 10);
  directionalLight.castShadow = true;
  directionalLight.shadow.mapSize.width = 2048;
  directionalLight.shadow.mapSize.height = 2048;
  scene.add(directionalLight);

  // 添加地面
  const groundGeometry = new THREE.PlaneGeometry(100, 100);
  const groundMaterial = new THREE.MeshStandardMaterial({
    color: 0x4CAF50,
    roughness: 0.8,
    metalness: 0.2
  });
  const ground = new THREE.Mesh(groundGeometry, groundMaterial);
  ground.rotation.x = -Math.PI / 2;
  ground.receiveShadow = true;
  scene.add(ground);

  // 添加建筑物
  createBuildings();

  // 添加树木和道路
  createEnvironment();

  // 创建椭圆操场
  createEllipticalPlayground(0, 0.02, 0);

  // 添加篮球场
  createBasketballCourt(-33, 0.02, -16);
  createBasketballCourt(-33, 0.02, 0);
  createBasketballCourt(-33, 0.02, 16);
};

// 处理鼠标点击事件
const handleClick = (event: any) => {
  // 将鼠标位置归一化为设备坐标 (-1到+1)
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

  // 更新射线投射器
  raycaster.setFromCamera(mouse, camera);
  // console.log(clickableBuildings);
  // 计算与射线相交的物体
  const intersects = raycaster.intersectObjects(clickableBuildings);

  if (intersects.length > 0) {
    // 找到第一个被点击的建筑物
    const clickedBuilding = intersects[0].object;

    // 执行点击后的操作
    onBuildingClick(clickedBuilding);
  }
};

// 建筑物点击回调
const onBuildingClick = (building: any) => {
  console.log("点击了建筑物:", building.userData.buildingInfo);
  // 这里可以显示信息面板、高亮建筑物等
  highlightBuilding(building);
  showBuildingInfo(building.userData.buildingInfo);
};

// 高亮建筑物
const highlightBuilding = (building: any) => {
  // 先重置所有高亮
  clickableBuildings.forEach((b: any) => {
    if (b.userData.originalMaterial) {
      b.material = b.userData.originalMaterial;
    }
  });

  // 保存原始材质
  if (!building.userData.originalMaterial) {
    building.userData.originalMaterial = building.material;
  }

  // 创建高亮材质
  const highlightMaterial = new THREE.MeshStandardMaterial({
    color: 0xffff00,
    emissive: 0x888800,
    metalness: 0.5,
    roughness: 0.1
  });

  // 应用高亮材质
  building.material = highlightMaterial;
};

// 修改showBuildingInfo函数
const showBuildingInfo = (info: any) => {
  if (infoPanel.value) {
    infoPanel.value.show(info);
  }

  // 添加临时高亮动画
  if (info.highlightObject) {
    const originalColor = info.highlightObject.material.color.getHex();
    info.highlightObject.material.color.setHex(0xffff00);

    setTimeout(() => {
      info.highlightObject.material.color.setHex(originalColor);
    }, 2000);
  }
};
// 创建校园建筑物
const createBuildings = async () => {
  // 主教学楼
  const mainBuilding = await createBuilding(15, 8, 10, 0xcccccc, 0, 4, 38, "教学楼", {
    name: "主教学楼",
    function: "教学",
    openTime: "07:00-22:00",
    description: "校园主要教学场所，包含多个教室和实验室"
  });
  scene.add(mainBuilding);
  // 添加左右两侧建筑

  const leftBuilding = await createBuilding(10, 5, 8, 0xcccccc, -30, 3, 36, "一号教学楼");
  scene.add(leftBuilding);
  const rightBuilding = await createBuilding(10, 5, 8, 0xcccccc, 30, 3, 36, "二号教学楼");
  scene.add(rightBuilding);

  // 右侧三栋建筑
  const rightBuilding1 = await createBuilding(10, 5, 8, 0xcccccc, 30, 3, 16, "一号宿舍楼", {
    name: "一号宿舍楼",
    function: "休息",
    openTime: "07:00-22:00",
    description: "供学生休息"
  });
  scene.add(rightBuilding1);
  const rightBuilding2 = await createBuilding(10, 5, 8, 0xcccccc, 30, 3, -4, "二号宿舍楼", {
    name: "二号宿舍楼",
    function: "休息",
    openTime: "07:00-22:00",
    description: "供学生休息"
  });
  scene.add(rightBuilding2);
  const rightBuilding3 = await createBuilding(10, 5, 8, 0xcccccc, 30, 3, -24, "三号宿舍楼", {
    name: "三号宿舍楼",
    function: "休息",
    openTime: "07:00-22:00",
    description: "供学生休息"
  });
  scene.add(rightBuilding3);
  // 左侧三栋建筑
  // const leftBuilding1 = await createBuilding(10, 5, 8, 0xcccccc, -30, 4, 16);
  // scene.add(leftBuilding1);
  const leftBuilding2 = await createBuilding(10, 5, 8, 0xcccccc, -0, 3, -35);
  scene.add(leftBuilding2);
  const leftBuilding3 = await createBuilding(10, 5, 8, 0xcccccc, -30, 3, -35);
  scene.add(leftBuilding3);
  // 添加窗户细节
  addBuildingDetails();
};

// 创建建筑物通用函数
type BuildingInfo = {
  name?: string;
  function?: string;
  openTime?: string;
  [key: string]: any;
};
const createBuilding = async (
  width: any,
  height: any,
  depth: any,
  color: any,
  x: any,
  y: any,
  z: any,
  name: any = "",
  buildingInfo: BuildingInfo = {}
) => {
  const geometry = new THREE.BoxGeometry(width, height, depth);
  const material = new THREE.MeshStandardMaterial({
    color: color,
    roughness: 0.7
  });
  const building = new THREE.Mesh(geometry, material);
  building.position.set(x, y, z);
  building.castShadow = true;
  building.receiveShadow = true;
  // 添加建筑物名称
  if (name) {
    building.name = name;
    const text = await create3DText(name, {
      size: 2,
      height: 0.1,
      color: 0xffffff,
      position: { x: x, y: y + height / 2 + 0.5, z: z },
      rotation: { x: 0, y: 0, z: 0 },
    });
    scene.add(text);
  }
  // 添加可点击属性
  building.userData = {
    isBuilding: true,
    buildingInfo: {
      name: buildingInfo.name || "未命名建筑",
      function: buildingInfo.function || "教学/办公",
      openTime: buildingInfo.openTime || "08:00-22:00",
      ...buildingInfo
    }
  };
  clickableBuildings.push(building);
  // console.log("添加可点击属性", building)

  return building;
};

// 创建3D文字
type TextOptions = {
  size?: number;
  height?: any;
  color?: number;
  position?: { x: number; y: number; z: number };
  rotation?: { x: number; y: number; z: number };
};

const create3DText = async (message: any, options: TextOptions = {}) => {
  const {
    size = 2,
    height = 0.2,
    color = 0xffffff,
    position = { x: 0, y: 0, z: 0 },
    rotation = { x: 0, y: 0, z: 0 },
  } = options;

  // 加载字体
  const font = await new Promise<any>((resolve) => {
    fontLoader.load('/FangSong_Regular.json', (font) => resolve(font));
  });

  // 创建文字几何体
  const textGeometry = new TextGeometry(message, {
    font: font,
    size: size,
    depth: height,
    curveSegments: 12,
    bevelEnabled: false
  });

  // 居中文字
  textGeometry.computeBoundingBox();
  const textWidth = textGeometry.boundingBox && textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
  if (textWidth) {
    textGeometry.translate(-textWidth / 2, 0, 0);
  }

  const textMaterial = new THREE.MeshStandardMaterial({ color });
  const textMesh = new THREE.Mesh(textGeometry, textMaterial);

  textMesh.position.set(position.x, position.y, position.z);
  textMesh.rotation.set(rotation.x, rotation.y, rotation.z);

  return textMesh;
};

// 添加建筑物细节（窗户等）
const addBuildingDetails = () => {
  // 在主教学楼上添加窗户
  for (let i = -6; i <= 6; i += 3) {
    for (let j = 1; j <= 6; j += 2) {
      const window = new THREE.Mesh(
        new THREE.PlaneGeometry(1, 1.5),
        new THREE.MeshStandardMaterial({ color: 0x0000AA })
      );
      window.position.set(i, j, 43.1);
      scene.add(window);
    }
  }
};

// 创建环境（树木、道路等）
const createEnvironment = () => {
  // 添加道路
  const roadGeometry = new THREE.PlaneGeometry(5, 100);
  const roadMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });

  // 靠近地面左侧边缘的纵向道路
  const roadLeft = new THREE.Mesh(roadGeometry, roadMaterial);
  roadLeft.rotation.x = -Math.PI / 2;
  roadLeft.position.y = 0.01;
  roadLeft.position.x = -47.5;
  roadLeft.position.z = 0;
  scene.add(roadLeft);

  // 靠近地面右侧边缘的纵向道路
  const roadRight = new THREE.Mesh(roadGeometry, roadMaterial);
  roadRight.rotation.x = -Math.PI / 2;
  roadRight.position.y = 0.01;
  roadRight.position.x = 47.5;
  roadRight.position.z = 0;
  scene.add(roadRight);

  // 道路中间白线（右侧）
  const lineGeometry = new THREE.PlaneGeometry(0.2, 95);
  const lineMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
  const roadLine = new THREE.Mesh(lineGeometry, lineMaterial);
  roadLine.rotation.x = -Math.PI / 2;
  roadLine.position.y = 0.02;
  roadLine.position.x = 47.5;
  roadLine.position.z = 0;
  scene.add(roadLine);
  // 道路中间白线（左侧）
  const roadLine1 = new THREE.Mesh(lineGeometry, lineMaterial);
  roadLine1.rotation.x = -Math.PI / 2;
  roadLine1.position.y = 0.02;
  roadLine1.position.x = -47.5;
  roadLine1.position.z = 0;
  scene.add(roadLine1);

  // 中间白线
  const crossRoadGeometry = new THREE.PlaneGeometry(95, 0.2);
  const crossRoadLine = new THREE.Mesh(
    crossRoadGeometry,
    lineMaterial
  );
  crossRoadLine.rotation.x = -Math.PI / 2;
  crossRoadLine.position.y = 0.02;
  crossRoadLine.position.z = 47.5;
  scene.add(crossRoadLine);
  // 横向道路（前）
  const crossRoad = new THREE.Mesh(
    new THREE.PlaneGeometry(100, 5),
    roadMaterial
  );
  crossRoad.rotation.x = -Math.PI / 2;
  crossRoad.position.y = 0.01;
  crossRoad.position.z = -47.5; // 靠近地面边缘
  scene.add(crossRoad);

  // 
  const crossRoadLine2 = new THREE.Mesh(
    crossRoadGeometry,
    lineMaterial
  );
  crossRoadLine2.rotation.x = -Math.PI / 2;
  crossRoadLine2.position.y = 0.02;
  crossRoadLine2.position.z = -47.5;
  scene.add(crossRoadLine2);
  // 横向道路（后）
  const crossRoad2 = new THREE.Mesh(
    new THREE.PlaneGeometry(100, 5),
    roadMaterial
  );
  crossRoad2.rotation.x = -Math.PI / 2;
  crossRoad2.position.y = 0.01;
  crossRoad2.position.z = 47.5; // 另一侧边缘
  scene.add(crossRoad2);

  // 进门道路(左)
  const entranceRoadGeometry = new THREE.PlaneGeometry(5, 25);
  const entranceRoad = new THREE.Mesh(
    entranceRoadGeometry,
    roadMaterial
  );
  entranceRoad.rotation.x = -Math.PI / 2;
  entranceRoad.position.y = 0.01;
  entranceRoad.position.z = 35; // 靠近地面边缘
  entranceRoad.position.x = -15; // 中间位置
  scene.add(entranceRoad);

  // 左侧中间白线
  const entranceRoadLineGeometry = new THREE.PlaneGeometry(0.2, 20);
  const entranceRoadLine = new THREE.Mesh(
    entranceRoadLineGeometry,
    lineMaterial
  );
  entranceRoadLine.rotation.x = -Math.PI / 2;
  entranceRoadLine.position.y = 0.02;
  entranceRoadLine.position.z = 35; // 靠近地面边缘
  entranceRoadLine.position.x = -15; // 中间位置
  scene.add(entranceRoadLine);

  // 右侧道路
  const entranceRoad1 = new THREE.Mesh(
    entranceRoadGeometry,
    roadMaterial
  );
  entranceRoad1.rotation.x = -Math.PI / 2;
  entranceRoad1.position.y = 0.02;
  entranceRoad1.position.z = 35;
  entranceRoad1.position.x = 15;
  scene.add(entranceRoad1);
  // 右侧白线
  const entranceRoadLine2 = new THREE.Mesh(
    entranceRoadLineGeometry,
    lineMaterial
  );
  entranceRoadLine2.rotation.x = -Math.PI / 2;
  entranceRoadLine2.position.y = 0.02;
  entranceRoadLine2.position.z = 35;
  entranceRoadLine2.position.x = 15;
  scene.add(entranceRoadLine2);

  // 对应进门道路
  const entranceRoad3Geometry = new THREE.PlaneGeometry(25, 5);
  const entranceRoad2 = new THREE.Mesh(entranceRoad3Geometry, roadMaterial);
  entranceRoad2.rotation.x = -Math.PI / 2;
  entranceRoad2.position.y = 0.01;
  entranceRoad2.position.z = 25;
  entranceRoad2.position.x = 0;
  scene.add(entranceRoad2);
  // 添加线
  const entranceRoad3Line = new THREE.PlaneGeometry(30, 0.2);
  const entranceRoadLine3 = new THREE.Mesh(entranceRoad3Line, lineMaterial);
  entranceRoadLine3.rotation.x = -Math.PI / 2;
  entranceRoadLine3.position.y = 0.1;
  entranceRoadLine3.position.z = 25;
  scene.add(entranceRoadLine3);

  // 右侧建筑物道路
  const roadMaterial4 = new THREE.MeshStandardMaterial({ color: 0xdddddd });
  const entranceRoad4 = new THREE.Mesh(
    new THREE.PlaneGeometry(1.5, 90),
    roadMaterial4
  );
  entranceRoad4.rotation.x = -Math.PI / 2;
  entranceRoad4.position.y = 0.01;
  entranceRoad4.position.z = 0;
  entranceRoad4.position.x = 30.5;
  scene.add(entranceRoad4);

  const entranceRoad5 = new THREE.Mesh(
    new THREE.PlaneGeometry(70, 1.5),
    roadMaterial4
  );
  entranceRoad5.rotation.x = -Math.PI / 2;
  entranceRoad5.position.y = 0.01;
  entranceRoad5.position.z = 0;
  entranceRoad5.position.x = -10;
  entranceRoad5.position.z = -25;
  scene.add(entranceRoad5);

  const entranceRoad6 = new THREE.Mesh(
    new THREE.PlaneGeometry(1.5, 30),
    roadMaterial4
  );
  entranceRoad6.rotation.x = -Math.PI / 2;
  entranceRoad6.position.y = 0.01;
  entranceRoad6.position.z = 0;
  entranceRoad6.position.z = -30;
  scene.add(entranceRoad6);

  const entranceRoad7 = new THREE.Mesh(
    new THREE.PlaneGeometry(1.5, 10),
    roadMaterial4
  );
  entranceRoad7.rotation.x = -Math.PI / 2;
  entranceRoad7.position.y = 0.01;
  entranceRoad7.position.z = -30;
  entranceRoad7.position.x = -30;
  scene.add(entranceRoad7);

  const entranceRoad8 = new THREE.Mesh(
    new THREE.PlaneGeometry(10, 1.5),
    roadMaterial4
  );
  entranceRoad8.rotation.x = -Math.PI / 2;
  entranceRoad8.position.y = 0.01;
  entranceRoad8.position.z = 35;
  entranceRoad8.position.x = 40;
  scene.add(entranceRoad8);

  const entranceRoad9 = new THREE.Mesh(
    new THREE.PlaneGeometry(10, 1.5),
    roadMaterial4
  );
  entranceRoad9.rotation.x = -Math.PI / 2;
  entranceRoad9.position.y = 0.01;
  entranceRoad9.position.z = 35;
  entranceRoad9.position.x = -40;
  scene.add(entranceRoad9);

  // 添加树木
  // for (let i = -40; i <= 40; i += 10) {
  //   for (let j = -40; j <= 40; j += 10) {
  //     // 避免在建筑物和道路上放置树木
  //     if ((i > -12 && i < 12 && j > -12 && j < 12) || 
  //         (i > -25 && i < -15 && j > 10 && j < 20) ||
  //         (i > 20 && i < 30 && (j > 5 && j < 15 || j > -15 && j < -5))) {
  //       continue;
  //     }

  //     if (Math.random() > 0.6) {
  //       createTree(i, 0, j);
  //     }
  //   }
  // }
};

// 创建树木
const createTree = (x: any, y: any, z: any) => {
  // 树干
  const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.5, 2, 8);
  const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
  const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
  trunk.position.set(x, y + 1, z);
  trunk.castShadow = true;

  // 树冠
  const leavesGeometry = new THREE.SphereGeometry(2, 8, 8);
  const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 });
  const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
  leaves.position.set(x, y + 3, z);
  leaves.castShadow = true;

  scene.add(trunk);
  scene.add(leaves);
};
// 创建椭圆操场
const createEllipticalPlayground = (x: any, y: any, z: any) => {

  // const PlaneGeometry  = new THREE.PlaneGeometry(25, 35);
  // const PlaneMaterial = new THREE.MeshStandardMaterial({ 
  //   color: 0xdddddd,
  //   transparent:true,//开启透明
  //   opacity:0.5,//设置透明度
  //   // side: THREE.DoubleSide
  // });
  // const Plane = new THREE.Mesh(PlaneGeometry, PlaneMaterial);
  // Plane.rotation.x = -Math.PI / 2;
  // Plane.position.set(x, y + 0.01, z);
  // Plane.receiveShadow = true;
  // scene.add(Plane);

  // 椭圆跑道参数
  const a = 13; // 长轴半径
  const b = 18; // 短轴半径
  const trackWidth = 3; // 跑道宽度
  const innerA = a - trackWidth; // 内椭圆长轴
  const innerB = b - trackWidth; // 内椭圆短轴

  // 创建椭圆跑道
  const trackGeometry = new THREE.EllipseCurve(
    0, 0,            // 中心点
    a, b,            // 半径
    0, 2 * Math.PI,  // 起始角度和结束角度
    false,           // 是否顺时针
    0                // 旋转角度
  );

  const innerTrackGeometry = new THREE.EllipseCurve(
    0, 0,
    innerA, innerB,
    0, 2 * Math.PI,
    false,
    0,
  );

  const trackPoints = trackGeometry.getPoints(100);
  const innerTrackPoints = innerTrackGeometry.getPoints(100);

  // 合并点集形成跑道形状
  const allPoints = trackPoints.concat(innerTrackPoints.reverse());

  // 创建跑道形状
  const trackShape = new THREE.Shape();
  trackShape.moveTo(trackPoints[0].x, trackPoints[0].y);
  for (let i = 1; i < trackPoints.length; i++) {
    trackShape.lineTo(trackPoints[i].x, trackPoints[i].y);
  }
  trackShape.lineTo(innerTrackPoints[0].x, innerTrackPoints[0].y);
  for (let i = 1; i < innerTrackPoints.length; i++) {
    trackShape.lineTo(innerTrackPoints[i].x, innerTrackPoints[i].y);
  }
  trackShape.lineTo(trackPoints[0].x, trackPoints[0].y);

  // 创建跑道网格
  const trackExtrudeSettings = {
    steps: 1,
    depth: 0.1,
    bevelEnabled: false
  };

  const trackGeometry3D = new THREE.ExtrudeGeometry(trackShape, trackExtrudeSettings);
  const trackMaterial = new THREE.MeshStandardMaterial({
    color: 0x654321,
    roughness: 0.9
  });
  const track = new THREE.Mesh(trackGeometry3D, trackMaterial);
  track.rotation.x = -Math.PI / 2;
  track.position.set(x, y, z);
  scene.add(track);

  // 创建内部足球场
  // 使用CircleGeometry并通过缩放实现椭圆
  const fieldGeometry = new THREE.CircleGeometry(1, 100);
  const fieldMaterial = new THREE.MeshStandardMaterial({
    color: 0x228B22,
    // side: THREE.DoubleSide
  });
  const field = new THREE.Mesh(fieldGeometry, fieldMaterial);
  field.scale.set(innerA, innerB, 1); // 椭圆缩放
  field.rotation.x = -Math.PI / 2;
  field.position.set(x, y + 0.01, z);
  scene.add(field);

  // 添加足球场标记线
  const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });

  // 中圈
  const centerCircleGeometry = new THREE.CircleGeometry(1, 32);
  const centerCircle = new THREE.Line(
    new THREE.EdgesGeometry(centerCircleGeometry),
    lineMaterial
  );
  centerCircle.scale.set(3, 3, 1); // 椭圆缩放
  centerCircle.rotation.x = -Math.PI / 2;
  centerCircle.position.set(x, y + 0.02, z);
  scene.add(centerCircle);

  // 中线
  const points = [];
  points.push(new THREE.Vector3(-innerA, 0, 0));
  points.push(new THREE.Vector3(innerA, 0, 0));
  const midlineGeometry = new THREE.BufferGeometry().setFromPoints(points);
  const midline = new THREE.Line(midlineGeometry, lineMaterial);
  midline.rotation.x = -Math.PI / 2;
  midline.position.set(x, y + 0.02, z);
  scene.add(midline);



  return { track, field };
};
// 创建篮球场（尺寸调整为20x10）
const createBasketballCourt = (x: any, y: any, z: any, rotationY = 0) => {
  // 篮球场尺寸 (调整为20x10)
  const courtLength = 20;
  const courtWidth = 10;
  const lineWidth = 0.2;

  // 创建篮球场地板
  const courtGeometry = new THREE.PlaneGeometry(courtLength, courtWidth);
  const courtMaterial = new THREE.MeshStandardMaterial({
    color: 0x1a3b6e, // 深蓝色
    roughness: 0.7,
    metalness: 0.1
  });
  const court = new THREE.Mesh(courtGeometry, courtMaterial);
  court.rotation.x = -Math.PI / 2;
  court.position.set(x, y, z);
  court.rotation.y = rotationY;
  court.receiveShadow = true;
  scene.add(court);

  // 篮球场边界线
  const borderLineGeometry = new THREE.EdgesGeometry(new THREE.BoxGeometry(courtLength, 0.1, courtWidth));
  const borderLineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 2 });
  const borderLine = new THREE.LineSegments(borderLineGeometry, borderLineMaterial);
  borderLine.position.set(x, y + 0.01, z);
  borderLine.rotation.y = rotationY;
  scene.add(borderLine);

  // 中线
  const midLineGeometry = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(0, 0.02, -courtWidth / 2),
    new THREE.Vector3(0, 0.02, courtWidth / 2)
  ]);
  const midLine = new THREE.Line(midLineGeometry, borderLineMaterial);
  midLine.position.set(x, y + 0.02, z);
  midLine.rotation.y = rotationY;
  scene.add(midLine);

  // 中圈 (按比例缩小)
  const centerCircleGeometry = new THREE.RingGeometry(1.2, 1.4, 32);
  const centerCircleMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide
  });
  const centerCircle = new THREE.Mesh(centerCircleGeometry, centerCircleMaterial);
  centerCircle.rotation.x = -Math.PI / 2;
  centerCircle.position.set(x, y + 0.02, z);
  centerCircle.rotation.y = rotationY;
  scene.add(centerCircle);

  // 三分线 (按比例调整)
  const threePointLineGeometry = new THREE.EllipseCurve(
    0, 0,
    5.7, 5.7, // 缩小三分线半径
    -Math.PI * 0.4, Math.PI * 0.4,
    false,
    0
  );
  const threePointPoints = threePointLineGeometry.getPoints(50);
  const threePointLine = new THREE.Line(
    new THREE.BufferGeometry().setFromPoints(threePointPoints),
    borderLineMaterial
  );
  threePointLine.position.set(x - courtLength / 2 + 1.2, y + 0.02, z); // 调整位置
  threePointLine.rotation.x = Math.PI / 2;
  threePointLine.rotation.y = rotationY;
  scene.add(threePointLine);
  // 三分线 (按比例调整)
  const threePointLineGeometry1 = new THREE.EllipseCurve(
    0, 0,
    -5.7, 5.7, // 缩小三分线半径
    -Math.PI * 0.4, Math.PI * 0.4,
    false,
    0
  );
  const threePointPoints1 = threePointLineGeometry1.getPoints(50);
  const threePointLine1 = new THREE.Line(
    new THREE.BufferGeometry().setFromPoints(threePointPoints1),
    borderLineMaterial
  );
  threePointLine1.position.set(x + courtLength / 2 - 1.2, y + 0.02, z); // 调整位置
  threePointLine1.rotation.x = Math.PI / 2;
  threePointLine1.rotation.y = rotationY;
  scene.add(threePointLine1);

  // 篮板和篮筐
  const createBackboard = (offsetX: any) => {
    // 篮板 (尺寸也相应缩小)
    const backboardGeometry = new THREE.BoxGeometry(1.5, 1, 0.05);
    const backboardMaterial = new THREE.MeshStandardMaterial({
      color: 0xffffff,
      transparent: true,
      opacity: 0.3,
      metalness: 0.9,
      roughness: 0.1
    });
    const backboard = new THREE.Mesh(backboardGeometry, backboardMaterial);
    backboard.position.set(
      x + offsetX * (courtLength / 2 - 0.4), // 调整位置
      y + 2.5, // 降低高度
      z
    );
    backboard.rotation.y = rotationY + (offsetX > 0 ? Math.PI : 0);
    scene.add(backboard);

    // 篮筐支架 (缩短)
    const poleGeometry = new THREE.CylinderGeometry(0.05, 0.05, 2.5, 16);
    const poleMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc });
    const pole = new THREE.Mesh(poleGeometry, poleMaterial);
    pole.position.set(
      x + offsetX * (courtLength / 2 - 0.4),
      y + 1.25,
      z
    );
    scene.add(pole);

    // 篮筐 (环)
    const hoopGeometry = new THREE.TorusGeometry(0.2, 0.02, 16, 32);
    const hoopMaterial = new THREE.MeshStandardMaterial({ color: 0xff7700 });
    const hoop = new THREE.Mesh(hoopGeometry, hoopMaterial);
    hoop.position.set(
      x + offsetX * (courtLength / 2 - 0.4),
      y + 2.55,
      z
    );
    hoop.rotation.x = Math.PI / 2;
    hoop.rotation.y = rotationY + (offsetX > 0 ? Math.PI : 0);
    scene.add(hoop);

    // 篮网 (缩小)
    const netGeometry = new THREE.ConeGeometry(0.2, 0.35, 8);
    const netMaterial = new THREE.MeshStandardMaterial({
      color: 0xffffff,
      wireframe: true,
      transparent: true,
      opacity: 0.7
    });
    const net = new THREE.Mesh(netGeometry, netMaterial);
    net.position.set(
      x + offsetX * (courtLength / 2 - 0.4),
      y + 2.4,
      z
    );
    net.rotation.x = Math.PI;
    net.rotation.y = rotationY + (offsetX > 0 ? Math.PI : 0);
    scene.add(net);
  };

  // 创建两个篮板
  createBackboard(1);  // 正方向篮板
  createBackboard(-1); // 反方向篮板

  return court;
};

// 动画循环
const animate = () => {
  animateId = requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
};

// 处理窗口大小变化
const onWindowResize = () => {
  camera.aspect = 3 / 2;
  camera.updateProjectionMatrix();

  let containerWidth = width;
  let containerHeight = height;
  if (container.value) {
    containerWidth = container.value.clientWidth || width;
    containerHeight = container.value.clientHeight || height;
  }
  renderer.setSize(containerWidth, containerWidth * (2 / 3));
};
// 添加鼠标移动事件处理
const onDocumentMouseMove = (event: any) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children, true);

  // 重置所有建筑物的悬停状态
  scene.traverse((obj: any) => {
    if (obj.userData.isBuilding && obj.userData.originalColor) {
      obj.material.color.setHex(obj.userData.originalColor);
    }
  });

  if (intersects.length > 0) {
    const hoveredObject = intersects[0].object;
    if (hoveredObject.userData.isBuilding) {
      // 存储原始颜色
      if (!hoveredObject.userData.originalColor) {
        hoveredObject.userData.originalColor = hoveredObject.material.color.getHex();
      }
      // 设置悬停颜色
      hoveredObject.material.color.setHex(0xaaaaaa);

      // 更改鼠标指针
      if (container.value) {
        container.value.style.cursor = 'pointer';
      }
      return;
    }
  }
  if (container.value) {
    container.value.style.cursor = 'default';
  }
};

onMounted(() => {

  // 获取容器宽高
  let containerWidth = width;
  let containerHeight = height;
  if (container.value) {
    containerWidth = container.value.clientWidth || width;
    containerHeight = container.value.clientHeight || height;
    initScene(containerWidth, containerHeight);
    animate();
  }

  window.addEventListener('resize', onWindowResize);
  window.addEventListener('click', handleClick, false);
  window.addEventListener('mousemove', onDocumentMouseMove, false);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', onWindowResize);
  window.removeEventListener('mousemove', onDocumentMouseMove, false);
  window.removeEventListener('click', handleClick, false);
  cancelAnimationFrame(animateId);
  if (container.value && container.value.contains(renderer.domElement)) {
    container.value.removeChild(renderer.domElement);
  }
});
</script>

<template>
  <div ref="container" id="webglContainer" style="width: 100%; height: 100%;">
    <BuildingInfoPanel ref="infoPanel" />
  </div>
</template>

<style scoped lang="less">
@import "@assets/styles/common.less";

.wrap {
  width: 100%;
  height: 100%;
}
</style>
