<!--课程考核-->
<template>
  <div class="course-assess" v-loading="loading">
    <h1 class="title">
      {{ $t('pages.learn.courseDetail.Finalresult') }}
      <template v-if="data.grade">{{ course.grade }}</template>
      <template v-else>{{ $t('pages.learn.courseDetail.no') }}</template>
    </h1>
    <course-assessment-standard :data="data" :course="course" v-bind="$attrs" />
    <course-assessment-progress :data="data" />
  </div>
</template>

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

import CourseAssessmentStandard from './CourseAssessmentStandard'
import CourseAssessmentProgress from './CourseAssessmentProgress'
export default {
  props: { course: { type: Object, 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%);
    }
  }
}
</style>
