<template>
  <div>
    <el-card>
      <div slot="header" style="cursor: pointer">
        <span style="font-size: 16px; font-weight: 800" @click="handleBack">
          <i class="el-icon-back" style="margin-right: 5px; font-size: 16px; font-weight: 800"></i>
          <span>返回</span>
          <span style="margin-left: 15px">{{ params.learnContent }}</span>
        </span>
      </div>
      <!-- 视频学习 -->
      <div v-if="params.isVideo">
        <video
          v-if="params.isVideo"
          ref="video"
          :src="`${lookMinioUrl + '/' + params.studyUrl}`"
          controls
          style="width: 100%; height: 100%"
          @timeupdate="updateTime"
        ></video>
      </div>

      <!-- 文件学习 -->
      <div v-else>
        <el-row :gutter="20" v-if="fileTime > 0 && this.params.studyProgress != 100">
          <el-col :span="24">
            <div style="margin-bottom: 10px;">剩余学习时长：{{ fileTime }}</div>
          </el-col>
        </el-row>
        <div style="width: 100%; height: 70vh">
          <bnsKkFilePreview :items="filePreview" look-type="minio"></bnsKkFilePreview>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import bnsKkFilePreview from '@/components/pro-tabs/bns-kkFile-preview'
import { updateProgress } from '@/api/educTrainLearn'
import { lookMioIoFile } from '@/utils/bonus'

export default {
  props: {
    params: {
      type: Object,
      default: () => {
        return {
          isVideo: false, // 是否是视频
          studyUrl: '', // 学习地址
          videoInitialTime: 0, // 视频初始时间
          learnContent: '', // 学习内容
          learnDuration: 0, // 学习时长
        }
      },
    },
  },
  components: { bnsKkFilePreview },
  name: 'StudyTemplate',
  data() {
    return {
      lookMinioUrl: lookMioIoFile(),
      videoProgress: 0, // 视频进度
      videoTime: 0, // 视频时间
      fileTime: 30, // 文件学习时长
      filePreview: {
        filePreviewUrl: '', // 文件预览地址
        fileName: '', // 文件名称
      },
      item: {},
      isStudy: false,
      inter: null,
    }
  },
  created() {
    console.log('🚀 ~ created ~ this.params:', this.params)
    this.item = this.params.item
    if (!this.params.isVideo) {
      this.filePreview.filePreviewUrl = this.params.studyUrl
      this.filePreview.fileName = this.params.learnContent
      if (this.params.studyProgress != 100) {
        this.handleFileTime()
      }
    }
    console.log('==========🚀 ~ created ~ this.filePreview:', this.filePreview)
  },
  mounted() {
    if (this.params.isVideo) {
      this.$refs.video.currentTime = this.params.videoInitialTime
      if (this.params.studyProgress == 100) {
        this.isStudy = true
      }
    }
  },
  methods: {
    handleBack() {
      if (this.params.isVideo) {
        // 暂停视频
        this.$refs.video.pause()
        if (!this.isStudy) {
          this.updateProgress()
        }
      }
      if (this.inter) {
        clearInterval(this.inter)
      }
      setTimeout(() => {
        this.$emit('backDetail', this.item)
      }, 100)
    },
    updateTime() {
      // 不保留小数, 将时间转换为整数
      this.videoTime = Math.round(this.$refs.video.currentTime)
      console.log('🚀 ~ updateTime ~ this.videoTime:', this.videoTime)
      if (this.videoTime == Number(this.params.duration)) {
        if (this.isStudy) return
        this.isStudy = true
        // 提示 学习完成
        setTimeout(() => {
          this.$message.success('学习完成')
          this.updateProgress()
        }, 1000)
      }
    },
    // 文件学习倒计时
    handleFileTime() {
      console.log('🚀 ~ handleFileTime ~ 文件学习倒计时')
      this.inter = setInterval(() => {
        this.fileTime--
        if (this.fileTime <= 0) {
          clearInterval(this.inter)
          this.updateProgress()
          this.$message.success('学习完成')
        }
        // console.log('🚀 ~ int ~ this:', this.fileTime)
      }, 1000)
    },
    // 更新学习进度
    async updateProgress() {
      console.log('🚀 ~ updateProgress ~ 更新学习进度', this.item)
      // 计算进度
      this.videoProgress = Math.round((this.videoTime / this.params.learnDuration) * 100)
      console.log('🚀 ~ .进度:', this.videoProgress)
      const params = {
        type: this.params.type,
        studyTaskId: this.item.id,
        coursewareId: this.params.id,
        userId: this.item.userId,
        fileTime: this.params.isVideo ? this.videoTime : 30,
        studyProgress: this.params.isVideo ? this.videoProgress : 100,
        taskLength: this.params.taskLength,
        singId: this.params.singId,
      }
      console.log('🚀 ~ updateProgress ~ params:', params)
      const res = await updateProgress(params)
      console.log('🚀 ~ updateProgress ~ res:', res)
    },
  },
}
</script>

<style lang="scss" scoped>
.row-item {
  margin-bottom: 20px;
}
video::-webkit-media-controls-timeline {
  display: none;
}
video::-webkit-media-controls {
  --video-progress-bar-display: none;
}
</style>
