<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="110px" style="width:640px">
      <el-form-item label="课程ID" prop="CURRICULUMID" style="display: none">
        <el-input id="CURRICULUMID" ref="CURRICULUMID" v-model="form.CURRICULUMID" maxlength="255" placeholder="这里输入课程ID..." title="课程ID" />
      </el-form-item>
      <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="考试时间" prop="EXAMTIME">-->
      <!--        <el-date-picker id="EXAMTIME" ref="EXAMTIME" v-model="form.EXAMTIME" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择考试时间（开始时间）"/>-->
      <!--      </el-form-item>-->
      <el-form-item label="答卷时间" prop="ANSWERSHEETTIME">
        <el-select v-model="form.ANSWERSHEETTIME" placeholder="请选择答卷时间">
          <el-option v-for="item in AnswerSheetTimeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="试卷分数" prop="EXAMSCORE" style="display: none">
        <el-input id="EXAMSCORE" ref="EXAMSCORE" v-model="form.EXAMSCORE" maxlength="255" placeholder="这里输入试卷分数..." title="试卷分数" />
      </el-form-item>
      <el-form-item label="适用人员" prop="CURRICULUMUSERS" style="display: none">
        <el-input id="CURRICULUMUSERS" ref="CURRICULUMUSERS" v-model="form.CURRICULUMUSERS" maxlength="255" placeholder="这里输入适用人员..." title="适用人员" />
      </el-form-item>
      <el-form-item label="试题数量" prop="QUESTIONNUM">
        <el-select v-model="form.QUESTIONNUM" placeholder="请选择试题数量">
          <el-option v-for="item in QuestionNumOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="试卷状态" prop="EXAMSTATE">-->
      <!--        <el-input id="EXAMSTATE" ref="EXAMSTATE" v-model="form.EXAMSTATE" maxlength="255" placeholder="这里输入试卷状态..." title="试卷状态"/>-->
      <!--      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align:right">
      <el-button @click="closeExamEdit">取 消</el-button>
      <el-button type="primary" @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 },
  props: {
    curriculumid: {
      type: String,
      default() {
        return ''
      }
    },
    curriculumusers: {
      type: String,
      default() {
        return ''
      }
    },
    questionnumoptions: {
      type: Array,
      default() {
        return [{
          value: '10',
          label: '10'
        }, {
          value: '20',
          label: '20'
        }, {
          value: '50',
          label: '50'
        }, {
          value: '100',
          label: '100'
        }]
      }
    },
    closeExamEdit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      config: config,
      KEYWORDS: '',
      pd: [],
      AnswerSheetTimeOptions: [{
        value: '30',
        label: '30分钟'
      }, {
        value: '60',
        label: '60分钟'
      }, {
        value: '90',
        label: '90分钟'
      }],
      QuestionNumOptions: this.questionnumoptions,
      form: {
        CURRICULUMID: this.curriculumid, // 课程ID
        EXAMNAME: '', // 试卷名称
        EXAMTIME: '', // 考试时间（开始时间）
        ANSWERSHEETTIME: '', // 答卷时间（持续时间）
        EXAMSCORE: 100, // 试卷分数
        CURRICULUMUSERS: this.curriculumusers, // 适用人员
        QUESTIONNUM: '' // 试题数量（10、20、50、100）
        // EXAMSTATE: ''// 试卷状态
      },
      rules: {
        CURRICULUMID: [{ required: true, message: '课程ID不能为空', trigger: 'blur' }],
        EXAMNAME: [{ required: true, message: '试卷名称不能为空', trigger: 'blur' }],
        // EXAMTIME: [{ required: true, message: '考试时间（开始时间）不能为空', trigger: 'blur' }],
        ANSWERSHEETTIME: [{ required: true, message: '答卷时间（持续时间）不能为空', trigger: 'blur' }],
        EXAMSCORE: [{ required: true, message: '试卷分数不能为空', trigger: 'blur' }],
        // CURRICULUMUSERS: [{ required: true, message: '适用人员不能为空', trigger: 'blur' }],
        QUESTIONNUM: [{ required: true, message: '试题数量不能为空', trigger: 'blur' }]
        // EXAMSTATE: [{ required: true, message: '试卷状态不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.handleAdd()
  },
  methods: {
    // 添加
    handleAdd() {
      this.resetForm()
      this.getDict()
    },
    // 保存
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '试卷生成中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          requestFN(
            '/coursepapers/add',
            this.form
          ).then((data) => {
            loading.close()
            this.resetForm()
            this.closeExamEdit()
          }).catch((e) => {
            loading.close()
          })
        } else {
          return false
        }
      })
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton: function() {
      var keys = 'coursepapers:add,coursepapers:del,coursepapers:edit,toExcel'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.coursepapersfhadminadd		// 新增权限
        this.del = data.coursepapersfhadmindel		// 删除权限
        this.edit = data.coursepapersfhadminedit	// 修改权限
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 获取数据字典数据
    getDict: function() {
    },
    resetForm() {
      this.form = {
        CURRICULUMID: this.curriculumid, // 课程ID
        EXAMNAME: '', // 试卷名称
        EXAMTIME: '', // 考试时间（开始时间）
        ANSWERSHEETTIME: '', // 答卷时间（持续时间）
        EXAMSCORE: 100, // 试卷分数
        CURRICULUMUSERS: this.curriculumusers, // 适用人员
        QUESTIONNUM: '', // 试题数量（10、20、50、100）
        EXAMSTATE: ''// 试卷状态
      }
    }
  }
}

</script>
