<template>
  <div>

    <div class="app-container">
      <table class="table-ui">
        <tr>
          <td class="tbg">试卷名称</td>
          <td>{{ pd.EXAMNAME }}</td>
          <td class="tbg"/>
          <td/>
        </tr>
        <tr>
          <td class="tbg">培训行业类型</td>
          <td>{{ pd.studyTaskData.post_type_name }}</td>
          <td class="tbg">岗位培训类型</td>
          <td>{{ pd.studyTaskData.train_type_name }}</td>
        </tr>
        <tr>
          <td class="tbg">总分数</td>
          <td>{{ pd.stageexampaperData.EXAMSCORE }}</td>
          <td class="tbg">合格分数</td>
          <td>{{ pd.stageexampaperData.PASSSCORE }}</td>
        </tr>
        <tr>
          <td class="tbg">考试结果</td>
          <td>{{ pd.EXAMSCORE }}</td>
          <td class="tbg">考试时间</td>
          <td>{{ pd.OPERATTIME }}</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.RESULT == 'RIGHT' ? 'color-green' : 'color-red'" class="proper">
            答案：{{ row.ANSWERRIGHT }}
          </div>
        </dl>
      </div>
      <div class="ui-height" />

    </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
export default {
  components: { Pagination },
  directives: { waves },
  props: {
    paperid: {
      type: String,
      default() {
        return ''
      }
    },
    userid: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      listLoading: true,
      config: config,
      KEYWORDS: '',
      isDisabled: true,
      pd: {
        studyTaskData: {
          post_type_name: '',
          train_type_name: ''
        },
        stageexampaperData: {
          EXAMSCORE: 0,
          PASSSCORE: 0
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.listLoading = true
      requestFN(
        '/stageexam/findResult',
        {
          STUDYTASK_ID: this.$parent.STUDYTASK_ID,
          STAGEEXAMPAPER_ID: this.$parent.STAGEEXAMPAPER_ID,
          USER_ID: this.$parent.STUDYTASK_USERID
        }
      ).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('')
          }
        })
        this.listLoading = false
      }).catch((e) => {
        this.listLoading = false
      })
    },
    goBack() {
      this.$parent.activeName = 'CourseKaoshiInfo'
    }
  }
}

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