<!--  -->
<template>
  <div class="course-statistics">
    <div
      class="statistics-box"
      v-for="(stat, index) in statisticsInfo"
      :key="index"
    >
      <div class="statistics-title">
        {{ stat.title }}
      </div>
      <div class="statistics-content">{{ stat.gain }}/{{ stat.total }}</div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  props: {
    nowCheckCourse: {
      type: Object,
      default: () => {}
    }
  },
  components: {},
  data () {
    // 这里存放数据
    return {
      statisticsInfo: [
        {
          title: '章节学习统计',
          total: 0,
          gain: 0
        },
        {
          title: '课件学习统计',
          total: 0,
          gain: 0
        },
        {
          title: '试题完成统计',
          total: 0,
          gain: 0
        },
        {
          title: '试题成绩统计',
          total: 0,
          gain: 0
        }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    disposalData () {
      this.getExercise()
      this.getSection()
      this.getExercises()
    },
    getExercise () {
      // 所有练习题

      const exercise = this.nowCheckCourse.courseInfo.exercise
      // 答对的
      const writeRight = []
      // 答错的
      const writeError = []
      // 打过的所有本试卷当前选择的试题（试题可能会被更改）
      const writeExercise =
        this.nowCheckCourse.exercise &&
        this.nowCheckCourse.exercise.filter((exer) => {
          if (exercise.indexOf(exer.exerciseId) !== -1) {
            return true
          }
          return false
        })

      writeExercise.forEach((exer) => {
        exercise.forEach((item) => {
          if (item.id === exer.exerciseId && exer.isRight) {
            writeRight.push(exer)
          } else if (item.id === exer.exerciseId && !exer.isRight) {
            writeError.push(exer)
          }
        })
      })
      this.statisticsInfo[2].total = exercise.length
      this.statisticsInfo[2].gain = writeRight.length
    },
    getSection () {
      // 章节列表
      const sectionList = this.nowCheckCourse.courseInfo.courseSectionContent
      // 记录学生学习过的课件列表
      const studyWar = this.nowCheckCourse.courseware
      // 课件课件列表
      const coursewareList = []
      // 学习完成的课件列表
      const coursewareStudyOver = []
      sectionList.forEach((section) => {
        // studyOver 用来存储学习完成的课件
        const studyOver = []
        // 遍历课件,把所有课件收集,同时遍历学习记录,寻找已完成的课件和判断已完成的章节
        section.courseware.forEach((ware) => {
          coursewareList.push(ware)
          ware.recordId = this.nowCheckCourse.id
          studyWar.forEach((item) => {
            if (item.coursewareId === ware.id) {
              ware.studyProgress = item.studyProgress
              ware.learningDuration = item.learningDuration || 0
              ware.record_wareId = item.id
              if (ware.studyProgress >= 100) {
                studyOver.push(ware)
                coursewareStudyOver.push(ware)
              }
            }
          })
          if (!ware.learningDuration) {
            ware.learningDuration = 0
          }

          // 没有学习记录的课件均为0
          if (!ware.studyProgress) {
            ware.studyProgress = 0
          }
        })
        if (section.courseware.length === studyOver.length) {
          section.studyOver = true
          this.statisticsInfo[0].gain++
        } else {
          section.studyOver = false
          if (this.nowCheckCourse.studyProgress === 3) {
            section.studyOver = true
          }
        }
      })

      this.statisticsInfo[0].total = sectionList.length
      this.statisticsInfo[1].total = coursewareList.length
      this.statisticsInfo[1].gain = coursewareStudyOver.length
    },
    getExercises () {
      this.statisticsInfo[3].gain = this.nowCheckCourse.exerciseGrade
      this.nowCheckCourse.exercise.forEach((item) => {
        if (item.questionScore === item.score) {
          this.statisticsInfo[2].gain++
        }
      })
      this.statisticsInfo[2].total =
        this.nowCheckCourse.courseInfo.exercise.length

      this.statisticsInfo[3].total =
        this.nowCheckCourse.courseInfo.exercise.reduce((prev, item) => {
          return prev + item.score
        }, 0)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.disposalData()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeUnmount () {}, // 生命周期 - 销毁之前
  unmounted () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.course-statistics {
  display: flex;
  flex-wrap: wrap;
  margin: 15px 0 15px 5px;

  .statistics-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-right: 20px;
  }
  .statistics-title {
    font-weight: 700;
  }
  .statistics-content {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #4cacd5;
    border-radius: 50%;
    margin: 10px;
    font-size: 20px;
    color: #4cacd5;
    font-weight: 700;
  }
}
</style>
