<template>
  <a-card :bordered="false">
    <a-tabs v-if="query.type" :default-active-key="query.type">
      <a-tab-pane key="1" tab="答题报告">
        <a-card
          :bordered="false"
          :bodyStyle="{ padding: '0px !important' }"
          :headStyle="{ paddingLeft: '0px !important' }"
        >
          <template slot="title">
            <h3>{{ viewReport.courseName }}</h3>
            <div class="sub-info">
              <span>交卷时间：{{ viewReport.submitTime }}</span>
              <span v-if="viewReport.totalScore">答题用时：{{ viewReport.totalScore }}</span>
            </div>
            <DbReport :data="viewReport"></DbReport>
          </template>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="查看解析">
        <a-card
          :bordered="false"
          :bodyStyle="{ padding: '0px !important' }"
          :headStyle="{ paddingLeft: '0px !important' }"
        >
          <template slot="title">
            <h4>{{ viewReport.courseName }}</h4>
            <!-- <div class="sub-info"><span>选择题30/30</span><span>选择题30/30</span><span>选择题30/30</span></div> -->
          </template>
          <template v-for="(item, index) in questionList">
            <div :key="index">
              <DbQuestionInfoItem :data="item" :questionIndex="index + 1"></DbQuestionInfoItem>
              <a-divider></a-divider>
            </div>
          </template>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import DbQuestionInfoItem from '@/components/DbQuestionInfoItem/index.vue'
import DbReport from '@/components/DbReport/index.vue'
import { answerViewReport, answerViewResolution } from '@/api/practice/report'
import { reqExamViewReport, reqExamViewResolution } from '@/api/myexam/exam.js'

export default {
  components: { DbQuestionInfoItem, DbReport },
  data () {
    return {
      query: {},
      activeTab: '',
      viewReport: {}, // 答题报告
      questionList: [],
      viewResolution: [] // 答题解析
    }
  },
  mounted () {
    const query = this.$route.query
    this.query = query
    // if (query.type === 'practice') {
    this.getAnswerViewReport()
    this.getAnswerViewResolution()
    // }
    // if (query.type === 'exam') {
    //   this.getExamViewReport()
    //   this.getExamViewResolution()
    // }
  },
  methods: {
    // 考试 start
    // getExamViewReport () {
    //   reqExamViewReport({ projectId: this.query.reportId }).then(res => {
    //     this.viewReport = res.data
    //   })
    // },
    // getExamViewResolution () {
    //   reqExamViewResolution({ projectId: this.query.reportId }).then(res => {
    //     const data = res.data
    //     let list = []
    //     if (Array.isArray(data)) {
    //       data.map(item => {
    //         list = [...list, ...data.questionList]
    //       })
    //     }
    //     console.log('list', list)
    //     this.viewResolution = list
    //   })
    // },
    // 练习 start
    getAnswerViewReport () {
      answerViewReport({ reportId: Number(this.query.reportId) }).then(res => {
        this.viewReport = res.data
      })
    },
    getAnswerViewResolution () {
      answerViewResolution({ reportId: Number(this.query.reportId) }).then(res => {
        const data = res.data.question
        let list = []
        if (Array.isArray(data)) {
          data.map(item => {
            list = [...list, ...item.questionList]
          })
        }
        console.log('list', list)
        this.viewResolution = res.data
        this.questionList = list
      })
    }
  }
}
</script>

<style lang="less" scoped>
.sub-info {
  color: #666;
  font-weight: normal;
  font-size: 14px;
}
</style>
