<template>
  <a-card :bordered="false">
    <a-tabs :default-active-key="activeTab">
      <a-tab-pane key="1" tab="我的收藏">
        <a-card title="我的收藏题目(共5题)" :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
          <template v-for="(item, index) in 10" >
            <div :key="index">
              <DbQuestionInfoItem :questionIndex="index+1" ></DbQuestionInfoItem>
              <a-divider></a-divider>
            </div>
          </template>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="错题集">
        <a-card title="我的错题题目(共5题)" :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
          <template v-for="(item, index) in 10" >
            <div :key="index">
              <DbQuestionInfoItem :questionIndex="index+1" ></DbQuestionInfoItem>
              <a-divider></a-divider>
            </div>
          </template>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="3" tab="答题记录">
        <a-card v-for="(item, index) in 10" :key="index" style="margin-bottom: 15px;">
          <div class="flex-center" >
            <div style="flex: 1;">
              <h3>建筑施工安全培训第一期课程学习（6.8-7.8）</h3>
              <div><span style="margin-right: 20px;">答题情况：做对10/30</span><span>交卷时间：2021-06-18  12:00</span></div>
            </div>
            <div style="flex: 0 0 200px; text-align: right;">
              <div :span="24" style="margin-bottom: 10px;"><a-button type="primary" size="small" >查看报告</a-button></div>
              <div :span="24"><a-button type="primary" size="small">查看报告</a-button></div>
            </div>
          </div>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import DbQuestionInfoItem from '@/components/DbQuestionInfoItem/index.vue'

export default {
  components: { DbQuestionInfoItem },
  data () {
    return {
      activeTab: '1'
    }
  }
}
</script>

<style>

</style>
