<!--  -->
<template>
  <div class="course-study" ref="studybox">
    <!-- <span>开始学习</span> -->
    <div class="course-study-header">
      <span>课件名称：{{ nowStudyCourseware.name }}</span>
      <span>课件要求学习时长：{{ nowStudyCourseware.studyTime }}分钟</span>
      <span
        >课件已经学习时长：<i v-if="studyTIme_minute"
          >{{ studyTIme_minute }}分钟</i
        ><i>{{ studyTIme_seconds }}秒</i></span
      >
      <el-progress
        :percentage="studyProgress"
        style="width: 50%; display: flex; align-items: center"
      ></el-progress>
      <div class="quanping">
        <el-tooltip class="item" effect="dark" content="全屏" placement="top">
          <div
            @click="fullscreen(true)"
            class="i-j-jxzb-quanping"
            v-if="!this.isFullscreen"
          ></div>
          <div @click="fullscreen(false)" class="unquanping-text" v-else>
            退出全屏
          </div>
        </el-tooltip>
      </div>
    </div>

    <div class="course-study-perview">
      <perview
        :timeline="nowStudyCoursewar?.canSpeed"
        :resource="nowStudyCourseware.info"
      ></perview>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import perview from '@/components/business/Preview.vue'
import { updateCourewareAPI } from '@/api/online-course/my-course'
export default {
  // import引入的组件需要注入到对象中才能使用
  props: {
    nowStudyCourseware: {
      default: () => {}
    },
    baseCourseForm: {
      default: () => {}
    }
  },
  components: { perview },
  data () {
    // 这里存放数据
    return {
      needTime: 0,
      studyTIme_all: 0,
      studyTIme_seconds: 0,
      timeFunction: null,
      submitTimeFunction: null,
      isSuspend: false,
      studyTIme_minute: 0,
      isFirstAlert: true,
      isFullscreen: false
    }
  },
  computed: {
    studyProgress () {
      const studyProgress = this.needTime
        ? parseInt((this.studyTIme_all / this.needTime) * 100)
        : 100

      return studyProgress > 100 ? 100 : studyProgress
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getInfoTIme () {
      this.studyTIme_minute = parseInt(this.studyTIme_all / 60)

      this.studyTIme_seconds = Math.floor(this.studyTIme_all % 60) || 0
    },
    submitTime () {
      this.submitTimeFunction = setInterval(async () => {
        const studyProgress = this.needTime
          ? parseInt((this.studyTIme_all / this.needTime) * 100)
          : 100

        this.nowStudyCourseware.studyProgress = studyProgress
        // 取消课程分数后的修改
        let score = 0
        // this.baseCourseForm.courseSectionContent.forEach((sec) => [
        //   sec.courseware.forEach((ware) => {
        //
        //     score += parseInt(
        //       (ware.percentage / 100) *
        //         this.baseCourseForm.grade *
        //         (ware.studyProgress / 100)
        //     )
        //   })
        // ])
        let isAllOver = true
        this.baseCourseForm.courseSectionContent.forEach((sec) => {
          sec.courseware.forEach((ware) => {
            if (ware.studyProgress < 100) {
              isAllOver = false
            }
          })
        })
        if (score >= this.nowStudyCourseware.grade) {
          score = this.nowStudyCourseware.grade
          this.baseCourseForm.courseSectionContent.forEach((sec) => {
            sec.studyOver = true
          })
          if (this.isFirstAlert) {
            this.alertUser('当前课程学习已结束，可选择其他课程学习！')
            this.isFirstAlert = false
            this.$emit('courseWareStudyOver')
          }
        }
        if (studyProgress >= 100 && this.isFirstAlert) {
          this.alertUser('当前课件学习已结束，可选择其他课件继续学习！')
          this.isFirstAlert = false
          this.$emit('courseWareStudyOver')
        }
        const submitData = {
          id: this.nowStudyCourseware.record_wareId,
          recordId: this.nowStudyCourseware.recordId,
          coursewareId: this.nowStudyCourseware.id,
          courseStudyOver: isAllOver ? 3 : 2,
          studyProgress: studyProgress > 100 ? 100 : studyProgress,
          // 取消课程分数后的修改
          score,
          learningDuration: this.studyTIme_all
        }
        studyProgress > 100 && (this.studyProgress = 100)
        const res = await updateCourewareAPI(submitData)
        this.$set(this.nowStudyCourseware, 'record_wareId', res.data.id)
      }, 2000)
    },
    alertUser (mess) {
      this.$message.success(mess)
    },
    fullscreen (isFullscreen) {
      const element = this.$refs.studybox
      if (isFullscreen) {
        element.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
      element.onfullscreenchange = () => {
        this.isFullscreen = !this.isFullscreen
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.needTime = this.nowStudyCourseware.studyTime * 60
    // let studyTime = this.nowStudyCourseware.
    this.studyTIme_all = this.nowStudyCourseware.learningDuration
    this.getInfoTIme()
    this.timeFunction = setInterval(() => {
      if (this.isSuspend) return
      if (this.studyTIme_seconds >= 59) {
        this.studyTIme_seconds = 0
        this.studyTIme_minute++
      } else {
        this.studyTIme_seconds++
      }
      this.studyTIme_all++
    }, 1000)
    this.submitTime()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  beforeDestroy () {
    clearInterval(this.submitTimeFunction)
    clearInterval(this.timeFunction)
  },
  updated () {}, // 生命周期 - 更新之后
  beforeUnmount () {}, // 生命周期 - 销毁之前
  unmounted () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.course-study {
  padding: 0 20px;
  width: 100%;
  background-color: aliceblue;
  margin-top: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .course-study-perview {
    // height: 100%;
    flex: 1;
  }
  i {
    font-style: normal;
  }
  .course-study-header {
    display: flex;

    flex-wrap: wrap;
    align-items: center;
    > span {
      margin-right: 20px;
    }
  }

  .quanping {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    padding: 3px;
  }
  .i-j-jxzb-quanping {
    cursor: pointer;
  }
  .i-j-jxzb-quanping:hover {
    color: $--color-primary;
  }
  .unquanping-text {
    cursor: pointer;
    color: $--color-primary;
  }
  .unquanping-text:hover {
    opacity: 0.5;
  }
}
</style>
