<template>
  <ul class="info" v-if="types == 1">
    <li class="info-item">科目：{{ detail.subjectName }}</li>
    <li class="info-item">课时：{{ detail.title }}</li>
    <li class="info-item">上课时间：{{ detail.startTime }}</li>
    <li class="info-item">下课时间：{{ detail.endTime }}</li>
    <li class="info-item">签到人数：{{ detail.answeredNum }}</li>
    <li class="info-item">题目总数：{{ detail.questionNum }}</li>
    <li class="info-item">答题总数：{{ detail.totalAnswersNum }}</li>
    <li class="info-item">课时时长：{{ detail.duration }}</li>
    <li class="info-item">总参与度：：{{ detail.participationRate }}%</li>
    <li class="info-item">班级总正确率：{{ detail.classCorrectRate }}%</li>
    <li class="info-item">已答总正确率：{{ detail.answerCorrectRate }}%</li>
    <li class="info-item">
      反馈时长：{{ setDuration(detail.consumingDuration) }}
    </li>
  </ul>
  <ul class="info" v-else-if="types == 2">
    <li class="info-item">科目：{{ detail.subjectName }}</li>
    <li class="info-item" v-if="id.length == 1">
      课时名称：{{ detail.title }}
    </li>
    <li class="info-item" v-else>课时总数：{{ id.length }}</li>
    <li class="info-item">课时时长：{{ detail.duration }}分钟</li>
    <li class="info-item">
      反馈时长：{{ setDuration(detail.consumingDuration) }}
    </li>
    <li class="info-item">题目总数：{{ detail.questionNum }}</li>
    <li class="info-item">答题总数：{{ detail.totalAnswersNum }}</li>
    <li class="info-item">班级总正确率：{{ detail.classCorrectRate }}%</li>
    <li class="info-item">已答总正确率：{{ detail.answerCorrectRate }}%</li>
    <li class="info-item">总参与度：{{ detail.participationRate }}%</li>
  </ul>
</template>
<script>
export default {
  props: {
    id: Array,
    types: Number,
    detail: Object,
  },
  methods: {
    setDuration(times) {
      let m = parseInt(times / 1000 / 60);
      let s = parseInt((times / 1000) % 60);
      let ms = times;
      let aTime;
      if (times == 0) {
        aTime = `0`;
      } else {
        if (m == 0 && s == 0) {
          aTime = `${ms}毫秒`;
        } else if (m == 0 && s != 0) {
          aTime = `${s}秒`;
        } else if (m != 0 && s != 0) {
          aTime = `${m}分${s}秒`;
        }
      }
      return aTime;
    },
  },
};
</script>
<style lang="scss" scoped>
.info {
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid #e2e2e2;
  border-top: 1px solid #e2e2e2;
  margin-bottom: 12px;

  .info-item {
    width: 25%;
    height: 50px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: #f8f8f8;
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    line-height: 50px;
    text-align: center;
  }
}
</style>
