<template>

<div class="media-player">

  <div class="ctrls">

    <el-slider
      :format-tooltip="tipsFilter"
      class="progress"
      v-model="progress"
      @change="setChange"
    />

    <div class="btns">

      <div v-if="!status" @click="goPlay" class="play-icon"></div>
      <div v-else class="pause-icon" @click="goPause"></div>

      <div class="text">回溯时间 {{current}}s / {{ duration }}s</div>
    </div>

  </div>

  <div class="video-content">
    <video
      v-if="file"
      ref="videoRef"
      @canplay="onCanplay"
      @timeupdate="onPlaying"
      @ended="onEnded"
      :controls="false"
      width="100%"
      height="100%"
    >
      <source :src="file" type="video/mp4" />
    </video>
  </div>

  <div class="footer">
    <div class="text">{{ numToStone(milestone) }}</div>
  </div>

</div>

</template>

<script lang='ts' setup>

import { numToStone } from '@/utils/tunnel'
import MediaSrc from '@/assets/medias/test.mp4'

withDefaults(defineProps<{
  file: string,
  milestone: string | number
}>(), {
  file: '',
  milestone: 0
})

const videoRef = ref<any>(null)
const duration = ref(0)
const current = ref(0)
const progress = ref(0)
const status = ref(false)

const emits = defineEmits(['close-flash'])

const tipsFilter = (e) => {
  return +(duration.value * (e / 100)).toFixed(2) + 's'
}

const setChange = (e) => {
  videoRef.value.currentTime = duration.value * (e / 100)
}

const onCanplay = () => {
  duration.value = +videoRef.value.duration.toFixed(2)
}

const onPlaying = () => {
  const { currentTime } = videoRef.value
  
  current.value = currentTime >= duration.value ? duration.value : parseInt(currentTime)
  progress.value = currentTime / duration.value * 100
}

const onEnded = () => {
  status.value = false
}

const goPlay = () => {
  if (!duration.value) {
    return ElMessage.warning('资源无法播放！')
  }
  if (progress.value === 100) {
    current.value = 0
    progress.value = 0
  }
  status.value = true
  videoRef.value.play()
  
}

const goPause = () => {
  status.value = false
  videoRef.value.pause()
}

</script>

<style lang='scss' scoped>

$base-url: '@/assets/images/event/';

.media-player {
  width: 583px;
  height: 317px;
  position: relative;
  margin-top: 42px;

  .ctrls {
    position: absolute;
    width: 100%;
    z-index: 2;
    top: -70px;
    .progress {
      transform: scale(1.33);
      width: 75%;
      margin-left: 75px;
    }
  }

  .btns {
    display: flex;
    align-items: center;
    margin-top: 5px;
    .play-icon {
      width: 20px;
      height: 20px;
      background-image: url($base-url + 'replay.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .pause-icon {
      width: 20px;
      height: 20px;
      background-image: url($base-url + 'pause.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .text {
      flex-grow: 1;
      color: white;
      font-size: 14px;
      margin-left: 10px;
    }
    :deep(.el-button) {
      width: 72px;
      height: 28px;
    }
  }

  .video-content {
    height: 285px;
    background: black;
    position: relative;
    video {
      display: block;
    }
  }

  .footer {
    height: 32px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0px;
    z-index: 2;
    background: rgba(53, 102, 156, 0.7);
    padding: 0 12px;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    color: white;
    font-size: 14px;
  }

}

</style>

<style lang="scss">

.media-player {
  .el-slider__runway {
    background-color: #1F5080;
    border-radius: 0;
  }
  .el-slider__button {
    height: 15px;
    width: 15px;
  }
  .el-slider__bar {
    background-color: #00DDFF;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .el-tooltip__trigger {
    border: solid 2px #00DDFF;
  }
}

</style>
