<template>
  <div class="app-container">
    <table class="table-ui">
      <tr>
        <td class="tbg">课程名称</td>
        <td>{{ form.CURRICULUMNAME }}</td>
      </tr>
      <tr>
        <td class="tbg">课程介绍</td>
        <td colspan="3">{{ form.CURRICULUMINTRODUCE }}</td>
      </tr>
      <tr>
        <td class="tbg">课程目的</td>
        <td colspan="3">{{ form.CURRICULUMAIM }}</td>
      </tr>
    </table>

    <div class="study-papg">
      <dl v-for="(row,i) in form.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="isDisabled" v-model="form.ANSWER[i]">
          <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="isDisabled" v-model="form.ANSWER[i]">
          <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="isDisabled" v-model="form.ANSWER[i]">
          <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 v-if="isShowAnswer" :class="form.ANSWER[i]== row.ANSWER ? 'color-green' : 'color-red'" class="proper">
          答案：{{ row.ANSWER }}
        </div>
      </dl>
    </div>
    <div class="papg-foot">
      <el-button type="warning" round @click="goBack">取消训练</el-button>
      <el-button :disabled="isDisabled" type="success" round @click="confirm">查看结果</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
export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      config: config,
      isDisabled: false,
      isShowAnswer: false,
      form: {
        CURRICULUMID: this.$parent.CURRICULUM_ID, // 课程ID
        CURRICULUMNAME: '', // 课程名称
        CURRICULUMINTRODUCE: '', // 课程介绍
        CURRICULUMAIM: '', // 课程目的
        STARTTIME: '', // 开始时间
        ENDTIME: '', // 结束时间
        CURRICULUMUSERS: '', // 适用人员
        QUESTION_ID: [], // 试题ID数组
        QUESTIONTYPE: [], // 试题类型数组
        ANSWER: [], // 学员答案
        ANSWERRIGHT: [] // 正确答案
      },
      subForm: {},
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      dialogFormEdit: false,
      dialogExamShow: false,
      STUDYTIME: '',
      dialogType: 'add'
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getRowKey(row) {
      return row.COURSESTUDY_ID
    },
    getData() {
      this.listLoading = true
      requestFN(
        '/curriculum/findForStudyByCurriculumId',
        {
          CURRICULUM_ID: this.$parent.CURRICULUM_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.form = Object.assign(this.form, data.pd)
        // console.info(this.form)
      }).catch((e) => {
        this.listLoading = false
      })
    },
    confirm() {
      this.$confirm('确定要结束本次练习，查看练习结果吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.subForm = Object.assign({}, this.form)
        for (let i = 0; i < this.subForm.ANSWER.length; i++) {
          if (this.subForm.QUESTIONTYPE[i] === '2') {
            this.subForm.ANSWER[i] = this.trimSpace(this.subForm.ANSWER[i])
            this.subForm.ANSWER[i] = this.subForm.ANSWER[i].length > 0 ? this.subForm.ANSWER[i].sort() : []
            if (this.subForm.ANSWER[i].length === 0) {
              this.subForm.ANSWER[i] = '-'
            }
          } else {
            if (this.subForm.ANSWER[i].length === 0) {
              this.subForm.ANSWER[i] = '-'
            }
          }
        }
        var ANSWER_STR = ''
        for (let i = 0; i < this.subForm.ANSWER.length; i++) {
          if (this.subForm.QUESTIONTYPE[i] === '2') {
            ANSWER_STR += (this.subForm.ANSWER[i] === '-' ? '-' : this.subForm.ANSWER[i].join('')) + ','
          } else {
            ANSWER_STR += this.subForm.ANSWER[i] + ','
          }
        }
        this.subForm.ANSWER = ANSWER_STR.length > 0 ? ANSWER_STR.slice(0, ANSWER_STR.length - 1) : ''
        this.subForm.QUESTION_ID = this.subForm.QUESTION_ID.join(',')
        this.subForm.QUESTIONTYPE = this.subForm.QUESTIONTYPE.join(',')
        this.subForm.COURSEWAREID = this.subForm.COURSEWAREID.join(',')
        this.subForm.COURSEWARETYPE = this.subForm.COURSEWARETYPE.join(',')
        this.subForm.ANSWERRIGHT = this.subForm.ANSWERRIGHT.join(',')
        this.subForm.QUESTIONLIST = ''
        this.subForm.COURSESTUDENTRELATION_ID = this.$parent.COURSESTUDENTRELATION_ID
        requestFN(
          '/coursestudy/submit',
          this.subForm
        ).then((data) => {
          this.isDisabled = true
          this.isShowAnswer = true
          // this.getData()
        }).catch(() => {
        })
      }).catch(() => {
      })
    },
    trimSpace(array) {
      for (var i = 0; i < array.length; i++) {
        if (array[i] == '' || array[i] == null || typeof (array[i]) == 'undefined') {
          array.splice(i, 1)
          i = i - 1
        }
      }
      return array
    },
    // 获取数据字典数据
    getDict: function() {
    },
    resetForm() {
      this.form = {
        CURRICULUMID: this.$parent.CURRICULUM_ID, // 课程ID
        CURRICULUMNAME: '', // 课程名称
        CURRICULUMINTRODUCE: '', // 课程介绍
        CURRICULUMAIM: '', // 课程目的
        STARTTIME: '', // 开始时间
        ENDTIME: '', // 结束时间
        CURRICULUMUSERS: '', // 适用人员
        QUESTION_ID: [], // 试题ID数组
        QUESTIONTYPE: [], // 试题类型数组
        ANSWER: [], // 学员答案
        ANSWERRIGHT: [] // 正确答案
      }
    },
    goBack() {
      this.$parent.activeName = 'Mine'
    }
  }
}

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