<template>
  <div class="detail">
    <div class="detail-rich">
      <div class="h1">一、最终成绩计算</div>
      <div class="p">美方课程最终成绩请参考每学期初教务邮箱老师发到大家邮箱中的课程考核大纲进行计算。</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>
