<template>
  <div class="exam-detail">
    <div class="answer-card">
      <a-card :bordered="false">
        <div class="answer-card-title"><a-icon type="arrow-left" style="margin-right: 6px;" />答题卡</div>
        <div class="answer-cart-time">
          倒计时:
          <b style="margin-left: 5px;"><a-statistic-countdown :value="deadline" :valueStyle="{ fontSize: '16px' }" @finish="onFinish"/></b>
        </div>
        <DbAnswerCard :pref="$refs"></DbAnswerCard>
        <div class="answer-cart-footer flex-center">
          <a-button type="primary" size="large">交卷</a-button>
        </div>
      </a-card>
    </div>
    <div class="exam-line"></div>
    <div class="exam-box">
      <a-card :bordered="false" ref="question">
        <div class="exam-title">建筑施工安全培训第一期课程学习(模拟考试)</div>
        <div class="exam-main">
          <template>
            <div class="sub-title">一、单选题（共30题，每题1.5分，共45分）</div>
            <DbQuestionItem
              :id="`type1-${index}`"
              :index="index + 1"
              :type="1"
              v-for="(item, index) in 5"
              :key="`type1-${index}`"
            ></DbQuestionItem>
          </template>
          <template>
            <div class="sub-title">二、多选题（共10题，每题1.5分，共15分）</div>
            <DbQuestionItem
              :id="`type2-${index}`"
              :index="index + 1"
              :type="2"
              v-for="(item, index) in 5"
              :key="`type2-${index}`"
            ></DbQuestionItem>
          </template>
          <template>
            <div class="sub-title">三、判断题（共10题，每题1.5分，共15分）</div>
            <DbQuestionItem
              :id="`type3-${index}`"
              :index="index + 1"
              :type="3"
              v-for="(item, index) in 5"
              :key="`type3-${index}`"
            ></DbQuestionItem>
          </template>
          <template>
            <div class="sub-title">四、填空题（共10题，每题1.5分，共15分）</div>
            <DbQuestionItem :index="index + 1" :type="4" v-for="(item, index) in 5" :key="`type4-${index}`"></DbQuestionItem>
          </template>
          <template>
            <div class="sub-title">五、简答题（共10题，每题1.5分，共15分）</div>
            <DbQuestionItem :index="index + 1" :type="5" v-for="(item, index) in 5" :key="`type5-${index}`"></DbQuestionItem>
          </template>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import DbQuestionItem from '@/components/DbQuestionItem/index'
import DbAnswerCard from '@/components/DbAnswerCard/index'
export default {
  components: {
    DbQuestionItem,
    DbAnswerCard
  },
  data() {
    return {
      deadline: Date.now() + 1000 * 60 * 60 * 1.5
    }
  },
  methods: {
    // 考试倒计时结束
    onFinish() {}
  }
}
</script>

<style lang="less" scoped>
.exam-detail {
  display: flex;
  max-height: 100%;
  .exam-box {
    flex: 1;
  }

  .exam-line {
    flex: 0 0 10px;
  }
  .answer-card {
    flex: 0 0 400px;
  }
}

.exam-title {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0;
  border-bottom: 1px solid #c3c3c3;
  text-align: center;
}

.exam-main {
  padding-right: 50px;
}

.sub-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-top: 10px;
}

.answer-card-title {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  border-bottom: 1px solid #c3c3c3;
  padding-bottom: 10px;
}

.answer-cart-time {
  font-size: 14px;
  color: #333;
  padding: 10px 0;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
