<template>
  <div class="app-container">
    <table class="table-ui">
      <tr>
        <td class="tbg">试卷名称</td>
        <td>{{ pd.EXAMNAME }}</td>
        <td class="tbg">考试时间</td>
        <td>{{ formatDateTime(pd) }}</td>
      </tr>
      <tr>
        <td class="tbg">学员姓名</td>
        <td>{{ pd.USERNAME }}</td>
        <td class="tbg">答卷用时</td>
        <td>{{ formatTime(pd) }}</td>
      </tr>
    </table>

    <div class="study-papg">
      <dl v-for="(row,i) in pd.QUESTIONLIST" :key="row.QUESTION_ID">
        <dt>
          {{ i + 1 }}.<span v-if="row.QUESTIONTYPE === '1'" class="mark">(单选题)</span>
          <span v-if="row.QUESTIONTYPE === '2'" class="mark">(多选题)</span>
          <span v-if="row.QUESTIONTYPE === '3'" class="mark">(判断题)</span>
          {{ row.QUESTIONDRY }}
        </dt>
        <el-radio-group v-if="row.QUESTIONTYPE === '1'" :disabled="isDisabled" v-model="row.ANSWER">
          <dd>
            <el-radio label="A">A.{{ row.OPTIONA }}</el-radio>
          </dd>
          <dd>
            <el-radio label="B">B.{{ row.OPTIONB }}</el-radio>
          </dd>
          <dd>
            <el-radio label="C">C.{{ row.OPTIONC }}</el-radio>
          </dd>
          <dd>
            <el-radio label="D">D.{{ row.OPTIOND }}</el-radio>
          </dd>
        </el-radio-group>
        <el-checkbox-group v-if="row.QUESTIONTYPE === '2'" :disabled="isDisabled" v-model="row.ANSWER">
          <dd>
            <el-checkbox label="A">A.{{ row.OPTIONA }}</el-checkbox>
          </dd>
          <dd>
            <el-checkbox label="B">B.{{ row.OPTIONB }}</el-checkbox>
          </dd>
          <dd>
            <el-checkbox label="C">C.{{ row.OPTIONC }}</el-checkbox>
          </dd>
          <dd>
            <el-checkbox label="D">D.{{ row.OPTIOND }}</el-checkbox>
          </dd>
        </el-checkbox-group>
        <el-radio-group v-if="row.QUESTIONTYPE === '3'" :disabled="isDisabled" v-model="row.ANSWER">
          <dd>
            <el-radio label="A">A.{{ row.OPTIONA }}</el-radio>
          </dd>
          <dd>
            <el-radio label="B">B.{{ row.OPTIONB }}</el-radio>
          </dd>
        </el-radio-group>
        <div :class="row.ANSWER == row.ANSWERRIGHT ? 'color-green' : 'color-red'" class="proper">
          答案：{{ row.ANSWERRIGHT }}
        </div>
      </dl>
    </div>
    <div class="papg-foot">
      <el-button type="warning" round @click="goBack">返 回</el-button>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import dateformat from '@/utils/dateformat.js'
export default {
  components: { Pagination },
  directives: { waves },
  props: {
    examid: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      config: config,
      KEYWORDS: '',
      isDisabled: true,
      pd: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    formatDateTime(pd) {
      return dateformat(pd.EXAMTIME, 'YYYY-MM-DD HH:mm:ss')
    },
    formatTime(pd) {
      const begin = new Date(pd.EXAMTIME).getTime()
      const end = new Date(pd.OPERATTIME).getTime()
      const times = end - begin
      const minutes = this.addZero(
        Math.floor((times / 1000 / 60) % 60)
      ) // 分
      const seconds = this.addZero(Math.floor((times / 1000) % 60)) // 秒
      return `${minutes}分钟${seconds}秒`
    },
    // 个位补零
    addZero(d) {
      return parseInt(d) < 10 ? '0' + d : d
    },
    getData() {
      requestFN(
        '/courseexam/findResult',
        {
          COURSEEXAM_ID: this.$parent.COURSEEXAM_ID
        }
      ).then((data) => {
        this.pd = data.pd
        this.pd.QUESTIONLIST.forEach((ele) => {
          if (ele.ANSWER === ele.ANSWERRIGHT) {
            ele.RESULT = 'RIGHT'
          } else {
            ele.RESULT = 'ERROR'
          }
          if (ele.QUESTIONTYPE === '2') {
            ele.ANSWER = ele.ANSWER.split('')
          }
        })
      }).catch((e) => {

      })
    },
    // 页面样式已修改（作废）
    // // 当状态为 已辍学 的状态，加上背景色
    // TableRowStyle({ row, rowIndex }) {
    //   // 注意，这里返回的是一个对象
    //   const rowBackground = {}
    //   if (row.RESULT.includes('RIGHT')) {
    //     rowBackground.background = '#f0f9eb'
    //     return rowBackground
    //   } else {
    //     rowBackground.background = '#fef0f0'
    //     return rowBackground
    //   }
    // },
    // rowClassName({ row, rowIndex }) {
    //   row.newIndex = rowIndex + 1
    // },
    goBack() {
      this.$parent.activeName = 'Student'
    }
  }
}

</script>
<style scoped>
  .study-papg {
    margin: 30px 0;
  }
</style>
