<template>
  <div class="app-container">
    <div class="level-title">
      <h1>查看试卷</h1>
    </div>
    <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.EXAMSCORE }}</td>
        <td class="tbg">合格分数</td>
        <td>{{ pd.PASSSCORE }}</td>
      </tr>
      <tr>
        <td class="tbg">岗位培训类型</td>
        <td>{{ pd.post_type_name }}</td>
        <td class="tbg">行业培训类型</td>
        <td>{{ pd.train_type_name }}</td>
      </tr>
      <tr>
        <td class="tbg">多选题数</td>
        <td>{{ pd.DUOXUANTICOUNT }}</td>
        <td class="tbg">多选分数</td>
        <td>{{ pd.DUOXUANTINUMBER }}</td>
      </tr>
      <tr>
        <td class="tbg">单选题数</td>
        <td>{{ pd.DANYUANTICOUNT }}</td>
        <td class="tbg">单选分数</td>
        <td>{{ pd.DANXUANTINUMBER }}</td>
      </tr>
      <tr>
        <td class="tbg">判断题数</td>
        <td>{{ pd.PANDUITICOUNT }}</td>
        <td class="tbg">判断分数</td>
        <td>{{ pd.PANDUITINUMBER }}</td>
      </tr>
    </table>
    <div class="study-papg">
      <dl v-for="(row,i) in inputQue" :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="true" 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="true" v-model="row.checkList" >
          <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="true" 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="proper">
          答案：{{ row.ANSWER }}
        </div>
      </dl>
    </div>
    <div class="ui-height" />
    <div class="ui-foot">
      <el-button @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: {
    paperid: {
      type: String,
      default() {
        return ''
      }
    },
    cascaderdata: {
      type: Array,
      default() {
        return []
      }
    },
    coursewarelist: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      listLoading: true,
      config: config,
      KEYWORDS: '',
      CascaderData: this.cascaderdata,
      Coursewarelist: this.coursewarelist,
      pd: {
        CURRICULUMID: '', // 课程ID
        EXAMNAME: '', // 试卷名称
        EXAMTIME: '', // 考试时间（开始时间）
        ANSWERSHEETTIME: '', // 答卷时间（持续时间）
        EXAMSCORE: 100, // 试卷分数
        CURRICULUMUSERS: '', // 适用人员
        COURSEWARES: '', // 课件范围
        QUESTIONNUM: '' // 试题数量（10、20、50、100）
      },
      inputQue: []
    }
  },
  created() {
    this.getDict()
    this.getData()
  },
  methods: {
    formatDateTime(pd) {
      return dateformat(pd.EXAMTIME, 'YYYY-MM-DD HH:mm')
    },
    getData() {
      this.listLoading = true
      requestFN(
        '/stageexampaperinput/goEdit',
        {
          STAGEEXAMPAPERINPUT_ID: this.$parent.STAGEEXAMPAPERINPUT_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.pd = Object.assign({}, data.pd)
        data.inputQue.forEach((item, index, arr) => {
          if (item.QUESTIONTYPE === '2') {
            data.inputQue[index].checkList = item.ANSWER.split('')
          }
        })
        this.inputQue = data.inputQue
        console.log(data.inputQue)
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 获取数据字典数据
    getDict: function() {
      requestFN(
        '/user/listCascader',
        {}
      ).then((data) => {
        this.CascaderData = JSON.parse(data.CascaderNodes)
      }).catch((e) => {
      })

      requestFN(
        '/datacourseware/getAllCourseware',
        {}
      ).then((data) => {
        this.Coursewarelist = data.list
      }).catch((e) => {

      })
    },
    goBack() {
      this.$parent.activeName = 'List'
    }
  }
}

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