<template>
  <div class="detail">
    <div class="detail-rich">
      <div class="h1">一、最终成绩计算</div>
      <div class="p">
        <template v-for="(item, index) in checkList">
          <span :key="index">{{ index ? '+' : '' }}{{ item.name }}得分*{{ item.percent }}%</span>
        </template>
        = 该门课程总得分，满分100分，低于{{ data.course_check_pass_score }}分为不及格，需重修此门课程。
      </div>
      <v-chart class="chart" :option="option" :autoresize="true" />
    </div>
    <div class="detail-rich">
      <div class="h1">二、具体细则</div>
      <template v-for="(item, index) in checkList">
        <div :key="index">
          <div class="h2">{{ `${item.name} 总分${item.score}分（占科目总成绩的${item.percent}%）` }}</div>
          <template v-if="item.key === 'video'">
            <div class="p">课程视频观看完成度：以后台数据统计为准，全部看完视频满分100分。</div>
            <div class="em">
              注：视频观看考核的是实际播放时长，不是进度条的显示状态，进度条满格并不一定表示观看完这个视频。以下方每日学习时长为准。
            </div>
          </template>
          <template v-if="item.key === 'week_report'">
            <div class="p">报告作业总分{{ item.score }}分，报告得分以老师批改的分数为准。</div>
            <div class="p">课程反馈建设性问题老师可酌情加分，每周的课程提问加分以老师批改的分数为准。</div>
          </template>
          <div class="p" v-if="item.key === 'week_test'">
            本课程所有测试的平均正确率*{{ item.score }}分*占总成绩{{ item.percent }}%=此项得分
          </div>
          <div class="p" v-if="item.key === 'essay'">结业大作业满分为{{ item.score }}分，以老师批改的分数为准。</div>
          <div class="p" v-if="item.key === 'attendance'">
            互动课出勤满分{{ item.score }}分，以老师每次导出的参会记录进行打分。
          </div>
          <div class="p" v-if="item.key === 'question'">
            课程提问满分{{ item.score }}分， 老师根据提问情况酌情给分。
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])
export default {
  props: { data: { type: Object, default: () => {} } },
  components: { VChart },
  data() {
    return {}
  },
  computed: {
    checkList() {
      return this.data.course_check.filter(item => parseInt(item.percent))
    },
    option() {
      const data = this.checkList.map(item => {
        return { name: item.name, value: item.percent }
      })
      return {
        tooltip: { trigger: 'item', formatter: '{a} <br/>{b} 占比{c}%' },
        series: [{ name: '课程考核', type: 'pie', data }]
      }
    }
  }
}
</script>

<style scoped>
.chart {
  height: 300px;
}
</style>
