<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2024-11-19 09:32:40
 * @FilePath: src/views/screen/components/video/components/VideoProgress.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<!--
    调用开始播放的方法  playSecond 表示当前播放时间 秒
    this.$refs.VideoProgress.datas.playSecond = time
    this.$refs.VideoProgress.startVideo()

    调用停止播放的方法 并清除playSecond 和 sliderTime
    this.$refs.VideoProgress.datas.playSecond = 0
    this.$refs.VideoProgress.sliderTime = 0
    this.$refs.VideoProgress.stopVideo()

    调用组件的地方调用
    seek方法  拖动进度条后的事件   会返回当前点击时间  秒
-->
<template>
  <div class="container">
    <!-- 进度条 -->
    <div class="progress-bar">
      <div class="tab-player-progress">
        <div class="_progress-text">
          <!-- 播放分钟数 -->
          <span class="timer">{{ Math.floor(datas.playSecond / 60) }}:{{ ('0' + (datas.playSecond % 60)).slice(-2)
            }}</span>
          <!-- 总分钟数 -->
          <span class="timers">{{ Math.floor(datas.duration / 60) }}:{{ ('0' + (datas.duration % 60)).slice(-2)
            }}</span>
        </div>
        <!-- 进度条 -->
        <div class="p_slider" @mousedown="startDrag" @click="seek" @mousemove="showHoverTime"
             @mouseleave="hideHoverTime"
        >
          <div class="p_slider_track"></div>
          <div class="p_slider_fill" :style="'width:' + sliderTime + '%'"></div>
          <div class="p-box" :style="'left:' + sliderTime + '%'">
            <div class="p_slider_thumb"></div>
            <div class="p_slider_thumbs"></div>
          </div>
          <div class="hover-time" v-if="hoverTime" :style="{ left: Math.min(hoverPosition, $el.querySelector('.p_slider').offsetWidth - +40) + 'px' }">
            {{ hoverTime }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoProgress',
  data() {
    return {
      datas: {
        fileUrl: '', //音频地址
        duration: 1799, //时长
        createTime: '',
        playSecond: 0
      },
      audio: {
        playing: true, // 该字段是音频是否处于播放状态的属性
        currentTime: 0, // 音频当前播放时长
        minTime: 0,
        step: 0.1
      },
      audioKey: 0,
      sliderTime: 0, //滑动进度时间
      isDragging: false,
      intervalId: null, // Store the interval ID
      hoverTime: null, // Time to display on hover
      hoverPosition: 0 // Position of the hover time display
    }
  },
  computed: {},
  watch: {},
  mounted() {
    document.addEventListener('mousemove', this.onDrag)
    document.addEventListener('mouseup', this.stopDrag)
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.onDrag)
    document.removeEventListener('mouseup', this.stopDrag)
  },
  methods: {
    startVideo() {
      //playSecond每秒加1
      this.intervalId = setInterval(() => {
        if (!this.isDragging) {
          this.datas.playSecond++
          //更新进度条
          this.sliderTime = (this.datas.playSecond / this.datas.duration) * 100
          if (this.datas.playSecond >= this.datas.duration) {
            this.stopVideo()
          }
        }
      }, 1000)
    },
    stopVideo() {
      clearInterval(this.intervalId)
    },
    startDrag(event) {
      this.isDragging = true
      this.stopVideo()
    },
    onDrag(event) {
      if (this.isDragging && event.buttons === 1) {
        const progressBar = this.$el.querySelector('.p_slider')
        const rect = progressBar.getBoundingClientRect()
        const offsetX = event.clientX - rect.left
        const percentage = Math.min(Math.max(offsetX / rect.width, 0), 1)
        this.sliderTime = percentage * 100
        this.datas.playSecond = Math.floor(percentage * this.datas.duration)
      }
    },
    stopDrag() {
      if (this.isDragging) {
        this.isDragging = false
      }
    },
    seek(event) {
      const progressBar = this.$el.querySelector('.p_slider')
      const rect = progressBar.getBoundingClientRect()
      const offsetX = event.clientX - rect.left
      const percentage = Math.min(Math.max(offsetX / rect.width, 0), 1)
      this.sliderTime = percentage * 100
      this.datas.playSecond = Math.floor(percentage * this.datas.duration)
      this.$emit('seek', this.datas.playSecond)
    },
    showHoverTime(event) {
      const progressBar = this.$el.querySelector('.p_slider')
      const rect = progressBar.getBoundingClientRect()
      const offsetX = event.clientX - rect.left
      const percentage = Math.min(Math.max(offsetX / rect.width, 0), 1)
      const hoverSeconds = Math.floor(percentage * this.datas.duration)
      const minutes = Math.floor(hoverSeconds / 60)
      const seconds = ('0' + (hoverSeconds % 60)).slice(-2)
      this.hoverTime = `${minutes}:${seconds}`
      this.hoverPosition = offsetX
    },
    hideHoverTime() {
      this.hoverTime = null
    }
  }
}
</script>

<style scoped lang="scss">
.progress-bar {
  position: relative;
  width: 100%;
  height: 40px;
  margin: 0px auto;
  margin-top: 25px;
  text-align: center;
}

.timer {
  vertical-align: sub;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #b1b1b1;
  position: absolute;
  left: 20px;
  top: 0;
  transform: translateY(-50%);
}

.timers {
  vertical-align: sub;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #b1b1b1;
  position: absolute;
  right: 20px;
  top: 0;
  transform: translateY(-50%);
}

// 进度条
.p_slider {
  width: 86%;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  user-select: none;
  outline: none;
  cursor: pointer;
}

.p_slider_track {
  position: absolute;
  height: 5px;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  background-color: #7e7e7e;
}

.p_slider_fill {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #0759a9;
  left: 0;
  top: 50%;
  margin-top: -1px;
}

.p-box {
  position: relative;
  width: 100px;
  height: 100px;
  margin-top: -100px;
}

.p_slider_thumb {
  position: absolute;
  top: 100%;
  width: 15px;
  height: 15px;
  background-color: #fff;
  color: #125ed3;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: 4px solid #0fa8e0;
}

.p_slider_thumbs {
  position: absolute;
  top: 100%;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: 4px solid #2e7be1;
  opacity: 0.5;
}

.hover-time {
  position: absolute;
  top: -25px;
  background-color: #000;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
  transform: translateX(-50%);
}
</style>
