<template>
  <el-dialog
    title="视频下载"
    :visible.sync="dialogVisible"
    width="600px"
    :modal-append-to-body="false">
    <div class="content">
      <h5>{{ videoDetail.title }}</h5>
      
      <div class="mt20" v-if="videoDetail.downloadStatus === 0">
        <el-button type="primary" size="small" @click="tranCode">开始转码</el-button>
        <p class="blue">转码完成后，即可下载MP4格式视频</p>
        <p>转码将合并该直播所有回放片段，直播时间越长，转码时间越长</p>
      </div>
      <div v-else-if="videoDetail.downloadStatus === 1">
        <div class="mt20" v-for="(item,index) in downList" :key="index">
          <el-progress :text-inside="true" :stroke-width="16" :percentage="item.progress" text-color="#fff"></el-progress>
          <p class="blue">转码完成后，即可下载MP4格式视频</p>
          <p>转码将合并该直播所有回放片段，直播时间越长，转码时间越长</p>
        </div>
      </div>
      <div v-else-if="videoDetail.downloadStatus === 2">
        <div class="mt20" v-for="(item,index) in videoDownloadList" :key="index">
          <el-progress :text-inside="true" :stroke-width="16" :percentage="100" text-color="#fff"></el-progress>
          <p class="blue">已完成转码，可点击下载MP4格式视频</p>
          <p class="blue" v-if="videoDownloadList.length > 1">(由于该直播暂停时长超过了30分钟，生产了2段视频，需分别下载。)</p>
          <el-button type="primary" v-loading="videoDownloadList[`loading${index}`]" size="small" @click="toDownLink(item, index, videoDownloadList.length)">开始下载</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { liveProcess, videoDownload, videoDownProgress } from "@/api/videoLive"
export default {
  props: {
    videoDetail: {
      type: Object,
      default: ()=>{}
    }
  },
  data() {
    return {
      downloadStatusOption: ['未转码，转码成功后即可下载','正在转码中，请稍等，转码成功后即可下载'],
      dialogVisible: false,
      videoDownloadList: [],
      downList: [],
      time: null,
    }
  },
  watch: {
    dialogVisible (val){
      if(val) {
        if(this.videoDetail.downloadStatus === 2) {
          this.getVideoDownload()
        } else if(this.videoDetail.downloadStatus === 1){
          this.time = setInterval(()=>{
            this.videoDownProgress()
          }, 5000)
        } 
      } else {
        clearInterval(this.time)
      }
    }
  },
  destroyed() {
    clearInterval(this.time)
  },
  methods: {
    async tranCode() {
      let ret = await liveProcess({videoId: this.videoDetail.id}).catch(()=>{})
      if(ret.code === 0) {
        this.$message({
          type: 'success',
          message: '已开始转码!'
        });
        this.downList = ret.data ? ret.data :[]
        this.$emit('updateTranStatus',1)
        clearInterval(this.time)
        this.time = setInterval(()=>{
          this.videoDownProgress()
        }, 5000)
      }
    },
    async videoDownProgress() {
      let ret = await videoDownProgress({videoId: this.videoDetail.id})
      if(ret.code === 0 && ret.data) {
        this.downList = ret.data ? ret.data :[]
        let progressArr = this.downList.map(item=> item.progress === 100)
        if(!progressArr.includes(false)){
          this.$emit('updateTranStatus',2)
          this.getVideoDownload()
        }
      }
    },
    async getVideoDownload() {
      let ret = await videoDownload({videoId: this.videoDetail.id}).catch(()=>{})
      if(ret.code === 0) {
        this.videoDownloadList = ret.data
      }
    },
    toDownLink(link, index, videoLength) {
      try {
        this.$set(this.videoDownloadList, `loading${index}`, true)
        const fileName=`${this.videoDetail.title}${videoLength === 1 ? '' : index+1}.mp4`
        const fileUrl=link
        const request=new XMLHttpRequest()
        request.responseType='blob'
        request.open('Get',fileUrl)
        request.onload=()=>{
          const url=window.URL.createObjectURL(request.response)
          const a=document.createElement('a')
          document.body.appendChild(a)
          a.href=url
          a.download=fileName
          a.click()
          this.$set(this.videoDownloadList, `loading${index}`, false)
        }
        request.send()
      } catch (error) {
        this.$set(this.videoDownloadList, `loading${index}`, false)
      }
      
    }
  },
}
</script>
<style scoped lang="scss">
  .content{
    padding:  0 50px;
    text-align: center;
    h5{
      margin: 0 0 20px 0;
      text-align: center;
      font-size: 18px;
    }
    .mt20 {
      margin-top: 20px;
    }
    .blue{
      color: #1890ff;
    }
    p{
      font-size: 14px;
      line-height: 18px;
    }
    .flex{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>