<template>
  <div class="app-warp">
    <div class="detail-structure">
      <el-page-header :content="inherit_content" @back="goBack"/>
      <div class="detail-container">
        <div class="level-title">
          <h1>试卷基本信息</h1>
        </div>
        <el-form ref="form" :model="form" :form="form" :rules="rules" label-width="150px" class="detail_form">
          <el-form-item label="试卷名称" prop="EXAMNAME">
            <el-input id="EXAMNAME" ref="EXAMNAME" v-model="form.EXAMNAME" maxlength="255" placeholder="这里输入试卷名称..." title="试卷名称"/>
          </el-form-item>
          <el-form-item label="培训类型" >
            <div @click="dialogFormVisible = true">
              <el-input
                v-model="trainAllName"
                :readonly="true"
                maxlength="255"
                placeholder="这里输入培训类型..."
                title="培训类型"/>
            </div>
          </el-form-item>
          <el-form-item label="总分数" prop="EXAMSCORE">
            <el-input id="EXAMSCORE" ref="EXAMSCORE" v-model="form.EXAMSCORE" oninput="if(value<0)value=0" type="number" maxlength="255" placeholder="这里输入总分数..." title="总分数"/>
          </el-form-item>
          <el-form-item label="合格分数" prop="PASSSCORE">
            <el-input id="PASSSCORE" ref="PASSSCORE" :min="0" v-model="form.PASSSCORE" oninput="if(value<0)value=0" type="number" maxlength="255" placeholder="这里输入合格分数..." title="合格分数"/>
          </el-form-item>
          <el-form-item label="是否上架" prop="ISSELL">
            <el-radio-group v-model="form.ISSELL">
              <el-radio :label="'1'">上架</el-radio>
              <el-radio :label="'0'">下架</el-radio>
            </el-radio-group>
          </el-form-item>
          <!--          <el-form-item label="试卷属性" prop="COLLECTIVE">-->
          <!--            <el-radio-group v-model="form.COLLECTIVE">-->
          <!--              <el-radio :label="0">平台通用</el-radio>-->
          <!--              <el-radio :label="1">机构专用</el-radio>-->
          <!--            </el-radio-group>-->
          <!--          </el-form-item>-->
        </el-form>

        <div class="study-papg">
          <div class="level-title">
            <h1>试卷题目信息</h1>
          </div>
          <div class="flex-layout space-between" style="padding:10px 22px 0">
            <div>
              <el-form inline="true" >
                <el-form-item label="题目内容：">
                  <el-input v-model="KEYWORDS" placeholder="题目内容..."/>
                </el-form-item>
                <el-form-item label="题目类型：">
                  <el-select v-model="QUESTIONTYPE" placeholder="请选择" @change="clearAnswer">
                    <el-option v-for="item in questiontypeOptions" :key="item.value" :label="item.label" :value="item.value"/>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getQueList">查询</el-button>
                  <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-button v-show="add" type="primary" style="margin-bottom:18px" @click = "goAddQue">新增试题</el-button>
          </div>
          <dl v-for="(row,i) 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>
              {{ i + 1 }}.{{ 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>
                <el-button @click="goEditQue(row, i)">编辑</el-button>
                <el-button @click="goDeleteQue(row,i)">删除</el-button>
              </div>
            </div>
          </dl>
          <div class="page-btn-group" style="padding-bottom:20px">
            <div/>
            <!--            <pagination v-if="inputQue && inputQue.length" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getQueList" />-->
          </div>
        </div>

        <div class="detail_foot">
          <el-button type="primary" @click="confirm">
            <template>继承试卷</template>
          </el-button>
          <el-button type="warning" @click="saveCache">
            <template>保存至草稿箱</template>
          </el-button>
          <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        </div>
      </div>

    </div>

    <el-dialog v-if="dialogFormEdit" :visible.sync="dialogFormEdit" :title="queDialogType==='edit'?'修改':'新增'" width="600px">
      <el-form ref="queForm" :rules="queRules" :model="queForm" label-width="110px" style="width: 500px;">
        <!--          <el-form-item label="题号" prop="QUESTIONNUMBER">-->
        <!--            <el-input id="QUESTIONNUMBER" ref="QUESTIONNUMBER" v-model.number="form.QUESTIONNUMBER" maxlength="11" placeholder="这里输入题号..." title="题号"/>-->
        <!--          </el-form-item>-->
        <el-form-item label="试题类型" prop="QUESTIONTYPE">
          <el-select v-model="queForm.QUESTIONTYPE" placeholder="请选择" @change="clearAnswer">
            <el-option v-for="item in questiontypeOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="题干" prop="QUESTIONDRY">
          <el-input id="QUESTIONDRY" ref="QUESTIONDRY" v-model="queForm.QUESTIONDRY" type="textarea" maxlength="255" placeholder="这里输入题干..." title="题干"/>
        </el-form-item>
        <el-form-item v-if="queForm.QUESTIONTYPE !== '3' && queForm.QUESTIONTYPE !== '4'" label="选项A" prop="OPTIONA">
          <el-input id="OPTIONA" ref="OPTIONA" v-model="queForm.OPTIONA" maxlength="255" placeholder="这里输入选项A..." title="选项A"/>
        </el-form-item>
        <el-form-item v-if="queForm.QUESTIONTYPE !== '3' && queForm.QUESTIONTYPE !== '4'" label="选项B" prop="OPTIONB">
          <el-input id="OPTIONB" ref="OPTIONB" v-model="queForm.OPTIONB" maxlength="255" placeholder="这里输入选项B..." title="选项B"/>
        </el-form-item>
        <el-form-item v-if="queForm.QUESTIONTYPE !== '3' && queForm.QUESTIONTYPE !== '4'" label="选项C" prop="OPTIONC">
          <el-input id="OPTIONC" ref="OPTIONC" v-model="queForm.OPTIONC" maxlength="255" placeholder="这里输入选项C..." title="选项C"/>
        </el-form-item>
        <el-form-item v-if="queForm.QUESTIONTYPE !== '3' && queForm.QUESTIONTYPE !== '4'" label="选项D" prop="OPTIOND">
          <el-input id="OPTIOND" ref="OPTIOND" v-model="queForm.OPTIOND" maxlength="255" placeholder="这里输入选项D..." title="选项D"/>
        </el-form-item>
        <el-form-item label="答案" prop="ANSWER">
          <el-input v-if="queForm.QUESTIONTYPE === '4'" id="ANSWER" ref="ANSWER" v-model="queForm.ANSWER" maxlength="255" placeholder="这里输入答案" title="答案"/>
          <el-select v-else v-model="queForm.ANSWER" placeholder="请选择">
            <el-option v-for="item in answerOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="分值" prop="SCORE">
          <el-input id="SCORE" ref="SCORE" v-model="queForm.SCORE" type="number" maxlength="255" placeholder="这里输入分值" title="分值"/>
        </el-form-item>

<!--        <el-form-item label="试题标签" prop="LABEL_TYPE">-->
<!--          <el-select v-model="queForm.LABEL_TYPE" placeholder="请选择">-->
<!--            <el-option v-for="item in labelTypeList" :key="item.DICTIONARIES_ID" :label="item.NAME" :value="item.DICTIONARIES_ID"/>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="答案解析" prop="DESCR">
          <el-input id="DESCR" ref="DESCR" v-model="queForm.DESCR" type="textarea" maxlength="255" placeholder="这里输入答案解析..." title="答案解析"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">取 消</el-button>
        <el-button type="primary" @click="queConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible" title="培训类型" top="80px" width="1040px">
      <el-form :model="form" class="appformwith">
        <div class="type_field_box">
          <div class="type_field_item">
            <div class="type_field_top">培训类型</div>
            <div class="type_field_content type_pa">
              <div
                v-for="(item,i) in trainingList"
                :key="i"
                :class="TRAINTYPE == item.TRAININGTYPE_ID?'type_li_active':''"
                class="type_li"
                @click="checkTrain(item)">
                {{ item.NAME }}
              </div>
            </div>
          </div>
          <div class="type_field_item" style="width:320px">
            <div class="type_field_top">行业类型</div>
            <div class="type_field_content m-scroll-style">

              <div class="type_field_search">
                <el-input
                  v-model="filterText"
                  placeholder="请输入关键字进行过滤..."
                  prefix-icon="el-icon-search"
                  size="mini"
                  clearable/>
              </div>
              <el-tree
                v-loading="treeLoading"
                ref="tree"
                :data="industryTreeData"
                :props="industryProps"
                :check-on-click-node="true"
                :filter-node-method="filterNode"
                :node-key = "industryProps.value"
                :check-strictly="true"
                highlight-current="true"
                class="type_tree"
                @check="treeCheck"
                @node-click="handleNodeClick"/>
            </div>
          </div>
          <div class="type_field_item">
            <div class="type_field_top">岗位类型</div>
            <div class="type_field_content type_pa">
              <div
                v-for="(item,i) in postList"
                :key="i"
                :class="POSTTYPE == item.POSTTYPE_ID?'type_li_active':''"
                class="type_li"
                @click="checkPost(item)">
                {{ item.NAME }}
              </div>
            </div>
          </div>
          <div class="type_field_item">
            <div class="type_field_top">培训级别</div>
            <div class="type_field_content type_pa">
              <div
                v-for="(item,i) in trainLevelList"
                :key="i"
                :class="TRAINLEVEL === item.TRAINLEVEL_ID?'type_li_active':''"
                class="type_li"
                @click="checkTrainLevel(item)">
                {{ item.NAME }}
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectIndustry">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import trainingTypeDialog from '@/components/trainingTypeDialog'
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
import { upload } from '@/utils/upload'
import inherit from '../../curriculum/components/inherit.vue'
export default {
  components: { Pagination, SelectTree, trainingTypeDialog },
  data() {
    return {
      // 培训类型-----
      trainAllName: '',
      TRAINTYPE: '',
      TRAINTYPE_NAME: '',
      POSTTYPE: '',
      TRAINLEVEL: '',
      TRAINLEVEL_NAME: '',
      POSTTYPE_NAME: '',
      TRAININGTYPE_NAME: '',
      trainLevelList: [],
      industryProps: {
        value: 'INDUSTRYTYPE_ID',
        children: 'nodes',
        label: 'NAME'
      },
      // 培训类型-----
      inherit_content: '试卷继承',
      config: config,
      filterText: '',
      queDialogType: 'add',
      add: false,
      del: false,
      edit: false,
      savetype: '0',
      form: {
        STAGEEXAMPAPERINPUT_ID: '',
        EXAMNAME: '',
        TRAINTYPE: '',
        POSTTYPE: '',
        EXAMSCORE: '',
        PASSSCORE: '',
        STATE: '',
        ISSELL: '1',
        COLLECTIVE: 0,
        INDUSTRY1: '',
        INDUSTRY2: '',
        INDUSTRY_END_ID: '',
        INDUSTRY_ALL_NAME: '',
        POSTTYPE_NAME: '',
        TRAININGTYPE_NAME: '',
        trainAllName: ''
      },
      rules: {
        EXAMNAME: [{ required: true, message: '试卷名称不能为空', trigger: 'blur' }],
        EXAMSCORE: [{ required: true, message: '试卷分数不能为空', trigger: 'blur' }],
        PASSSCORE: [{ required: true, message: '通过分数不能为空', trigger: 'blur' }],
        ISSELL: [{ required: true, message: '请选择是否上架', trigger: 'blur' }],
        COLLECTIVE: [{ required: true, message: '请选择试卷属性', trigger: 'blur' }]
      },

      listQuery: {
        page: 1,
        limit: 10
      },

      INDUSTRY1: '',
      INDUSTRY2: '',
      INDUSTRY_END_ID: '',
      INDUSTRY_END_ID_NAME: '',
      dialogFormVisible: false,
      dialogFormEdit: false,
      postList: [],
      trainingList: [],
      labelTypeList: [],
      // 行业类型树
      treeLoading: false,
      industryTreeData: [],

      excelFrom: {
        FFILE: '',
        FFILENAME: ''
      },

      questiontypeOptions: [
        {
          value: '1',
          label: '单选题'
        },
        {
          value: '2',
          label: '多选题'
        },
        {
          value: '3',
          label: '判断题'
        }
      ],
      answerOptions: [],

      queForm: {
        QUESTIONNUMBER: '', // 题号
        LABEL_TYPE: '',
        QUESTIONTYPE: '', // 试题类型（单选题、多选题、判断题、填空题）
        QUESTIONDRY: '', // 题干
        OPTIONA: '', // 选项A
        OPTIONB: '', // 选项B
        OPTIONC: '', // 选项C
        OPTIOND: '', // 选项D
        ANSWER: '', // 答案
        STAGEEXAMPAPERINPUT_ID: this.$parent.STAGEEXAMPAPERINPUT_ID// 试卷ID
      },
      queRules: {
        // QUESTIONNUMBER: [
        //   { required: true, message: '题号不能为空' },
        //   { type: 'number', message: '题号必须为数字' },
        //   { validator: hasQuestionNumber, trigger: 'blur' }],
        QUESTIONTYPE: [{ required: true, message: '试题类型（单选题、多选题、判断题）不能为空', trigger: 'blur' }],
        QUESTIONDRY: [{ required: true, message: '题干不能为空', trigger: 'blur' }],
        OPTIONA: [{ required: true, message: '选项A不能为空', trigger: 'blur' }],
        OPTIONB: [{ required: true, message: '选项B不能为空', trigger: 'blur' }],
        OPTIONC: [{ required: true, message: '选项C不能为空', trigger: 'blur' }],
        OPTIOND: [{ required: true, message: '选项D不能为空', trigger: 'blur' }],
        ANSWER: [{ required: true, message: '答案不能为空', trigger: 'blur' }],
        SCORE: [
          { required: true, message: '分值不能为空', trigger: 'blur' },
          { pattern: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
            message:
              '分值请设定为正数' }
        ],
        LABEL_TYPE: [{ required: true, message: '试题标签不能为空', trigger: 'blur' }],
        STAGEEXAMPAPERINPUT_ID: [{ required: true, message: '试卷ID不能为空', trigger: 'blur' }]
      },
      inputQue: [],
      total: 0,
      queAllScore: '',
      KEYWORDS: '',
      QUESTIONTYPE: '',
      queIndex: 0
    }
  },
  computed: {
    inherit() {
      return inherit
    }
  },
  watch: {
    'TRAINTYPE': {
      handler(newVal, oldVal) {
        this.POSTTYPE = ''
        this.TRAINLEVEL = ''
        this.TRAINLEVEL_NAME = ''
        this.getPostList()
        this.trainLevelList = []
      },
      immediate: false
    },
    'POSTTYPE': {
      handler(newVal, oldVal) {
        // if (!this.initFlag) {
        //   this.initFlag = true
        // }
        this.TRAINLEVEL = ''
        this.TRAINLEVEL_NAME = ''
        this.POSTTYPE = newVal
        this.getTrainLevelList()
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val)
    },

    'queForm.QUESTIONTYPE': {
      handler() {
        if (this.queForm.QUESTIONTYPE === '3') {
          this.queRules.OPTIONC = [{ required: false, message: '选项C不能为空', trigger: 'blur' }]
          this.queRules.OPTIOND = [{ required: false, message: '选项D不能为空', trigger: 'blur' }]
        } else {
          this.queRules.OPTIONC = [{ required: true, message: '选项C不能为空', trigger: 'blur' }]
          this.queRules.OPTIOND = [{ required: true, message: '选项D不能为空', trigger: 'blur' }]
        }
        this.getAnswerList()
      }
    }

  },
  created() {
    this.getTrainingList()
    // this.getPostList()
    this.getTreeList()
    if (this.$parent.STAGEEXAMPAPERINPUT_ID) {
      this.getQueList()
      this.getData()
      this.getDict('a60ebc858e2c46108bf82bbd8acc8f50', 'labelTypeList')
    }
  },
  methods: {
    // 培训类型
    getTrainingList() {
      requestFN(
        '/trainingtype/listAll',
        { }
      ).then((data) => {
        this.trainingList = data.varList
      }).catch((e) => {
      })
    },
    // 岗位类型
    getPostList() {
      requestFN(
        '/posttype/listAll',
        {
          TRAININGTYPE_ID: this.TRAINTYPE
        }
      ).then((data) => {
        this.postList = data.varList
      }).catch((e) => {
      })
    },
    // 行业类型树
    getTreeList() {
      this.treeLoading = true
      requestFN(
        '/industrytype/getIndustryTree'
      ).then((data) => {
        this.treeLoading = false
        this.industryTreeData = data.zTreeNodes
      }).catch((e) => {
        this.treeLoading = false
      })
    },
    // 岗位级别
    getTrainLevelList() {
      requestFN(
        '/trainleveltype/listAll',
        { POSTTYPE_ID: this.POSTTYPE }
      ).then((data) => {
        this.trainLevelList = data.varList
      }).catch((e) => {
      })
    },

    checkPost(item) {
      this.$set(this, 'POSTTYPE', item.POSTTYPE_ID)
      this.$set(this, 'POSTTYPE_NAME', item.NAME)
    },
    checkTrain(item) {
      this.$set(this, 'TRAINTYPE', item.TRAININGTYPE_ID)
      this.$set(this, 'TRAINTYPE_NAME', item.NAME)
    },
    checkTrainLevel(item) {
      this.$set(this, 'TRAINLEVEL', item.TRAINLEVEL_ID)
      this.$set(this, 'TRAINLEVEL_NAME', item.NAME)
    },
    treeCheck(data, list) {
      let thisNode = this.$refs.tree.getNode(data) // 获取当前节点
      this.form.INDUSTRY_ALL_TYPE = []
      this.form.INDUSTRY_ALL_NAME = []
      const keys = [] // 获取已勾选节点的key值
      const names = [] // 获取已勾选节点的key值
      keys.unshift(thisNode.data.INDUSTRYTYPE_ID)
      names.unshift(thisNode.data.NAME)
      if (thisNode.checked) { // 当前节点若被选中
        for (let i = thisNode.level; i > 1; i--) {
          // 当前子节点选中，取消勾选父节点
          this.$refs.tree.setChecked(thisNode.parent, false)
          // 判断是否有父级节点
          if (!thisNode.parent.checked) { // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
            thisNode = thisNode.parent
            keys.unshift(thisNode.data.INDUSTRYTYPE_ID)
            names.unshift(thisNode.data.NAME)
          }
        }
      }
      this.form.INDUSTRY_ALL_TYPE = keys
      this.form.INDUSTRY_ALL_NAME = names
    },
    handleNodeClick(node, data, value) {
      this.INDUSTRY_LAST = node.INDUSTRYTYPE_ID
      this.INDUSTRY_LAST_NAME = node.NAME
    },
    selectIndustry() {
      if (!this.POSTTYPE) {
        this.$message.warning('岗位类型必选')
        return
      }
      if (!this.TRAINTYPE) {
        this.$message.warning('培训类型必选')
        return
      }
      if (!this.TRAINLEVEL) {
        if (this.trainLevelList.length > 0) {
          this.$message.warning('培训级别必选')
          return
        }
      }
      if (!this.INDUSTRY_LAST) {
        this.$message.warning('行业类型必选')
        return false
      }
      this.form.TRAINTYPE = this.TRAINTYPE
      this.form.TRAINTYPE_NAME = this.TRAINTYPE_NAME
      this.form.TRAINLEVEL = this.TRAINLEVEL
      this.form.TRAINLEVEL_NAME = this.TRAINLEVEL_NAME
      this.form.POSTTYPE = this.POSTTYPE
      this.form.POSTTYPE_NAME = this.POSTTYPE_NAME
      this.form.INDUSTRY_LAST = this.INDUSTRY_LAST
      this.form.INDUSTRY_LAST_NAME = this.INDUSTRY_LAST_NAME

      var pn = this.form.POSTTYPE_NAME ? '-' + this.form.POSTTYPE_NAME : ''
      var iname = this.form.INDUSTRY_LAST_NAME ? '-' + this.form.INDUSTRY_LAST_NAME : ''
      var tlName = this.form.TRAINLEVEL_NAME ? '-' + this.form.TRAINLEVEL_NAME : ''
      this.trainAllName = this.form.TRAINTYPE_NAME + iname + pn + tlName
      this.dialogFormVisible = false
    },
    // ---------
    // 保存
    confirm() {
      if (parseFloat(this.form.EXAMSCORE) < parseFloat(this.form.PASSSCORE)) {
        this.$message.warning('试卷总分小于合格分数，请修改')
        return false
      }
      const formData = new FormData()
      Object.keys(this.form).map(key => {
        formData.append(key, this.form[key])
      })
      formData.append('queList', this.inputQue)
      formData.append('INDUSTRY_END_ID', this.form.INDUSTRY_LAST)
      this.$refs.form.validate(valid => {
        if (valid) {
          this.listLoading = true
          requestFN(
            '/stageexampaperinput/inherit',
            {
              ...this.form,
              queList: JSON.stringify(this.inputQue)
            }
          ).then((data) => {
            if (data.result == 'success') {
              this.$message({
                dangerouslyUseHTMLString: true,
                message: '保存成功',
                type: data.result,
                showClose: true,
                duration: 10 * 1000
              })
              this.listLoading = false
              this.$parent.activeName = 'refreshList'
            } else {
              this.$message({
                dangerouslyUseHTMLString: true,
                message: '系统错误，请联系管理员',
                type: 'error',
                showClose: true,
                duration: 10 * 1000
              })
              this.listLoading = false
            }
          }).catch((e) => {
            this.listLoading = false
          })
        } else {
          return false
        }
      })
    },
    // 保存
    saveCache() {
      const formData = new FormData()
      // Object.keys(this.excelFrom).map(key => {
      //   formData.append(key, this.excelFrom[key])
      // })
      Object.keys(this.form).map(key => {
        formData.append(key, this.form[key])
      })
      formData.append('INDUSTRY_END_ID', this.form.INDUSTRY_LAST)
      this.$refs.form.validate(valid => {
        if (valid) {
          this.listLoading = true
          upload(
            '/stageexampaperCache/add',
            formData
          ).then((data) => {
            if (data.result == 'success') {
              this.$message({
                dangerouslyUseHTMLString: true,
                message: '保存成功',
                type: data.result,
                showClose: true,
                duration: 10 * 1000
              })
              this.listLoading = false
              this.$parent.activeName = 'refreshList'
            } else {
              this.$message({
                dangerouslyUseHTMLString: true,
                message: '系统错误，请联系管理员',
                type: 'error',
                showClose: true,
                duration: 10 * 1000
              })
              this.listLoading = false
            }
          }).catch((e) => {
            this.listLoading = false
          })
        } else {
          return false
        }
      })
    },
    trainingTypeDialogConfirm(e) {
      console.log(e)
      Object.keys(e).forEach(key => {
        this.$set(this.form, key, e[key])
      })
    },
    // 获取列表
    getQueList() {
      this.listLoading = true
      requestFN(
        '/paperQuestion/listForInherit',
        {
          KEYWORDS: this.KEYWORDS,
          QUESTIONTYPE: this.QUESTIONTYPE,
          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.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
        this.trainAllName = data.pd.TYPENAME
      }).catch((e) => {
        this.listLoading = false
      })
    },
    goEditQue(row, i) {
      this.queDialogType = 'edit'
      this.resetQueForm()
      this.queForm = Object.assign({}, row)
      this.queIndex = i
      // this.getQueData()
      // this.getDict()
      this.getAnswerList()
      this.dialogFormEdit = true
    },
    // 获取数据字典数据
    getDict(DICTIONARIES_ID, list) {
      requestFN('/dictionaries/getLevels', {
        DICTIONARIES_ID
      }).then((data) => {
        this[list] = data.list
      })
    },
    goDeleteQue(row, queId) {
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        this.form.EXAMSCORE = this.form.EXAMSCORE - row.SCORE
        this.inputQue.splice(queId, 1)
        this.$message.success('删除成功')
      }).catch(() => {
      })
    },
    queConfirm() {
      this.$refs.queForm.validate(valid => {
        if (valid) {
          if (this.queForm.QUESTIONTYPE == '3') {
            this.queForm.OPTIONA = '正确'
            this.queForm.OPTIONB = '错误'
            this.queForm.OPTIONC = ''
            this.queForm.OPTIOND = ''
          }
          if (this.queForm.QUESTIONTYPE == '4') {
            this.queForm.OPTIONA = ''
            this.queForm.OPTIONB = ''
            this.queForm.OPTIONC = ''
            this.queForm.OPTIOND = ''
          }
          var arr = []
          if (this.queForm.QUESTIONTYPE == '3') {
            arr = ['#' + this.queForm.OPTIONA + '#', '#' + this.queForm.OPTIONB + '#']
          } else if (this.queForm.QUESTIONTYPE != '4') {
            arr = ['#' + this.queForm.OPTIONA + '#', '#' + this.queForm.OPTIONB + '#', '#' + this.queForm.OPTIONC + '#', '#' + this.queForm.OPTIOND + '#']
          }
          // 将数组中的元素放在一个字符串中，用逗号分隔
          var s = arr.join(',') + ','
          for (var i = 0; i < arr.length - 1; i++) {
            if (s.replace(arr[i] + ',', '').indexOf(arr[i]) > -1) {
              this.$message.warning('试题答案重复:' + arr[i].split('#').join(''))
              return false
            }
          }
          if (this.queDialogType === 'add') {
            this.inputQue.push(this.queForm)
          } else {
            this.$set(this.inputQue, this.queIndex, this.queForm)
          }
          console.log(this.inputQue)
          this.$nextTick(() => {
            let soc = 0
            for (let i = 0; i < this.inputQue.length; i++) {
              soc += Number(this.inputQue[i].SCORE)
            }
            this.form.EXAMSCORE = Number(soc).toFixed(2)
            this.dialogFormEdit = false
          })
          this.$message.success('编辑成功')
        } else {
          return false
        }
      })
    },

    // 添加试题
    goAddQue() {
      this.queDialogType = 'add'
      this.resetQueForm()
      // this.getDict()
      this.getAnswerList()
      this.dialogFormEdit = true
    },

    getAnswerList() {
      if (this.queForm.QUESTIONTYPE === '1') { // 单选题
        this.answerOptions = [
          { value: 'A', label: 'A' },
          { value: 'B', label: 'B' },
          { value: 'C', label: 'C' },
          { value: 'D', label: 'D' }]
      } else if (this.queForm.QUESTIONTYPE === '2') { // 多选题、
        this.answerOptions = [
          { value: 'AB', label: 'AB' },
          { value: 'AC', label: 'AC' },
          { value: 'AD', label: 'AD' },
          { value: 'BC', label: 'BC' },
          { value: 'BD', label: 'BD' },
          { value: 'CD', label: 'CD' },
          { value: 'ABC', label: 'ABC' },
          { value: 'ABD', label: 'ABD' },
          { value: 'ACD', label: 'ACD' },
          { value: 'BCD', label: 'BCD' },
          { value: 'ABCD', label: 'ABCD' }]
      } else if (this.queForm.QUESTIONTYPE === '3') { // 判断题
        this.answerOptions = [
          { value: 'A', label: '正确' },
          { value: 'B', label: '错误' }]
      } else {
        this.answerOptions = []
      }
    },
    reset() {
      this.KEYWORDS = ''
      this.QUESTIONTYPE = ''
      this.listQuery = {
        page: 1,
        limit: 10
      }
      this.total = 0
      this.getQueList()
    },
    resetQueForm() {
      this.queForm = {
        QUESTIONNUMBER: '', // 题号
        QUESTIONTYPE: '', // 试题类型（单选题、多选题、判断题）
        QUESTIONDRY: '', // 题干
        OPTIONA: '', // 选项A
        OPTIONB: '', // 选项B
        OPTIONC: '', // 选项C
        OPTIOND: '', // 选项D
        ANSWER: '', // 答案
        STAGEEXAMPAPERINPUT_ID: this.$parent.STAGEEXAMPAPERINPUT_ID// 试卷ID
      }
    },
    clearAnswer() {
      this.queForm.ANSWER = ''
    },
    beforeFileUpload(file) {
      this.$set(this.excelFrom, 'FFILE', file)
      this.$set(this.excelFrom, 'FFILENAME', file.name)
      // this.$forceUpdate()
      return false
    },
    getExcelModel() {
      this.$confirm('确定要下载excel模板吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = false
        window.location.href = config.httpurl + 'paperQuestion/downExcel'
      }).catch(() => {
        this.listLoading = false
      })
      this.listLoading = false
    },

    filterNode(value, data) {
      if (!value) return true
      return data.NAME.indexOf(value) !== -1
    },

    goBack() {
      this.$parent.activeName = 'List'
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton: function() {
      var keys = 'stageexampaper:add,stageexampaper:del,stageexampaper:edit,toExcel'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.stageexampaperfhadminadd		// 新增权限
        this.del = data.stageexampaperfhadmindel		// 删除权限
        this.edit = data.stageexampaperfhadminedit	// 修改权限
      }).catch((e) => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="sass" scoped>
.avatar-uploader
  ul
    margin: 0
    li
      padding: 0
.el-dialog__body
  padding: 0
.map-flex
  display: flex
  width: 500px
  align-items: center

.ud-flex
  display: flex
.form-group
  display: flex
  align-items: center
  .form-label
    padding: 0px 15px
    font-size: 14px
    width: 240px
    font-weight: 400
    text-align: right
    margin-bottom: 18px
    .star
      color: red
      padding-right: 4px
  .input-block
    display: flex

.disContent
  display: flex
  align-items: center
  flex-wrap: wrap
  .img-div
    position: relative
    margin: 0 10px 0px 0
    width: 108px
    height: 108px
    border-radius: 4px
    overflow: hidden
    &>img
      width: 100%
      height: 100%

.disContent-hide
  position: absolute
  width: 100%
  height: 100%
  border-radius: 4px
  background-color: rgba(48, 48, 48, 0.59)
  display: none
  top: 0
  left: 0
  line-height: 32px

  .Delete
    position: absolute
    bottom: 14px
    right: 10px
    font-size: 16px
    color: white
    cursor: pointer
  .yuLan
    position: absolute
    bottom: 23px
    right: 50px
    font-size: 16px
    color: white
    cursor: pointer
    .yuLanImg
      position: absolute
      bottom: 0
      right: 0
      width: 100%
      height: 100%
      opacity: 0

.img-div:hover .disContent-hide
  display: block

  .pitchCss
    border: 1px solid #202e78
    transition: all linear 0.1s
    width: 116px
    height: 116px

</style>

