<template>
  <div class="report-box">
    <a-row :gutter="30">
      <a-col :span="24">
        <a-card title="得分统计" :bordered="false">
          <a-row :gutter="30" style="margin: 15px 0;">
            <a-col :span="12" class="flex-center">
              <a-progress
                type="circle"
                :percent="data.score / (data.totalScore * 100)"
                :format="percent => `${percent} 分`"
              />
            </a-col>
            <a-col class="count-info" :span="12">
              <div>
                共{{ data.totalQuestions }}道题，答对{{ data.rightQuestions }}道。总用时{{
                  data.answerTime
                }}分钟
              </div>
              <div>已击败考生{{ data.beat }}%的考生</div>
              <div>全站平均得分{{ data.avgScore }}分</div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <!-- <a-divider type="vertical" /> -->
      <!-- <a-col :span="12">
        <a-card title="答题分析" :bordered="false">
          <a-table :columns="columns" :data-source="dataList" size="small" :pagination="false" :bordered="false">
            <span slot="action" slot-scope="text, record">
              <a-button type="primary" size="small">我要练习</a-button>
            </span>
          </a-table>
        </a-card>
      </a-col> -->
      <a-col :span="24" style="margin-top: 15px;">
        <a-card title="答题卡" :bordered="false">
          <ul class="answer-box">
            <li
              :class="['flex-center', {'is-right': item.answerType === 1}]"
              v-for="(item, index) in data.reportItems"
              :key="index"
            >
              {{ index + 1 }}
            </li>
          </ul>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      columns: [
        {
          key: 'name',
          dataIndex: 'name',
          title: '题目类型'
        },
        {
          key: '正确率',
          dataIndex: 'percent',
          title: 'percent'
        },
        {
          title: '答题情况',
          dataIndex: 'info',
          key: 'info'
        },
        {
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataList: [
        { id: 1, name: '单选题', percent: '30.33%', info: '3/10' },
        { id: 2, name: '判断题', percent: '30.33%', info: '3/10' },
        { id: 3, name: '多选题', percent: '30.33%', info: '3/10' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-card-head {
  padding-left: 0 !important;
}

.count-info {
  font-weight: bold;
  color: #333;
  line-height: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 112px;
}

.answer-box {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding: 0;
  li {
    background: red;
    color: #fff;
    height: 60px;
  }
  .is-right{
    background: green;
  }
}
</style>
