<template>
  <el-dialog :visible.sync="visible" title="试卷预览" width="70%" append-to-body top="30px">
    <div class="level-title">
      <h1>试卷基本信息</h1>
    </div>
    <div style="display: flex;justify-content: space-around;">
      <div>试卷名称：{{ info.EXAMNAME }}</div>
      <div>试卷总分：{{ info.EXAMSCORE }}</div>
      <div>通过分数：{{ info.PASSSCORE }}</div>
    </div>
    <div class="level-title" style=" margin-top: 20px;">
      <h1>试卷内容信息</h1>
    </div>
    <el-form :model="form" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目内容" prop="KEYWORDS">
            <el-input v-model="form.KEYWORDS" placeholder="请输入关键字"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目类型" prop="QUESTIONTYPE">
            <el-select v-model="form.QUESTIONTYPE">
              <el-option value="1" label="单选题"/>
              <el-option value="2" label="多选题"/>
              <el-option value="3" label="判断题"/>
              <el-option value="4" label="填空题"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button v-waves type="primary" icon="el-icon-search" @click="getList">
            搜索
          </el-button>
          <el-button v-waves icon="el-icon-refresh" class="ml-10" @click="resetting">
            重置
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="study-papg">
      <dl
        v-for="(item,index) in list"
        :key="item.PAPER_QUESTION_ID">
        <dt>
          <span v-if="item.QUESTIONTYPE === '1'" class="mark mark-green">(单选题) </span>
          <span v-if="item.QUESTIONTYPE === '2'" class="mark mark-blue">(多选题)</span>
          <span v-if="item.QUESTIONTYPE === '3'" class="mark mark-orange">(判断题)</span>
          <span v-if="item.QUESTIONTYPE === '4'" class="mark mark-purple">(填空题)</span>
          <span style="white-space: pre-wrap">{{ index + 1 }}.{{ item.QUESTIONDRY }}</span>
          <span class="ml-10">(题目分值：{{ item.SCORE }})</span>
        </dt>
        <el-radio-group v-if="item.QUESTIONTYPE === '1'" :disabled="true" v-model="item.ANSWER">
          <dd>
            <el-radio label="A">A.{{ item.OPTIONA }}</el-radio>
          </dd>
          <dd>
            <el-radio label="B">B.{{ item.OPTIONB }}</el-radio>
          </dd>
          <dd>
            <el-radio label="C">C.{{ item.OPTIONC }}</el-radio>
          </dd>
          <dd>
            <el-radio label="D">D.{{ item.OPTIOND }}</el-radio>
          </dd>
        </el-radio-group>
        <el-checkbox-group v-if="item.QUESTIONTYPE === '2'" :disabled="true" v-model="item.checkList" >
          <dd>
            <el-checkbox label="A">A.{{ item.OPTIONA }}</el-checkbox>
          </dd>
          <dd>
            <el-checkbox label="B">B.{{ item.OPTIONB }}</el-checkbox>
          </dd>
          <dd>
            <el-checkbox label="C">C.{{ item.OPTIONC }}</el-checkbox>
          </dd>
          <dd>
            <el-checkbox label="D">D.{{ item.OPTIOND }}</el-checkbox>
          </dd>
        </el-checkbox-group>
        <el-radio-group v-if="item.QUESTIONTYPE === '3'" :disabled="true" v-model="item.ANSWER">
          <dd>
            <el-radio label="A">A.{{ item.OPTIONA }}</el-radio>
          </dd>
          <dd>
            <el-radio label="B">B.{{ item.OPTIONB }}</el-radio>
          </dd>
        </el-radio-group>
        <div class="flex-layout space-between">
          <div>
            <div class="mb-10">
              正确答案：{{ item.ANSWER }}
            </div>
            <div class="mb-10">
              答案解析：{{ item.DESCR }}
            </div>
            <div>
              关联课件名称：{{ item.COURSEWARENAME }}
            </div>
          </div>
        </div>
      </dl>
    </div>
    <div class="page-btn-group">
      <div/>
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"/>
    </div>
    <span slot="footer">
      <el-button @click="visible = false">取 消</el-button>
    </span>
  </el-dialog>
</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 },
  data() {
    return {
      visible: false,
      loading: false,
      total: '0',
      listQuery: {
        page: 1,
        limit: 10
      },

      id: '',
      info: {},
      form: {},
      list: {}
    }
  },
  methods: {
    async init(e) {
      this.id = e.id
      await this.getList()
      await this.getInfo()
      this.visible = true
    },
    getList() {
      return requestFN(`/paperQuestion/list?showCount=${this.listQuery.limit}&currentPage=${this.listQuery.page}`, {
        STAGEEXAMPAPERINPUT_ID: this.id,
        ...this.form
      }).then((data) => {
        this.list = data.varList
        this.total = data.page.totalResult
      })
    },
    resetting() {
      this.form.KEYWORDS = ''
      this.form.QUESTIONTYPE = ''
      this.getList()
    },
    getInfo() {
      return requestFN(`/stageexampaperinput/goEdit`, {
        STAGEEXAMPAPERINPUT_ID: this.id
      }).then((data) => {
        this.info = data.pd
      })
    }
  }
}

</script>
