<!--课程考核-->
<template>
  <div class="course-assess-standard" v-if="data.course_evaluation || checkList.length">
    <div class="subtitle">
      <span>{{ $t('pages.learn.courseDetail.Courseassessmentstandard') }}</span>
    </div>
    <div v-html="data.course_evaluation" v-if="data.course_evaluation"></div>
    <template v-else>
      <div class="item">
        <h2 class="item-title">一、最终成绩计算</h2>
        <!-- 中方课程 -->
        <p v-if="course.course_check_type === 1">
          <template v-for="(item, index) in checkList">
            <span :key="index">{{ index ? '+' : '' }}{{ item.name }}得分*{{ item.percent }}%</span>
          </template>
          = 该门课程总得分，满分100分，低于{{ data.course_check_pass_score }}分为不及格，需重修此门课程。
        </p>
        <!-- 美方课程 -->
        <p v-else>美方课程最终成绩请参考每学期初教务邮箱老师发到大家邮箱中的课程考核大纲进行计算。</p>
        <v-chart class="chart" :option="option" :autoresize="true" />
      </div>
      <div class="item">
        <h2 class="item-title">二、具体细则</h2>
        <div v-for="(item, index) in checkList" :key="index">
          <div class="item-subtitle">{{ `${item.name} 总分${item.score}分（占科目总成绩的${item.percent}%）` }}</div>
          <div v-html="item.content"></div>
        </div>
      </div>
    </template>
  </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: { course: { type: Object, default: () => {} }, data: { type: Object, default: () => {} } },
  components: { VChart },
  data() {
    return {}
  },
  computed: {
    checkList() {
      const checkList = this.data.course_check || []
      return checkList.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 lang="scss" scoped>
.chart {
  height: 300px;
}
.course-assess-standard {
  .item-title {
    margin: 0;
    font-size: 0.16rem;
    font-weight: 700;
    color: #313131;
    line-height: 0.38rem;
  }
  .item-subtitle {
    font-size: 0.14rem;
    font-weight: 700;
    color: #313131;
    line-height: 0.3rem;
    margin-top: 10px;
  }
  ::v-deep p {
    padding: 5px 0;
  }
  ::v-deep img {
    display: block;
    margin: 0 auto;
    max-width: 100% !important;
  }
}
</style>
