<template>
  <div class="map-container">
    <div
      ref="fullscreenElement"
      class="fullscreen-content"
      :class="{ 'is-fullscreen': isFullscreen }"
    >
      <div
        v-for="car in cars"
        :key="car.id"
        class="car"
        :style="{ left: car.x + 'px', top: car.y + 'px' }"
      >
        <img src="@/assets/imgs/indexPage/car1.png" alt="car" class="car-image" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const fullscreenElement = ref(null)
const isFullscreen = ref(false)

// 创建20辆车的数据
const cars = ref(
  Array.from({ length: 100 }, (_, index) => ({
    id: index + 1,
    x: Math.random() * 1600, // 初始x坐标
    y: Math.random() * 900, // 初始y坐标
    dx: (Math.random() - 0.5) * 6, // x方向速度
    dy: (Math.random() - 0.5) * 6 // y方向速度
  }))
)

// 更新车辆位置
let updateInterval
const updateCarPositions = () => {
  cars.value = cars.value.map((car) => {
    // 更新位置
    let newX = car.x + car.dx
    let newY = car.y + car.dy

    // 边界检查
    if (newX <= 0 || newX >= 1600) car.dx *= -1
    if (newY <= 0 || newY >= 900) car.dy *= -1

    return {
      ...car,
      x: newX,
      y: newY
    }
  })
}

onMounted(() => {
  // 每100毫秒更新一次，即每秒10次
  updateInterval = setInterval(updateCarPositions, 200)
})

onUnmounted(() => {
  // 清除定时器
  if (updateInterval) {
    clearInterval(updateInterval)
  }
})
</script>

<style scoped>
.map-container {
  position: relative;
}

.fullscreen-content {
  width: 1600px;
  height: 800px;
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}

.car {
  position: absolute;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}

.car-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 全屏模式下的样式 */
.fullscreen-content:fullscreen,
.fullscreen-content:-webkit-full-screen,
.fullscreen-content:-moz-full-screen,
.fullscreen-content:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  background-color: white;
}
</style>
