<template>
<div class="play-paper">
  <div class="play-paper-body">
    <div class="play-paper-title"><div><h3>{{exam.title}}</h3></div></div>
    <div class="play-paper-content play-chapter-exam">
      <template v-if="exam.id">
        <div class='exam'>
          <div style='text-align: center;'>
            <div class='topic'>
              <!-- <div class='tit'>{{exam.title}}</div> -->
              <template v-if='exam.score.total !== undefined'><div class='cur'>单选：{{exam.score.radio}}分，多选：{{exam.score.checkbox}}分，简答：{{exam.score.shortAnswer}}分，总分：{{exam.score.total}}分</div></template>
            </div>
          </div>
          <!-- 单选题 -->
          <template v-if='exam.radioList.length'>
            <template v-for='(item, index) in exam.radioList'>
              <div v-bind:key="item.id" class='q-group' :data-index='index'>
                <div class='q-num'>{{index+1}}.</div><div class='q-title' v-html='item.content'></div><div class='q-type'>(单选题)</div>
                <el-radio-group class='radio-group' v-model="item.user_answer">
                  <template v-for='(item1, index1) in item.options'>
                    <el-radio v-bind:key="item1.id" :label='item1.id' :disabled='!!item.right_answer && !!exam.type' :class='["radio", ((item.right_answer && !!exam.type) ? (item1.id === item.right_answer ? "success" : "error") : "")]'>{{ index1 | getLetter() }}. {{item1.option}}</el-radio>
                  </template>
                </el-radio-group>
                <template v-if='item.right_answer && !!exam.type'><div class='result'>学生答案：<div :class='["stu", (item.right_answer === item.user_answer ? "success" : "error")]'>{{ item.user_answer | getRadioAnswer(item.options) }}</div>&nbsp;&nbsp;&nbsp;&nbsp;正确答案：{{ item.right_answer | getRadioAnswer(item.options) }}</div></template>
              </div>
            </template>
          </template>
          <!-- 多选题 -->
          <template v-if='exam.checkboxList.length'>
            <template v-for='(item, index) in exam.checkboxList'>
              <div v-bind:key="item.id" class='q-group' :data-index='index'>
                <div class='q-num'>{{exam.radioList.length+index+1}}.</div><div class='q-title' v-html='item.content'></div><div class='q-type'>(多选题)</div>
                <el-checkbox-group class='checkbox-group' v-model="item.user_answer">
                  <template v-for='(item1, index1) in item.options'>
                    <el-checkbox v-bind:key="item1.id" :label='item1.id' :disabled='!!item.right_answer.length && !!exam.type' :class='["checkbox", ((item.right_answer.length && !!exam.type) ? (isCheckboxChecked(item1.id, item.right_answer) ? "success" : "error") : "")]'>{{ index1 | getLetter() }}. {{item1.option}}</el-checkbox>
                  </template>
                </el-checkbox-group>
                <template v-if='item.right_answer.length && !!exam.type'><div class='result'>学生答案：<div :class='["stu", ((item.right_answer.length && isCheckboxRight(item.user_answer, item.right_answer)) ? "success" : "error")]'>{{ item.user_answer | getCheckboxAnswer(item.options) }}</div>&nbsp;&nbsp;&nbsp;&nbsp;正确答案：{{ item.right_answer | getCheckboxAnswer(item.options) }}</div></template>
              </div>
            </template>
          </template>
          <!-- 简答题 -->
          <template v-if='exam.shortAnswerList.length'>
            <template v-for='(item, index) in exam.shortAnswerList'>
              <div v-bind:key="index" class='q-group'>
                <div class='q-sa-title'>{{exam.radioList.length+exam.checkboxList.length+index+1}}.&nbsp;&nbsp;简答题</div>
                <div class="edit_html" v-html="item.content || ''"></div>
                <textarea :id="('editor-exam' + index)" v-model="item.user_answer"></textarea>
                <div style="height: 10px;"></div>
                <component :is="item.upload.type" v-bind:key="item.upload.model" :item="item.upload" :formData="item" :isUpload="!exam.type"></component>
              </div>
            </template>
          </template>

          <div :class='["btn", (exam.type && "on")]' @click='submitExam' :data-submit='!!exam.type' @mousedown='_SubmitMouseLeftDown()'>{{exam.type ? "已提交" : "提交"}}</div>
          <div class='care'>(注意：测试只有一次提交机会)</div>
          <!-- <div :class='["btn"]' @click='repeatExam($event, true)' v-if="exam.work_contents">重做</div> -->
        </div>
      </template>
    </div>
  </div>
</div>
</template>

<script>
import cAction from '@action'
import Base64 from 'Base64'

import CKEDITOR from 'CKEDITOR'

var getLetter = (val) => {
  switch (val) {
    case 0: return 'A'
    case 1: return 'B'
    case 2: return 'C'
    case 3: return 'D'
    case 4: return 'E'
    case 5: return 'F'
    case 6: return 'G'
    case 7: return 'H'
    case 8: return 'I'
    case 9: return 'J'
    case 10: return 'K'
    case 11: return 'L'
    case 12: return 'M'
  }
}

export default {
  props: {
    sid: { type: String, require: false },
    cid: { type: String, require: false },
    id: { type: String, require: false }
  },
  filters: {
    getLetter: getLetter,
    getRadioAnswer: (val, arr) => {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id === val) {
          return getLetter(i)
        }
      }
    },
    getCheckboxAnswer: (val, arr) => {
      let str = ''
      for (let i = 0; i < val.length; i++) {
        const tmpId = val[i]
        for (let j = 0; j < arr.length; j++) {
          if (arr[j].id === tmpId) {
            str += getLetter(j) + ','
            break
          }
        }
      }
      return str.substr(0, str.length - 1)
    }
  },
  data () {
    return {
      _time: null, // 定时器，自动化提交
      exam: {
        // id: '1',
        // title: '标题',
        // type: 0, // 0: 暂存，可以继续答题；1: 提交，不能再继续答题
        // radioList: [
        //   {
        //     id: '6622309081933676544',
        //     content: '\u5047\u8bbe\u8d27\u5e01\u9700\u6c42\u4e3aL=ky-hr\uff0c\u8d27\u5e01\u4f9b\u7ed9\u589e\u52a010\u4ebf\u7f8e\u5143\u800c\u5176\u5b83\u6761\u4ef6\u4e0d\u53d8\uff0c\u5219\u4f1a\u4f7fLM \u66f2\u7ebf( )',
        //     options: [
        //       {
        //         id: '6622310260604403712',
        //         option: '\u53f3\u79fb10\u4ebf\u7f8e\u5143'
        //       },
        //       {
        //         id: '6622310260604403713',
        //         option: '\u53f3\u79fb k\u4e58\u4ee510\u4ebf\u7f8e\u5143'
        //       },
        //       {
        //         id: '6622310260604403714',
        //         option: '\u53f3\u79fb10\u4ebf\u7f8e\u5143\u9664\u4ee5k'
        //       },
        //       {
        //         id: '6622310260604403715',
        //         option: '\u53f3\u79fb k\u9664\u4ee510\u4ebf\u7f8e\u5143'
        //       }
        //     ],
        //     user_answer: '6622310260604403714',
        //     right_answer: '6622310260604403714',
        //     get_score: 30,
        //     score: 30
        //   }
        // ],
        // checkboxList: [
        //   {
        //     id: '6622310510798831616',
        //     content: '\u51ef\u6069\u65af\u5b8f\u89c2\u7ecf\u6d4e\u7406\u8bba\u7684\u4e3b\u8981\u524d\u63d0\u5305\u62ec\uff08\uff09',
        //     options: [
        //       {
        //         id: '6622310872641437696',
        //         option: '\u8fb9\u9645\u6d88\u8d39\u503e\u5411\u9012\u51cf'
        //       },
        //       {
        //         id: '6622310872641437697',
        //         option: '\u8d44\u672c\u8fb9\u9645\u6548\u7387\u9012\u51cf'
        //       },
        //       {
        //         id: '6622310872641437698',
        //         option: '\u4e0d\u786e\u5b9a\u6027\u4e0e\u6d41\u52a8\u6027\u504f\u597d'
        //       },
        //       {
        //         id: '6622310872641437699',
        //         option: '\u540d\u4e49\u5de5\u8d44\u521a\u6027'
        //       }
        //     ],
        //     user_answer: [
        //       '6622310872641437697',
        //       '6622310872641437698',
        //       '6622310872641437699'
        //     ],
        //     right_answer: [
        //       '6622310872641437697',
        //       '6622310872641437698'
        //     ],
        //     get_score: 30,
        //     score: 30
        //   }
        // ],
        // shortAnswerList: [
        //   {
        //     id: '6622311487476072448',
        //     content: '\u8bba\u8ff01929\u5e74\u7f8e\u56fd\u4e3a\u4ec0\u4e48\u4f1a\u51fa\u73b0\u5927\u8427\u6761\u3002',
        //     user_answer: '2018\u5e74\u79ef\u6781\u7684\u8d22\u653f\u653f\u7b56\u5bf9\u4f9b\u7ed9\u6027\u7ed3\u6784\u6027\u6539\u9769\u6709\u4e00\u5b9a\u7684\u63a8\u52a8\u4f5c\u7528\u3002\u623f\u5730\u4ea7\u5e02\u573a\u5f97\u5230\u4e00\u5b9a\u7a0b\u5ea6\u6291\u5236\u3002\u7ecf\u6d4e\u53d1\u5c55\u5e73\u7a33\uff0c\u7ecf\u6d4e\u8fd0\u884c\u5728\u5408\u7406\u533a\u95f4\u3002\u964d\u7a0e\u4e3e\u52a8\u53d6\u5f97\u6210\u6548\uff0c\u5168\u5e74\u56fd\u5185\u589e\u503c\u7a0e\u3001\u4f01\u4e1a\u6240\u5f97\u7a0e\u3001\u4e2a\u4eba\u6240\u5f97\u7a0e\u540c\u6bd4\u5206\u522b\u589e\u957f9.1%\u300110%\u300115.9%\uff0c\u5206\u522b\u62c9\u9ad8\u5168\u56fd\u8d22\u653f\u6536\u5165\u589e\u5e453\u4e2a\u30011.9\u4e2a\u30011.1\u4e2a\u767e\u5206\u70b9\uff0c\u6709\u53d1\u6325\u51fa\u5b8f\u89c2\u8c03\u63a7\u7684\u4f5c\u7528\u3002\u4ece2018\u5e74\u8d27\u5e01\u653f\u7b56\u6574\u4f53\u6765\u770b\uff0c\u8f83\u597d\u5730\u628a\u63e1\u4e86\u652f\u6301\u5b9e\u4f53\u7ecf\u6d4e\u548c\u517c\u987e\u5185\u5916\u90e8\u5747\u8861\u4e4b\u95f4\u7684\u5e73\u8861\uff0c\u53d6\u5f97\u4e86\u79ef\u6781\u6210\u6548\uff0c\u4e5f\u5f88\u597d\u5730\u9632\u8303\u4e86\u91d1\u878d\u98ce\u9669\u30022018\u5e74\u603b\u4f53\u4fdd\u6301\u4e86\u9002\u5b9c\u7684\u8d27\u5e01\u91d1\u878d\u73af\u5883\uff0c\u65e0\u8bba\u662f\u5404\u9879\u8d37\u6b3e\u8fd8\u662f\u666e\u60e0\u53e3\u5f84\u5c0f\u5fae\u8d37\u6b3e\u90fd\u540c\u6bd4\u5927\u5e45\u591a\u589e\uff0cM2\u548c\u793e\u4f1a\u878d\u8d44\u89c4\u6a21\u5b58\u91cf\u540c\u6bd4\u589e\u901f\u4e0e\u540d\u4e49GDP\u589e\u901f\u57fa\u672c\u5339\u914d\uff0c\u6709\u529b\u4fc3\u8fdb\u4e86\u6211\u56fd\u7ecf\u6d4e\u6301\u7eed\u5065\u5eb7\u53d1\u5c55\u3002\u6211\u56fd\u5b9e\u65bd\u79ef\u6781\u7684\u8d22\u653f\u653f\u7b56\u548c\u7a33\u5065\u7684\u8d27\u5e01\u653f\u7b56\uff0c\u4e00\u65b9\u9762\u80fd\u4ee5\u653f\u7b56\u7684\u7a33\u5b9a\u6765\u5e94\u5bf9\u5916\u90e8\u73af\u5883\u7684\u4e0d\u7a33\u5b9a\uff0c\u5728\u9762\u5bf9\u4e16\u754c\u73af\u5883\u53d8\u5316\u65f6\u80fd\u968f\u65f6\u628a\u63e1\u4f4f\u6218\u7565\u4e3b\u52a8\u6027\uff1b\u540c\u65f6\u80fd\u591f\u79ef\u6781\u4fc3\u8fdb\u6211\u56fd\u4f9b\u7ed9\u4fa7\u7ed3\u6784\u6027\u6539\u9769\u8fdb\u7a0b\uff0c\u652f\u6301\u89e3\u51b3\u7ecf\u6d4e\u53d1\u5c55\u4e2d\u7684\u6df1\u5c42\u6b21\u7ed3\u6784\u6027\u95ee\u9898\uff0c\u63d0\u5347\u6211\u56fd\u7ecf\u6d4e\u53d1\u5c55\u8d28\u91cf\u548c\u6548\u7387\u3002\u5b8f\u89c2\u653f\u7b56\u7684\u5b9e\u65bd\u4e5f\u5de9\u56fa\u4e86\u6211\u56fd\u5e73\u7a33\u53d1\u5c55\u7684\u7ecf\u6d4e\u57fa\u7840\uff0c\u4e3a\u5168\u9762\u5efa\u6210\u5c0f\u5eb7\u793e\u4f1a\u63d0\u4f9b\u4e86\u575a\u5f3a\u6709\u529b\u7684\u7ecf\u6d4e\u63aa\u65bd\u4fdd\u969c\u3002',
        //     check_comment: '\u5361\u5c3c\u66fc\u8ba4\u4e3a\u4eba\u7684\u5927\u8111\u5b58\u5728\u4e24\u4e2a\u7cfb\u7edf\uff0c\u4e24\u4e2a\u7cfb\u7edf\u5206\u522b\u6709\u5feb\u4e0e\u6162\u4e24\u79cd\u4f5c\u51b3\u5b9a\u7684\u65b9\u5f0f\u611f\u6027\u8ba4\u8bc6\u548c\u7406\u6027\u8ba4\u8bc6\u662f\u540c\u4e00\u8ba4\u8bc6\u8fc7\u7a0b\u7684\u4e24\u4e2a\u9636\u6bb5\u3002\u4e8c\u8005\u65e2\u76f8\u4e92\u5bf9\u7acb\u53c8\u76f8\u4e92\u7edf\u4e00\u3002\u6211\u4eec\u79f0\u4f5c\u7cfb\u7edf1\u548c\u7cfb\u7edf2\uff0c\u4ed6\u7684\u7406\u8bba\u4e0e\u6211\u4eec\u719f\u77e5\u7684\u611f\u6027\u8ba4\u8bc6\u548c\u7406\u6027\u8ba4\u8bc6\u7684\u8fc7\u7a0b\u7684\u4e24\u4e2a\u9636\u6bb5\u6709\u5f88\u76f8\u4f3c\u7684\u7406\u8bba\u6216\u8005\u8bf4\u662f\u4e0d\u662f\u5c5e\u4e8e\u540c\u4e00\u4e2a\u7406\u8bba\u57fa\u7840\u3002',
        //     get_score: 30,
        //     score: 40,
        //     attachments: [],
        //     upload: {
        //       type: 'upload-form',
        //       label: '附件上传：',
        //       model: 'attachments',
        //       action: webConf.apiBaseURL + '/util/upload-file',
        //       data: {
        //         special: 'exam'
        //       },
        //       attrs: {
        //         multiple: true,
        //         headers: {
        //           'tenant': 'sofia'
        //         }
        //       },
        //       html: `
        //         <div style="color: #72818c; font-size: 14px;">
        //           <p style="margin: 0;">支持doc,docx,ppt,xls,txt,rar,zip,pdf,jpg,pic,png格式的文件，文件小于30M。</p>
        //         </div>
        //       `
        //     }
        //   },
        //   {
        //     id: '6622311487476072448',
        //     content: '\u8bba\u8ff01929\u5e74\u7f8e\u56fd\u4e3a\u4ec0\u4e48\u4f1a\u51fa\u73b0\u5927\u8427\u6761\u3002',
        //     user_answer: '2018\u5e74\u79ef\u6781\u7684\u8d22\u653f\u653f\u7b56\u5bf9\u4f9b\u7ed9\u6027\u7ed3\u6784\u6027\u6539\u9769\u6709\u4e00\u5b9a\u7684\u63a8\u52a8\u4f5c\u7528\u3002\u623f\u5730\u4ea7\u5e02\u573a\u5f97\u5230\u4e00\u5b9a\u7a0b\u5ea6\u6291\u5236\u3002\u7ecf\u6d4e\u53d1\u5c55\u5e73\u7a33\uff0c\u7ecf\u6d4e\u8fd0\u884c\u5728\u5408\u7406\u533a\u95f4\u3002\u964d\u7a0e\u4e3e\u52a8\u53d6\u5f97\u6210\u6548\uff0c\u5168\u5e74\u56fd\u5185\u589e\u503c\u7a0e\u3001\u4f01\u4e1a\u6240\u5f97\u7a0e\u3001\u4e2a\u4eba\u6240\u5f97\u7a0e\u540c\u6bd4\u5206\u522b\u589e\u957f9.1%\u300110%\u300115.9%\uff0c\u5206\u522b\u62c9\u9ad8\u5168\u56fd\u8d22\u653f\u6536\u5165\u589e\u5e453\u4e2a\u30011.9\u4e2a\u30011.1\u4e2a\u767e\u5206\u70b9\uff0c\u6709\u53d1\u6325\u51fa\u5b8f\u89c2\u8c03\u63a7\u7684\u4f5c\u7528\u3002\u4ece2018\u5e74\u8d27\u5e01\u653f\u7b56\u6574\u4f53\u6765\u770b\uff0c\u8f83\u597d\u5730\u628a\u63e1\u4e86\u652f\u6301\u5b9e\u4f53\u7ecf\u6d4e\u548c\u517c\u987e\u5185\u5916\u90e8\u5747\u8861\u4e4b\u95f4\u7684\u5e73\u8861\uff0c\u53d6\u5f97\u4e86\u79ef\u6781\u6210\u6548\uff0c\u4e5f\u5f88\u597d\u5730\u9632\u8303\u4e86\u91d1\u878d\u98ce\u9669\u30022018\u5e74\u603b\u4f53\u4fdd\u6301\u4e86\u9002\u5b9c\u7684\u8d27\u5e01\u91d1\u878d\u73af\u5883\uff0c\u65e0\u8bba\u662f\u5404\u9879\u8d37\u6b3e\u8fd8\u662f\u666e\u60e0\u53e3\u5f84\u5c0f\u5fae\u8d37\u6b3e\u90fd\u540c\u6bd4\u5927\u5e45\u591a\u589e\uff0cM2\u548c\u793e\u4f1a\u878d\u8d44\u89c4\u6a21\u5b58\u91cf\u540c\u6bd4\u589e\u901f\u4e0e\u540d\u4e49GDP\u589e\u901f\u57fa\u672c\u5339\u914d\uff0c\u6709\u529b\u4fc3\u8fdb\u4e86\u6211\u56fd\u7ecf\u6d4e\u6301\u7eed\u5065\u5eb7\u53d1\u5c55\u3002\u6211\u56fd\u5b9e\u65bd\u79ef\u6781\u7684\u8d22\u653f\u653f\u7b56\u548c\u7a33\u5065\u7684\u8d27\u5e01\u653f\u7b56\uff0c\u4e00\u65b9\u9762\u80fd\u4ee5\u653f\u7b56\u7684\u7a33\u5b9a\u6765\u5e94\u5bf9\u5916\u90e8\u73af\u5883\u7684\u4e0d\u7a33\u5b9a\uff0c\u5728\u9762\u5bf9\u4e16\u754c\u73af\u5883\u53d8\u5316\u65f6\u80fd\u968f\u65f6\u628a\u63e1\u4f4f\u6218\u7565\u4e3b\u52a8\u6027\uff1b\u540c\u65f6\u80fd\u591f\u79ef\u6781\u4fc3\u8fdb\u6211\u56fd\u4f9b\u7ed9\u4fa7\u7ed3\u6784\u6027\u6539\u9769\u8fdb\u7a0b\uff0c\u652f\u6301\u89e3\u51b3\u7ecf\u6d4e\u53d1\u5c55\u4e2d\u7684\u6df1\u5c42\u6b21\u7ed3\u6784\u6027\u95ee\u9898\uff0c\u63d0\u5347\u6211\u56fd\u7ecf\u6d4e\u53d1\u5c55\u8d28\u91cf\u548c\u6548\u7387\u3002\u5b8f\u89c2\u653f\u7b56\u7684\u5b9e\u65bd\u4e5f\u5de9\u56fa\u4e86\u6211\u56fd\u5e73\u7a33\u53d1\u5c55\u7684\u7ecf\u6d4e\u57fa\u7840\uff0c\u4e3a\u5168\u9762\u5efa\u6210\u5c0f\u5eb7\u793e\u4f1a\u63d0\u4f9b\u4e86\u575a\u5f3a\u6709\u529b\u7684\u7ecf\u6d4e\u63aa\u65bd\u4fdd\u969c\u3002',
        //     check_comment: '\u5361\u5c3c\u66fc\u8ba4\u4e3a\u4eba\u7684\u5927\u8111\u5b58\u5728\u4e24\u4e2a\u7cfb\u7edf\uff0c\u4e24\u4e2a\u7cfb\u7edf\u5206\u522b\u6709\u5feb\u4e0e\u6162\u4e24\u79cd\u4f5c\u51b3\u5b9a\u7684\u65b9\u5f0f\u611f\u6027\u8ba4\u8bc6\u548c\u7406\u6027\u8ba4\u8bc6\u662f\u540c\u4e00\u8ba4\u8bc6\u8fc7\u7a0b\u7684\u4e24\u4e2a\u9636\u6bb5\u3002\u4e8c\u8005\u65e2\u76f8\u4e92\u5bf9\u7acb\u53c8\u76f8\u4e92\u7edf\u4e00\u3002\u6211\u4eec\u79f0\u4f5c\u7cfb\u7edf1\u548c\u7cfb\u7edf2\uff0c\u4ed6\u7684\u7406\u8bba\u4e0e\u6211\u4eec\u719f\u77e5\u7684\u611f\u6027\u8ba4\u8bc6\u548c\u7406\u6027\u8ba4\u8bc6\u7684\u8fc7\u7a0b\u7684\u4e24\u4e2a\u9636\u6bb5\u6709\u5f88\u76f8\u4f3c\u7684\u7406\u8bba\u6216\u8005\u8bf4\u662f\u4e0d\u662f\u5c5e\u4e8e\u540c\u4e00\u4e2a\u7406\u8bba\u57fa\u7840\u3002',
        //     get_score: 30,
        //     score: 40,
        //     attachments: [],
        //     upload: {
        //       type: 'upload-form',
        //       label: '附件上传：',
        //       model: 'attachments',
        //       action: webConf.apiBaseURL + '/util/upload-file',
        //       data: {
        //         special: 'exam'
        //       },
        //       attrs: {
        //         multiple: true
        //       },
        //       html: `
        //         <div style="color: #72818c; font-size: 14px;">
        //           <p style="margin: 0;">支持doc,docx,ppt,xls,txt,rar,zip,pdf,jpg,pic,png格式的文件，文件小于30M。</p>
        //         </div>
        //       `
        //     }
        //   }
        // ]
      }
    }
  },
  mounted () {
    this.loadAjax()

    if (this._time) {
      clearInterval(this._time)
      this._time = null
    }
    this._time = setInterval(() => {
      if (!this.exam.type) {
        this.submitExam({ submitType: true }) // 暂存, submitType: true 暂存；其他或不填为提交
      } else {
        clearInterval(this._time)
        this._time = null
      }
    }, 30000)
  },
  destroyed () {
    if (this._time) {
      console.log(11)
      clearInterval(this._time)
      this._time = null
    }
  },
  methods: {
    isCheckboxRight: (val, arr) => {
      let flag = true
      for (let i = 0; i < arr.length; i++) {
        const tmpId = arr[i]
        let j = 0
        for (; j < val.length; j++) {
          if (val[j] === tmpId) {
            break
          }
        }
        if (j === val.length) { flag = false; break }
      }
      return flag
    },
    isCheckboxChecked: (val, arr) => {
      let i = 0
      for (; i < arr.length; i++) {
        if (arr[i].id === val || arr[i] === val) {
          return true
        }
      }
      return false
    },
    initckeditor () {
      if (!this.exam.shortAnswerList) { return }
      /* 删除所有 ckeditor 实例 */
      const instances = CKEDITOR.instances
      for (const name in instances) { instances[name].destroy() }
      for (let i = 0; i < this.exam.shortAnswerList.length; i++) {
        if (!instances['editor-exam' + i]) {
          CKEDITOR.replace('editor-exam' + i, {
            height: 300,
            uiColor: '#eeeeee',
            filebrowserImageUploadUrl: '/api/ckeditor/img/upload',
            // resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true,
            toolbar: [
              // { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview'] },
              { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
              { name: 'colors', items: ['TextColor', 'BGColor'] },
              { name: 'tools', items: ['Maximize', 'ShowBlocks'] },
              // { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
              { name: 'editing', items: ['Find', 'Replace'] },
              // { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },
              '/',
              { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
              { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
              { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
              { name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] }
            ]
          })
        }
        this.exam.shortAnswerList[i].ckeditor = instances['editor-exam' + i]
      }
    },
    /**
     * 生命周期函数--监听页面加载
     */
    loadAjax () {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      if (this.id !== '0') {
        cAction.examAction.getExamAnswer(this.cid, this.sid, this.id).then(_data => {
          if (_data.code === 8001) {
            cAction.examAction.getExamInfo(this.cid, this.sid).then(_data => {
              this.exam = _data
              this.exam.id = this.id
            }).catch(e => { this.$message.error(e.message) }).finally(() => {
              /* 滚动到头部 */
              document.querySelector('.play-paper').scrollTop = 0
              loading.close()
              this.initckeditor()
            })
            return
          }
          this.exam = _data
          this.exam.id = this.id
        }).catch(e => { this.$message.error(e.message) }).finally(() => {
          /* 滚动到头部 */
          document.querySelector('.play-paper').scrollTop = 0
          loading.close()
          this.initckeditor()
        })
      } else {
        cAction.examAction.getExamInfo(this.cid, this.sid).then(_data => {
          this.exam = _data
          this.exam.id = this.id
        }).catch(e => { this.$message.error(e.message) }).finally(() => {
          /* 滚动到头部 */
          document.querySelector('.play-paper').scrollTop = 0
          loading.close()
          this.initckeditor()
        })
      }
    },
    /**
     * 提交试题
     */
    submitExam (e) {
      if (!e.submitType && e.currentTarget.dataset.submit) {
        this.$message.error('已做过，不能再提交')
        return
      }
      const body = { answers: {}, type: !e.submitType ? 1 : 0 } // type: 0 缓存；type: 1 提交
      body.answers.radioList = []
      for (let i = 0; i < this.exam.radioList.length; i++) {
        const tmp = this.exam.radioList[i]
        if (!tmp.user_answer && !e.submitType) {
          this.$message.error('还有单选题未做，不能提交')
          return
        }
        body.answers.radioList.push({
          id: tmp.id,
          user_answer: tmp.user_answer
        })
      }
      body.answers.checkboxList = []
      for (let i = 0; i < this.exam.checkboxList.length; i++) {
        const tmp = this.exam.checkboxList[i]
        if (!tmp.user_answer.length && !e.submitType) {
          this.$message.error('还有多选题未做，不能提交')
          return
        }
        body.answers.checkboxList.push({
          id: tmp.id,
          user_answer: tmp.user_answer
        })
      }
      body.answers.shortAnswerList = []
      for (let i = 0; i < this.exam.shortAnswerList.length; i++) {
        const tmp = this.exam.shortAnswerList[i]
        tmp.user_answer = tmp.ckeditor.getData()
        if (!tmp.user_answer && !e.submitType) {
          this.$message.error('还有简答题未做，不能提交')
          return
        }
        body.answers.shortAnswerList.push({
          id: tmp.id,
          user_answer: Base64.encode(tmp.user_answer, 'utf-8'),
          attachments: tmp.attachments
        })
      }
      body.answers = JSON.stringify(body.answers)
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.examAction.submitExam(this.cid, this.sid, this.exam.id, body).then(_res => {
        if (e.submitType) {
          this.$message.success('暂存成功')
          return
        }
        if (_res.code === 200) {
          this.loadAjax()
        } else {
          this.$message.error(_res.data.error)
        }
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    _SubmitMouseLeftDown () {
      const _fn1 = this.repeatExam.bind(this, false)
      document.addEventListener('keydown', _fn1, false)
      const _fn3 = function () {
        document.removeEventListener('keydown', _fn1)
        document.removeEventListener('mouseup', _fn3)
      }
      document.addEventListener('mouseup', _fn3, false)
    },
    /**
     * 重做
     */
    repeatExam (e, flag) {
      let _flag = flag
      /* 字母 f */
      if (e.keyCode === 70) {
        _flag = true
      }
      if (!_flag) { return }
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Player.getExamDetail(this.sid, this.cid, this.id).then(_data => {
        this.exam = {}
      }).catch(e => { this.$message.error(e.message) }).finally(() => {
        loading.close()
      })
    }
  },
  watch: {
    id: {
      handler () {
        this.loadAjax()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.play {
  .exam { padding: 0; }
  .exam .topic { display: inline-block; margin-bottom: 0.1rem; }
  .exam .topic .tit { margin: 0 auto; padding: 0 0.2rem; text-align: center; font-size: 0.24rem; color: #313131; background: #fff; box-sizing: border-box; -webkit-box-sizing: border-box; }
  .exam .topic .cur { text-align: center; font-size: 0.18rem; color: #313131; line-height: 0.4rem; }
  /* 循环 所有选择题 */
  .exam .q-group { padding: 0.1rem 0.1rem; border-bottom: 1px solid #c9c9c97a; overflow: hidden; }
  .exam .q-group .q-num { float: left; margin-right: 0.1rem; font-size: 0.16rem; color: #676a6c; }
  .exam .q-group .q-title { float: left; width: 90%; font-size: 0.16rem; color: #676a6c; text-align: justify; }
  .exam .q-group .q-type { float: right; font-size: 0.16rem; color: #676a6c; }
  .exam .q-group .radio-group { float: left; margin-top: 0.1rem; width: 100%; }
  .exam .q-group .radio-group .radio { display: block; font-size: 0.18rem; color: #3f3b3a; line-height: 0.3rem; margin-bottom: 0.1rem; }
  .exam .q-group .checkbox-group { float: left; margin-top: 0.1rem; width: 100%; }
  .exam .q-group .checkbox-group .checkbox { display: block; font-size: 0.18rem; color: #3f3b3a; line-height: 0.3rem; margin-bottom: 0.1rem; }
  .exam .q-group .radio-group .radio.error, .exam .q-group .checkbox-group .checkbox.error { color: #d80000; }
  .exam .q-group .radio-group .radio.success, .exam .q-group .checkbox-group .checkbox.success { color: #090; }
  .exam .q-group .result { float: right; font-size: 0.18rem; color: #3f3b3a; margin-right: 0; }
  .exam .q-group .result .stu { display: inline-block; }
  .exam .q-group .result .stu.error { color: #d80000; }
  .exam .q-group .result .stu.success { color: #090; }
  .exam .q-group:last-child { border-bottom: none; }
  .exam .btn { margin: 0.2rem auto; width: 60%; height: 0.5rem; line-height: 0.5rem; font-size: 0.16rem; text-align: center; font-weight: 300; color: #fff; border-radius: 0.1rem; background: #b49441; cursor: pointer; }
  .exam .btn.on { opacity: 0.5; }
  .exam .care { font-size: 0.16rem; color: #d80000; text-align: center; }

  .exam .q-sa-title {
    float: left;
    width: 100%;
    font-size: 0.16rem;
    color: #676a6c;
    text-align: justify;
  }
}
</style>
