<template>
  <div class="surveillance-player">
    <!-- 摄像头选择 -->
    <div class="camera-selector">
      <select v-model="selectedCamera">
        <option v-for="camera in cameras" :key="camera.id" :value="camera">
          {{ camera.name }}
        </option>
      </select>
    </div>

    <!-- 时间选择 -->
    <div class="time-selector">
      <div>
        <label for="startTime">开始时间:</label>
        <input type="datetime-local" id="startTime" v-model="startTime" />
      </div>
      <div>
        <label for="endTime">结束时间:</label>
        <input type="datetime-local" id="endTime" v-model="endTime" />
      </div>
      <button @click="loadVideo">加载视频</button>
    </div>

    <!-- 视频播放器 -->
    <div class="video-player">
      <video ref="videoPlayer" @timeupdate="onTimeUpdate">
        <source :src="videoUrl" type="video/mp4" />
        <span>Your browser does not support the video tag</span>
      </video>

      <!-- 控制栏 -->
      <div class="control-bar">
        <button @click="playPause" :class="{ playing }">
          {{ playing ? '暂停' : '播放' }}
        </button>
        <div class="progress" @click="seekVideo">
          <div class="progress-filled" :style="{ width: `${currentTimePercentage}%` }"></div>
          <div class="progress-handle" :style="{ left: `${currentTimePercentage}%` }"></div>
        </div>
        <div class="status">
          <span class="time"> {{ formattedCurrentTime }} </span>
          /
          <span class="duration"> {{ formattedDuration }} </span>
        </div>
        <!-- 播放速度控制 -->
        <div class="speed-controls">
          <button @click="setSpeed(0.5)">0.5x</button>
          <button @click="setSpeed(1)">1x</button>
          <button @click="setSpeed(2)">2x</button>
        </div>
        <!-- 时间轴 -->
        <div class="timeline">
          <div class="timeline-slider" ref="timelineSlider" @mousedown="startDrag"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SurveillancePlayer',
  data() {
    return {
      // 摄像头列表
      cameras: [
        { id: 1, name: '入口', videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4' },
        { id: 2, name: '出口', videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4' },
        { id: 3, name: '大厅', videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4' }
        // ... 更多摄像头
      ],
      selectedCamera: null,
      startTime: new Date().toISOString().substr(0, 16),
      endTime: new Date().toISOString().substr(0, 16),
      videoUrl: '',
      playing: false,
      currentTime: 0,
      duration: 0,
      timeDragging: false,
      speed: 1,
    };
  },
  computed: {
    currentTimePercentage() {
      if (this.duration === 0) return 0;
      return (this.currentTime / this.duration) * 100;
    },
    formattedCurrentTime() {
      return this.formatTime(this.currentTime);
    },
    formattedDuration() {
        return this.formatTime(this.duration);
    },
  },
  methods: {
    // 加载视频
    loadVideo() {
      this.videoUrl = this.selectedCamera.videoUrl; // 实际应用中需根据 startTime 和 endTime 动态拼接视频 URL
      this.$refs.videoPlayer.load();
    },
    // 播放/暂停
    playPause() {
      const video = this.$refs.videoPlayer;
      if (this.playing) {
        video.pause();
      } else {
        video.play();
      }
      this.playing = !this.playing;
    },
    // 更新播放时间
    onTimeUpdate() {
      this.currentTime = this.$refs.videoPlayer.currentTime;
    },
    // 跳转到特定时间
    seekVideo(event) {
      if (!this.duration || !event) return;

      const progress = this.$refs.videoPlayer.querySelector('.progress');
      const rect = progress.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const percentage = x / rect.width;
      const newTime = this.duration * percentage;

      this.$refs.videoPlayer.currentTime = newTime;
    },
    // 设置播放速度
    setSpeed(speed) {
      this.speed = speed;
      this.$refs.videoPlayer.playbackRate = this.speed;
    },
    // 格式化时间
    formatTime(timeInSeconds) {
      const date = new Date(timeInSeconds * 1000);
      const hours = date.getUTCHours();
      const minutes = date.getUTCMinutes().toString().padStart(2, '0');
      const seconds = date.getUTCSeconds().toString().padStart(2, '0');
      return hours > 0 ? `${hours}:${minutes}:${seconds}` : `${minutes}:${seconds}`;
    },
    // 开始拖动时间轴
    startDrag() {
      this.timeDragging = true;
      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.stopDrag);
    },
    // 响应鼠标移动
    onMouseMove(event) {
      if (!this.timeDragging) return;

      const sliderRect = this.$refs.timelineSlider.getBoundingClientRect();
      const x = event.clientX - sliderRect.left;
      const percentage = x / sliderRect.width;
      const newTime = this.duration * percentage;
      this.$refs.videoPlayer.currentTime = newTime;
    },
    // 停止拖动
    stopDrag() {
      this.timeDragging = false;
      document.removeEventListener('mousemove', this.onMouseMove);
      document.removeEventListener('mouseup', this.stopDrag);
    },
  },
  mounted() {
    this.selectedCamera = this.cameras[0];
  },
};
</script>

<style scoped>
.surveillance-player {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}

.camera-selector {
  margin: 10px;
}

.time-selector {
  display: flex;
  align-items: center;
  margin: 10px;
}

.time-selector div {
  margin: 0 10px;
}

.video-player {
  width: 100%;
  max-width: 800px;
  margin: 10px;
}

.video {
  width: 100%;
  height: auto;
}

.control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #333;
  color: white;
  padding: 5px 10px;
}

button {
  margin: 0 10px;
  background-color: #444;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #555;
}

.progress {
  position: relative;
  width: 200px;
  height: 4px;
  background-color: #555;
  margin: 0 10px;
  cursor: pointer;
}

.progress-filled {
  position: absolute;
  height: 100%;
  background-color: #4CAF50;
  left: 0;
  top: 0;
}

.progress-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  transform: translateX(-50%);
  top: -3px;
}

.timeline {
  width: 100%;
  height: 20px;
  background-color: #ddd;
  margin: 10px 0;
}

.timeline-slider {
  height: 20px;
  background-color: transparent;
  cursor: pointer;
  width: 100%;
}
</style>