<!--课程考核-学习进度及成绩-->
<template>
  <div class="course-assess-progress">
    <div class="subtitle">
      <span>{{ $t('pages.learn.courseDetail.Learningprogressachievements') }}</span>
    </div>
    <!-- 视频 -->
    <div class="item">
      <div class="item-title">
        {{ $t('pages.learn.courseDetail.title2') }}{{ formatDuration(data.course_duration)
        }}{{ $t('pages.learn.courseDetail.Completionrate') }}{{ data.course_progress }}）
      </div>
      <div class="table">
        <div class="table-row table-row-th">
          <div class="table-cell">{{ $t('pages.learn.courseDetail.chapter') }}</div>
          <div class="table-cell w100">{{ $t('pages.learn.courseDetail.Lengthofstudy') }}</div>
          <div class="table-cell w100">{{ $t('pages.learn.courseDetail.percent') }}</div>
        </div>
        <div class="table-row-group" v-for="(item, index) in videoList" :key="index">
          <div class="table-row-group-th">{{ item.title }}</div>
          <div class="table-row" v-for="(subItem, index) in item.sections" :key="index">
            <div class="table-cell">{{ subItem.title }}</div>
            <div class="table-cell w100">{{ formatDuration(subItem.duration) }}</div>
            <div class="table-cell w100">{{ subItem.progress }}%</div>
          </div>
        </div>
        <div class="empty-data" v-if="!videoList.length">{{ $t('pages.learn.courseDetail.Nodataavailable') }}</div>
      </div>
    </div>

    <!-- 作业 -->
    <div class="item">
      <div class="item-title">
        {{ $t('pages.learn.courseDetail.subjectivequestions') }}
      </div>
      <div class="table">
        <div class="table-row table-row-th">
          <div class="table-cell">{{ $t('pages.learn.courseDetail.chapter') }}</div>
          <div class="table-cell w100">{{ $t('pages.learn.courseDetail.Submissiontime') }}</div>
          <div class="table-cell w100">{{ $t('pages.learn.courseDetail.score') }}</div>
        </div>
        <div class="table-row-group" v-for="(item, index) in homeWorkList" :key="index">
          <div class="table-row-group-th">{{ item.title }}</div>
          <div class="table-row" v-for="(subItem, index) in item.sections" :key="index">
            <div class="table-cell">{{ subItem.title }}</div>
            <div class="table-cell w100">{{ subItem.created_time || '暂无提交' }}</div>
            <div class="table-cell w100">{{ showCore(subItem.score) }}</div>
          </div>
        </div>
        <div class="empty-data" v-if="!homeWorkList.length">{{ $t('pages.learn.courseDetail.Nodataavailable') }}</div>
      </div>
    </div>
    <div class="item">
      <div class="item-title">{{ $t('pages.learn.courseDetail.Bighomework') }}</div>
      <div class="status-text">
        {{ $t('pages.learn.courseDetail.Status') }}{{ essay.status || $t('action.courseAction.none') }}
      </div>
      <div class="status-text" v-if="essay.created_time">
        {{ $t('pages.learn.courseDetail.Submissiontime') }}：{{ essay.created_time }}
      </div>
      <div class="status-text">{{ $t('pages.learn.courseDetail.score2') }}{{ showCore(essay.score) }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: { data: { type: Object, default: () => {} } },
  computed: {
    videoList() {
      return this.data.video_evaluation || []
    },
    homeWorkList() {
      return this.data.homework_evaluation || []
    },
    essay() {
      return this.data.essay_evaluation || {}
    }
  },
  methods: {
    formatDuration(duration) {
      const h = Math.floor(duration / 3600)
      const m = Math.floor((duration - h * 3600) / 60)
      const s = (duration - h * 3600 - m * 60) % 60
      function tenify(a) {
        return a >= 10 ? a : '0' + a
      }
      const to = { h: tenify(h), m: tenify(m), s: tenify(s) }
      const format = 'h:m:s'
      return format.replace(/h|m|s/g, k => to[k]).replace(/^00:/, '')
    },
    showCore(value) {
      return value !== null ? value : this.$t('action.courseAction.none')
    }
  }
}
</script>

<style lang="scss">
.course-assess-progress {
  .item {
    padding: 0.1rem 0 0.2rem;
  }
  .item + .item {
    border-top: 1px solid #c9c9c9;
  }
  .item-title {
    padding: 0.1rem 0;
    font-size: 0.16rem;
    font-weight: 700;
    color: #b49441;
  }
  .table {
    margin: 10px 0;
  }
  .table-row {
    display: flex;
  }
  .table-row-th {
    font-weight: bold;
    border-bottom: 1px solid #c9c9c9;
  }
  .table-row-group {
    .table-row {
      font-size: 12px;
      &:hover {
        background-color: #efefef;
      }
    }
  }
  .table-row-group-th {
    font-weight: bold;
    padding: 10px;
  }
  .table-cell {
    padding: 5px 10px;
    flex: 1;
    &.w100 {
      flex: 0 0 120px;
      text-align: center;
    }
  }
  .empty-data {
    padding: 20px 0;
    text-align: center;
  }
  .status-text {
    padding-left: 0.1rem;
    font-size: 0.14rem;
    color: #000000;
    line-height: 1.5;
  }
}
</style>
