<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.CURRICULUMUSERS }}</td>
        <td class="tbg">答卷时间</td>
        <td>{{ pd.ANSWERSHEETTIME }}分钟</td>
      </tr>
      <!--      <tr>-->
      <!--        <td class="tbg">试题数量</td>-->
      <!--        <td>{{ pd.QUESTIONNUM }}</td>-->
      <!--        <td class="tbg">试卷状态</td>-->
      <!--        <td>{{ pd.EXAMSTATE }}</td>-->
      <!--      </tr>-->
    </table>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :header-cell-style="{
        'font-weight': 'bold',
        'color': '#000'
      }"
      :data="pd.QUESTIONLIST"
      :row-class-name="rowClassName"
      :show-header="false"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column label="试题">
        <template slot-scope="{row}">
          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark" style="font-size: 12pt; font-weight: bold">{{ row.newIndex }}.{{ row.QUESTIONDRY }}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="1"><div class="grid-content bg-purple">&nbsp;</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">A.{{ row.OPTIONA }}</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">B.{{ row.OPTIONB }}</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple"><span v-if="row.QUESTIONTYPE === '1'">C.{{ row.OPTIONC }}</span>&nbsp;</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"><span v-if="row.QUESTIONTYPE === '1'">D.{{ row.OPTIOND }}</span>&nbsp;</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple-light">答案：{{ row.ANSWER }}</div></el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </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 ''
      }
    }
  },
  data() {
    return {
      config: config,
      KEYWORDS: '',
      pd: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    formatDateTime(pd) {
      return dateformat(pd.EXAMTIME, 'YYYY-MM-DD HH:mm')
    },
    getData() {
      requestFN(
        '/stageexampaper/goEdit',
        {
          STAGEEXAMPAPER_ID: this.paperid
        }
      ).then((data) => {
        this.pd = data.pd
      }).catch((e) => {

      })
    },
    rowClassName({ row, rowIndex }) {
      row.newIndex = rowIndex + 1
    }
  }
}

</script>
