<!--课程考核-->
<template>
  <div class="course-assess" v-loading="loading">
    <h1 class="title">
      {{ $t('pages.learn.courseDetail.Finalresult') }}
      <template v-if="data.course_score"> {{ data.course_score }}{{ $t('pages.learn.courseDetail.point') }} </template>
      <template v-else>{{ $t('pages.learn.courseDetail.no') }}</template>
    </h1>
    <div>
      <div class="subtitle">
        <span>{{ $t('pages.learn.courseDetail.Courseassessmentstandard') }}</span>
      </div>
      <div class="p">本课程的成绩评估由录播课程、课堂直播讨论和课后作业三部分构成。</div>
      <table style="width: 100%" border="1">
        <tr align="left">
          <th>评估方法</th>
          <th>在总分中的权重</th>
        </tr>
        <tr>
          <td>录播课程</td>
          <td>10%</td>
        </tr>
        <tr>
          <td>课堂直播讨论</td>
          <td>10%</td>
        </tr>
        <tr>
          <td>课后作业</td>
          <td>80%</td>
        </tr>
      </table>
      <div class="p">
        <b>录播课程（10%）：</b
        >要求学生按照进度观看全部录播课程视频，并认真学习课程内容做好笔记（系统会自动统计观看进度，观看完毕后自动记分）。
      </div>
      <div class="p">
        <b>课堂讨论（10%）：</b
        >直播课希望所有的学生都能全程参与每一节课程并积极参与讨论和发言。学生应准时上课，不因迟到、早退和频繁进出直播间而扰乱课堂秩序。如有特殊情况，例如身体不适和紧急事件，学生应与讲师或助教联系(优先通过邮件)，并做相应的解释和说明。请尽可能提前告知，如不能则应在缺勤后第一时间告知。如果在没有合理理由的情况下缺勤，讲师将扣掉一部分课堂表现分值。
      </div>
      <div class="p">
        <b>论述题作业（80%）：</b
        >本门课程作业请详见课程资料中的作业清单AssignmentChecklist，要求请按系统内规定时间提交，如迟交的作业起评分为90%。
      </div>
      <div class="p">本课程采用百分制计分即录播课程成绩+课堂直播讨论成绩+课后作业</div>
      <table style="width: 100%" border="1">
        <tr align="left">
          <th>百分比</th>
          <th>成绩等级</th>
          <th>学分</th>
        </tr>
        <tr>
          <td>100%-96%</td>
          <td>A</td>
          <td>3</td>
        </tr>
        <tr>
          <td>95%-90%</td>
          <td>A-</td>
          <td>3</td>
        </tr>
        <tr>
          <td>89%-85%</td>
          <td>B+</td>
          <td>3</td>
        </tr>
        <tr>
          <td>84%-80%</td>
          <td>B</td>
          <td>3</td>
        </tr>
        <tr>
          <td>79%以下</td>
          <td>C</td>
          <td>0</td>
        </tr>
      </table>
      <div class="p">B成绩以上合格获得3个学分</div>
      <div class="p" style="color: red"><b>课后作业一定按时完成！成绩不及格，需缴费重修此门课程。</b></div>
    </div>
    <!-- <course-assessment-standard :data="data" v-bind="$attrs" v-if="data.course_check" /> -->
    <course-assessment-progress :data="data" />
  </div>
</template>

<script>
import * as api from '@/api/course'

import CourseAssessmentStandard from './CourseAssessmentStandard'
import CourseAssessmentProgress from './CourseAssessmentProgress'
export default {
  components: { CourseAssessmentStandard, CourseAssessmentProgress },
  data() {
    return {
      loading: false,
      data: {}
    }
  },
  computed: {
    sid() {
      return this.$route.params.sid
    },
    cid() {
      return this.$route.params.cid
    }
  },
  methods: {
    getData() {
      this.loading = true
      api
        .getCourseAssess(this.sid, this.cid)
        .then(res => {
          this.data = res
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  beforeMount() {
    this.getData()
  }
}
</script>

<style lang="scss">
.course-assess {
  padding: 20px;
  background-color: #fff;
  .title {
    font-size: 0.2rem;
    text-align: center;
  }
  .subtitle {
    position: relative;
    width: 300px;
    margin: 40px auto 20px;
    text-align: center;
    span {
      padding: 0 20px;
      position: relative;
      display: inline-block;
      background-color: #fff;
    }
    &::before {
      position: absolute;
      left: 0;
      top: 50%;
      right: 0;
      content: '';
      height: 1px;
      background-color: #000;
      transform: translateY(50%);
    }
  }
  .p {
    font-size: 0.14rem;
    color: #313131;
    line-height: 1.5;
    text-align: justify;
    margin: 10px 0;
  }

  th,
  td {
    padding: 5px;
  }
}
</style>
