<template>
  <div class="video-player-component">
    <!-- 视频播放器 -->
    <video ref="videoPlayer" class="video" @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>
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: {
    videoUrl: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      playing: false,
      currentTime: 0,
      duration: 0,
      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);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.videoPlayer.addEventListener('loadedmetadata', this.onLoadedMetadata);
    });
  },
  beforeDestroy() {
    this.$refs.videoPlayer.removeEventListener('loadedmetadata', this.onLoadedMetadata);
  },
  methods: {
    playPause() {
      const video = this.$refs.videoPlayer;
      if (this.playing) {
        video.pause();
      } else {
        video.play();
      }
      this.playing = !this.playing;
    },
    onLoadedMetadata() {
      this.duration = this.$refs.videoPlayer.duration;
    },
    onTimeUpdate() {
      this.currentTime = this.$refs.videoPlayer.currentTime;
    },
    seekVideo(event) {
      if (!this.duration) return;

      const progress = this.$refs.videoPlayer.querySelector('.progress');
      const rect = progress.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const percentage = x / rect.width;
      this.currentTime = this.duration * percentage;
      this.$refs.videoPlayer.currentTime = this.currentTime;
    },
    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}`;
    },
  },
};
</script>

<style scoped>
.video-player-component {
  width: 100%;
}

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

.control-bar {
  background-color: #333;
  padding: 10px;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

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

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

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

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

.progress-handle {
  width: 10px