<template>
  <div class="app-warp">
    <div class="detail-structure">
      <el-page-header content="详情页面" @back="goBack"/>
      <div class="detail-container">
        <div class="level-title">
          <h1>试卷基本信息</h1>
        </div>
        <div class="orso">
          <table class="table-ui">
            <tr>
              <td class="tbg">试卷名称</td>
              <td colspan="3">{{ form.EXAMNAME }}</td>
            </tr>
            <tr>
              <td class="tbg">合格分数</td>
              <td width="38%">{{ form.PASSSCORE }}</td>
              <td class="max-tbg">总分数</td>
              <td width="38%">{{ form.EXAMSCORE }}</td>
            </tr>
            <tr>
              <td class="tbg">是否上架</td>
              <td colspan="3">
                <template v-if="form.ISSELL=='1'">
                  上架
                </template>
                <template v-else-if="form.ISSELL=='0'">
                  下架
                </template>
              </td>
            </tr>
          </table>
        </div>
        <div class="level-title" style="margin-top:20px">
          <h1>试卷题目信息</h1>
        </div>
        <div class="study-papg">
          <dl v-for="(row) in inputQue" :key="row.QUESTION_ID">
            <dt>
              <span v-if="row.QUESTIONTYPE === '1'" class="mark mark-green">(单选题) </span>
              <span v-if="row.QUESTIONTYPE === '2'" class="mark mark-blue">(多选题)</span>
              <span v-if="row.QUESTIONTYPE === '3'" class="mark mark-orange">(判断题)</span>
              <span v-if="row.QUESTIONTYPE === '4'" class="mark mark-purple">(填空题)</span>
              {{ row.QUESTIONNUMBER }}.{{ row.QUESTIONDRY }}
              <span class="ml-10">(题目分值：{{ row.SCORE }})</span>
            </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="flex-layout space-between">
              <div>
                <div class="mb-10">
                  正确答案：{{ row.ANSWER }}
                </div>
                <div>
                  答案解析：{{ row.DESCR }}
                </div>
              </div>
            </div>
          </dl>
        </div>
        <div class="page-btn-group" style="padding-bottom:20px">
          <div/>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getQueList" />
        </div>
        <div class="detail_foot">
          <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        </div>
      </div>
    </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 },
  inject: ['setActiveName', 'setCorpInfoId'],
  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,
      form: {
        STAGEEXAMPAPERINPUT_ID: '',
        EXAMNAME: '',
        TRAINTYPE: '',
        POSTTYPE: '',
        EXAMSCORE: '',
        PASSSCORE: '',
        STATE: '',
        ISSELL: '1',
        INDUSTRY1: '',
        INDUSTRY2: '',
        INDUSTRY_END_ID: '',
        INDUSTRY_ALL_NAME: '',
        POSTTYPE_NAME: '',
        TRAININGTYPE_NAME: ''
      },
      inputQue: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    // this.getDict()
    this.getData()
    this.getQueList()
  },
  methods: {
    // 获取列表
    getQueList() {
      this.listLoading = true
      requestFN(
        '/paperQuestion/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: this.KEYWORDS,
          STAGEEXAMPAPERINPUT_ID: this.$parent.STAGEEXAMPAPERINPUT_ID
        }
      ).then((data) => {
        this.listLoading = false
        data.varList.forEach((item, index, arr) => {
          if (item.QUESTIONTYPE === '2') {
            data.varList[index].checkList = item.ANSWER.split('')
          }
        })
        this.inputQue = data.varList
        this.total = data.page.totalResult

        this.hasButton()
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getData() {
      this.listLoading = true
      requestFN(
        '/stageexampaperinput/goEdit',
        {
          STAGEEXAMPAPERINPUT_ID: this.$parent.STAGEEXAMPAPERINPUT_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.form = Object.assign({}, data.pd)
        this.queAllScore = this.form.EXAMSCORE
      }).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() {
      if (this.$parent.goType === 'list') {
        this.setActiveName('stageexampaperList')
      } else {
        this.setActiveName('addStageexam')
      }
    }
  }
}

</script>
