<template>
  <div class="timeInput-max-big-box">
    <div class="time-display">
      <span>{{ formattedHours }}</span>:
      <span>{{ formattedMinutes }}</span>:
      <span>{{ formattedSeconds }}</span>
    </div>
    <div class="time-input-box">
      <input
        class="time-input"
        type="range"
        v-model="progress"
        :max="totalSeconds"
        min="0"
        @input="updateTimeDisplay"
        @change="handleDragEnd"
      >
    </div>
    <p class="icon-play-button" @click="videoTypeButton()"
       :class="playType?'el-icon-video-play':'el-icon-video-pause'"></p>
  </div>
</template>

<script>
  // 参数1转时间戳（ISO格式转毫秒）
  const param1ToTimestamp = (datetimeStr) => {
    return new Date(datetimeStr).getTime();
  };

  // 参数2转时间戳（秒转毫秒）
  const param2ToTimestamp = (seconds) => {
    return seconds * 1000;
  };

  // 总时间戳转回ISO格式
  const timestampToISO = (timestamp) => {
    const date = new Date(timestamp);
    const pad = (n) => n.toString().padStart(2, '0'); // 补零函数‌:ml-citation{ref="3" data="citationList"}

    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` +
      `T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
  };
  export default {
    data() {
      return {
        totalSeconds: 0,   // 总秒数（进度条最大值）
        progress: 0,       // 当前进度（秒数）
        playType: false,
        timer: null,
        startTime:null,
        endTime:null,
      }
    },
    computed: {
      // 格式化小时（补零）
      formattedHours() {
        return Math.floor(this.progress / 3600).toString().padStart(2, '0')
      },
      // 格式化分钟（补零）
      formattedMinutes() {
        return Math.floor((this.progress % 3600) / 60).toString().padStart(2, '0')
      },
      // 格式化秒数（补零）
      formattedSeconds() {
        return (this.progress % 60).toString().padStart(2, '0')
      }
    },
    methods: {
      /**
       * 初始化方法
       * @param {string} startTime - ISO格式开始时间
       * @param {string} endTime - ISO格式结束时间
       */
      init(startTime, endTime) {
        this.$set(this,'startTime',startTime);
        this.$set(this,'endTime',endTime);
        const start = new Date(startTime)
        const end = new Date(endTime)
        const diff = end.getTime() - start.getTime()
        this.totalSeconds = Math.floor(diff / 1000)
        this.progress = 0
        this.timeFunction()
      },
      /**
       * 更新时间显示（处理拖动时的值变化）
       */
      updateTimeDisplay() {
        // 保证进度值在合法范围内
        this.progress = Math.min(Math.max(this.progress, 0), this.totalSeconds)
      },
      // 拖动方法
      handleDragEnd() {
        if(!this.timer){
          this.$parent.playbackResume();
          this.timeFunction()
          this.$set(this, 'playType', false)
        }
        this.$parent.seeTo(this.calculateFinalTime(this.startTime,this.progress),this.endTime)
      },
      //播放/暂停调用
      videoTypeButton() {
        if (this.playType) {
          //恢复
          this.$parent.playbackResume();
          this.timeFunction()
          this.$set(this, 'playType', !this.playType)
        } else {
          //暂停
          this.$parent.playbackPause();
          window.clearInterval(this.timer)
          this.$set(this, 'timer', null)
          this.$set(this, 'playType', !this.playType)
        }
      },
      //时间定时器
      timeFunction() {
        let self = this
        this.timer = window.setInterval(showTime, 1000)
        function showTime() {
          if (self.progress < self.totalSeconds) {
            self.progress++
          } else {
            self.$parent.seeTo(self.startTime,self.endTime)
            self.$set(self, 'progress', 0)
          }
        }
      },
      //拖动计算
      calculateFinalTime(param1, param2) {
        // 转换时间戳并相加
        const totalTimestamp = param1ToTimestamp(param1) + param2ToTimestamp(param2)
        // 转回目标格式
        return timestampToISO(totalTimestamp)
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.timer)
      this.$set(this, 'timer', null)
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.timer)
      this.$set(this, 'timer', null)
    }
  }
</script>

<style scoped>
  .timeInput-max-big-box {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    width:100%;
    /*width: 379px;*/
    height: 40px;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
  }
  .time-input-box {
    margin-top: 1px;
    flex: 1;
    display: flex;
  }
  .time-input {
    flex: 1;
    /*width:220px;*/
  }
  .time-display {
    padding: 0 10px;
    margin-top: 10px;
    font-size: 16px;
    color: #fff;
  }
  .icon-play-button {
    cursor: pointer;
    font-size: 22px;
    color: #E0E0E0;
    margin: 9px 10px 0 10px;
  }
  .icon-play-button:hover {
    color: #0183FA;
  }
</style>
