<template>
  <div class="app-container">
    <table class="table-ui">
      <tr>
        <td class="tbg">试卷名称</td>
        <td colspan="3">{{ pd.EXAMNAME }}</td>
      </tr>
      <tr>
        <td class="tbg">适用人员</td>
        <td>{{ formatterUsers(pd) }}</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>

    <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="true">
          <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">
          <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">
          <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="papg-foot">
      <el-button type="warning" round @click="goBack">返 回</el-button>
      <el-button type="danger" round @click="handleDeletePaper">删 除</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 ''
      }
    },
    learnercategorylist: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      listLoading: true,
      config: config,
      KEYWORDS: '',
      pd: {
        CURRICULUMID: '', // 课程ID
        EXAMNAME: '', // 试卷名称
        EXAMTIME: '', // 考试时间（开始时间）
        ANSWERSHEETTIME: '', // 答卷时间（持续时间）
        EXAMSCORE: '', // 试卷分数
        CURRICULUMUSERS: '', // 适用人员
        QUESTIONNUM: '', // 试题数量（10、20、50、100）
        EXAMSTATE: '', // 试卷状态
        QUESTIONLIST: []
      },
      LearnerCategoryList: this.learnercategorylist,
      form: {
        CURRICULUMID: '', // 课程ID
        EXAMNAME: '', // 试卷名称
        EXAMTIME: '', // 考试时间（开始时间）
        ANSWERSHEETTIME: '', // 答卷时间（持续时间）
        EXAMSCORE: '', // 试卷分数
        CURRICULUMUSERS: '', // 适用人员
        QUESTIONNUM: '', // 试题数量（10、20、50、100）
        EXAMSTATE: '', // 试卷状态
        QUESTIONLIST: []
      }
    }
  },
  created() {
    this.getDict()
    this.getData()
  },
  methods: {
    formatDateTime(pd) {
      return dateformat(pd.EXAMTIME, 'YYYY-MM-DD HH:mm')
    },
    getData() {
      this.listLoading = true
      requestFN(
        '/coursepapers/goEdit',
        {
          // COURSEPAPERS_ID: this.paperid
          COURSEPAPERS_ID: this.$parent.COURSEPAPERS_ID
        }
      ).then((data) => {
        this.pd = data.pd
        this.listLoading = false
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 格式化适用人员名称
    formatterUsers(pd) {
      var CURRICULUMUSERS_VAL = ''
      const CURRICULUMUSERS = pd.CURRICULUMUSERS.split(',')
      for (let i = 0; i < CURRICULUMUSERS.length; i++) {
        for (let j = 0; j < this.LearnerCategoryList.length; j++) {
          const option = this.LearnerCategoryList[j]
          if (option.BIANMA === CURRICULUMUSERS[i]) {
            CURRICULUMUSERS_VAL += option.NAME + ','
          }
        }
      }
      return CURRICULUMUSERS_VAL.slice(0, CURRICULUMUSERS_VAL.length - 1)
    },
    rowClassName({ row, rowIndex }) {
      row.newIndex = rowIndex + 1
    },
    handleDeletePaper() {
      this.$confirm('确定要删除该试卷吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/coursepapers/delete',
          {
            COURSEPAPERS_ID: this.$parent.COURSEPAPERS_ID
          }
        ).then(() => {
          this.$message({
            message: '课程试卷删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.$parent.activeName = 'List'
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    // 获取数据字典数据
    getDict: function() {
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: '532282f9c48346b8b646531909c739df'
        }
      ).then((data) => {
        this.LearnerCategoryList = data.list
      }).catch((e) => {

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

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