<!--组卷-->
<style>
  .examCreat_Top {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
  }

  .examTi_List {
    border: 1px solid #ddd;
    margin-bottom: 20px;
  }

  .examCreat_Top i:hover {
    color: red;
    cursor: pointer;
  }

  .setCt {
    margin-bottom: 12px;
  }

  .setCt:after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .papPub_Left {
    display: inline-block;
    width: 104px;
    line-height: 34px;
    margin-top: 10px;
  }

  .f1 {
    float: left;
  }

  .pcomRow {
    align-items: center;
  }

  .selectClass {
    width: 1026px;
    border: 1px dashed #E1E1E5;
    padding-top: 12px;
    border-radius: 4px;
    padding: 12px 4px 0 4px;
    margin-top: 5px;
  }

  .selectClass span {
    display: inline-block;
    background: #F2F5FA;
    padding: 0 10px;
    height: 26px;
    line-height: 26px;
    border-radius: 14px;
    color: #181E33;
    margin-left: 10px;
    margin-bottom: 12px;
    position: relative;
    font-size: 12px;
    cursor: pointer;
  }

  .selectClass span i {
    position: absolute;
    right: -8px;
    top: -10px;
    display: none;
    color: gray;
    cursor: pointer;
  }

  .selectClass span:hover i {
    display: block;
  }

  .paper_QuesDes {
    font-size: 12px;
    color: #A8A8B3;
    display: block;
    margin: 0 0 15px 28px;
  }

  #paper_Publish {
    padding-left: 60px !important;
  }

  #paper_Publish .edui-editor {
    z-index: 99 !important;
  }

  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }

  #paper_Publish .el-date-editor.el-input {
    width: 100%;
  }

  .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    color: #8c939d;
    position: relative;
    overflow: hidden;
  }

  .addDutyMain {
    display: inline-block;
    width: 118px;
    height: 118px;
    font-size: 70px;
    border: 1px dashed #d9d9d9;
    line-height: 120px;
  }

  .ItemImgDiv {
    width: 118px;
    height: 118px;
    position: relative;
    margin: 0 10px 10px 0;
    display: inline-block;
  }
</style>
<template>
  <div class="page-body" id="paper_Publish">
    <div style="margin:5px 0 10px 0;font-size:20px;">发布考试</div>
    <div class="setCt">
      <span class="papPub_Left f1" style="margin-top:0;">发放对象</span>
      <div class="f1" style="margin-top:5px;">
        <q-btn color="accent" size="sm" @click="showClassStu" class="q-mr-md" label="选择学员"  /><br />
        <div class="selectClass" v-if="postMsg.StudentList&&postMsg.StudentList.length>0">
          <span v-for="(item,index) in postMsg.StudentList" :key="index" style="padding-left:5px;">{{item.GuestName}} <i
              class="iconfont icon-shanchu1" @click="delStudentName(index)"></i>
          </span>
        </div>
      </div>
    </div>
    <div class="setCt">
      <span class="papPub_Left f1">发放时间</span>
      <div class="f1">
        <div class="Sysuser_Date" style="width:308px;">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="postMsg.ExamStartTime" value-format='yyyy-MM-dd HH:mm:ss'
                :picker-options="picker" type="datetime" placeholder="开始时间" size="small"
                clear-icon="iconfont icon-guanbi"></el-date-picker>
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <div class="setCt">
      <span class="papPub_Left f1">结束时间</span>
      <div class="f1">
        <div class="Sysuser_Date" style="width:308px;">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="postMsg.ExamEndTime" value-format='yyyy-MM-dd HH:mm:ss' @change="getMinus()"
                type="datetime" :picker-options="pickerEnd" placeholder="结束时间" size="small"
                clear-icon="iconfont icon-guanbi"></el-date-picker> 
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <div class="setCt">
      <span class="papPub_Left f1">考试限时</span>
      <div class="f1">
        <q-input filled bottom-slots maxlength="10" style="width:308px;" :disable="true" v-model="postMsg.ExamTimes"
          :dense="false">
          <template v-slot:append>
            <span style="font-size:12px;">分钟</span>
          </template>
        </q-input>
      </div>
    </div>
    <div class="setCt">
      <span class="papPub_Left f1">限时提交</span>
      <div class="f1">
        <q-input filled bottom-slots maxlength="10" @keyup.native="checkInteger(postMsg,'SubmitTimes')"
          style="width:308px;" v-model="postMsg.SubmitTimes" :dense="false">
          <template v-slot:append>
            <span style="font-size:12px;">分钟内不允许提交</span>
          </template>
        </q-input>
      </div>
    </div>
    <div class="setCt">
      <span class="papPub_Left f1">限时进入</span>
      <div class="f1">
        <q-input filled bottom-slots maxlength="10" @keyup.native="checkInteger(postMsg,'EnterTimes')"
          v-model="postMsg.EnterTimes" :dense="false">
          <template v-slot:append>
            <span style="font-size:12px;">分钟后不允许参加考试</span>
          </template>
        </q-input>
      </div>
    </div>
    <div class="setCt">
      <span class="papPub_Left f1" style="margin-top:0;">防作弊设置</span>
      <div class="f1">
        <q-checkbox size="xs" v-model="postMsg.IsQuestionRandom" :true-value="1" :false-value="0" label="题目乱序" />
        <div class="paper_QuesDes">学生接收到的题目显示顺序不同</div>
        <q-checkbox size="xs" v-model="postMsg.IsOptionRandom" :true-value="1" :false-value="0" label="选项乱序" />
        <div class="paper_QuesDes">学生接收到的题目选项顺序不同</div>
        <q-checkbox size="xs" v-model="postMsg.IsLeaveAnswer" :true-value="1" :false-value="0" label="学生离开作答页面" />
        <template>
          <span style="position:relative;top:2px;">
            &nbsp;<el-input style="width:80px;" size="small" v-model="postMsg.LeaveTimes"
              @keyup.native="checkInteger(postMsg,'LeaveTimes')" maxlength="5"></el-input>
            &nbsp;次，系统强制收卷
          </span>
        </template>
        <div class="paper_QuesDes">系统强制收卷后，教师重新发放试卷，学生可以继续作答</div>
        <div style="margin-bottom:15px;">
          <q-checkbox size="xs" v-model="postMsg.IsDisableMultiTerminal" :true-value="1" :false-value="0"
            label="禁止学生多终端考试" />
        </div>
        <q-checkbox size="xs" v-model="postMsg.IsExamType" :true-value="1" :false-value="0" label="只允许" />
        <template>
          <span style="position:relative;top:2px;">
            &nbsp;<el-select style="width:80px;" size="small" v-model="postMsg.ExamTypeValue">
              <el-option :value="1" label="App"></el-option>
              <el-option :value="2" label="PC"></el-option>
            </el-select> &nbsp;考试
          </span>
        </template>
      </div>
    </div>
    <div class="setCt">
      <span class="papPub_Left f1">考试须知</span>
      <UeEditor v-model="postMsg.ExamNotice" :config="config" style="margin:30px 0 0 110px;z-index:1;width:1026px"
        ref="UE_Title"></UeEditor>
    </div>
    <div style="margin:20px 0">高级设置</div>
    <div class="setCt">
      <span class="papPub_Left f1">交卷设置</span>
      <q-checkbox size="xs" v-model="postMsg.IsAutoSubmit" :true-value="1" :false-value="0" label="考试到达截止时间后自动提交" />
    </div>
    <div class="setCt">
      <span class="papPub_Left f1">评分设置</span>
      <div class="f1">
        <q-checkbox size="xs" v-model="postMsg.FillInIsSubject" :true-value="1" :false-value="0" label="填空类型的题目设为主观题" />
        <div class="paper_QuesDes">填空题类型的包括填空题、分录题、资料题，设为主观题后需教师手动批阅</div>
        <q-checkbox size="xs" v-model="postMsg.FillInIsIgnore" :true-value="1" :false-value="0" label="填空题答案不区分大小写" />
        <div class="paper_QuesDes">勾选后，英文大写和小写都可以得分</div>
        <q-checkbox size="xs" v-model="postMsg.IsHalfScore" :true-value="1" :false-value="0" label="多选题未选全给一半分" />
        <div class="paper_QuesDes">不勾选时全选对才给分</div>
      </div>
    </div>
    <div class="setCt">
      <span class="papPub_Left f1">试卷封面图</span>
      <div class="f1">
        <div style="display:flex;flex-wrap: wrap;">
          <template v-if="postMsg.PublishPic.length>0">
            <div v-for="(item,index) in postMsg.PublishPic">
              <div class="ItemImgDiv">
                <q-img :src="item" spinner-color="white" style="height: 100%;height:100%" />
                <q-btn size="7px" @click="deleteItemImg(index)" style="position:absolute;right:-5px;top:-5px;" round
                  color="red" icon="iconfont icon-guanbi1" />
              </div>
            </div>
          </template>
          <el-upload class="avatar-uploader addDutyMain" action="" v-if="postMsg.PublishPic.length<1"
            :before-upload="uploadFile" :show-file-list="false">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="row">
      <q-btn color="accent" @click="setPublishExam" class="q-mr-md" label="发布考试"  />
    </div>
    <classstutreeForm v-if="isShowClassStu" :sendStudent="sendStudent"  @close="closeClassStuForm"
       @success="getClassStuList">
    </classstutreeForm>
  </div>
</template>
<script>
  import UeEditor from '../../components/editor/UeEditor'
  import classstutreeForm from '../../components/exam/classstutree-form'
  import {
    savePublishExam,
    queryExamPublish,
  } from '../../api/teacher/index';
  import {
    UploadSelfFile,
  } from '../../api/common/common'

  export default {
    components: {
      classstutreeForm,
      UeEditor
    },
    meta: {
      title: "发布考试"
    },
    data() {
      return {
        postMsg: {
          Id: 0, //发布编号
          PaperId: 0, //试卷编号
          PublishType: 1, // 发放类型(1-按班级发放，2-指定学生发放)
          ExamStartTime: "", //考试开始时间
          ExamEndTime: "", //考试结束时间
          ExamTimes: '', //考试限时
          SubmitTimes: '', //限时提交(多少分钟内不允许提交)
          EnterTimes: '', //限时进入(多少分钟后不允许参加考试)
          IsQuestionRandom: 0, //题目乱序(1-是)
          IsOptionRandom: 0, //选项乱序(1-是)
          IsLeaveAnswer: 0, //学生离开作答页面(1-是)
          LeaveTimes: '', //离开次数
          IsDisableMultiTerminal: 0, //是否禁用多终端(1-是)
          IsExamType: 0, //是否只允许(App、PC)考试(1-是)
          ExamTypeValue: 1, //考试终端类型(1-App,2-PC)
          ExamNotice: "", //考试须知
          PassScore: 0, //及格分数
          IsAutoSubmit: 1, //考试到达截止时间后自动提交(1-是)
          FillInIsSubject: 0, //填空类型的题目设为主观题(1-是)
          FillInIsIgnore: 0, //填空题答案不区分大小写(1-是)
          IsHalfScore: 1, //多选题未选全给一半分(1-是)
          StudentList: [],
          PublishPic: [] //图片
        },
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },
        isShowClassStu: false, //是否显示学员弹窗
        sendStudent: [], //传送已选学生
        picker: {
          disabledDate: (time) => {
            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
          },
        },
        pickerEnd: {
          disabledDate: (time) => {
            let StartTime = new Date(this.postMsg.ExamStartTime);
            return time.getTime() <= StartTime.getTime() - 24 * 60 * 60 * 1000;
          },
        },

      }
    },
    created() {
      if (this.$route.query && this.$route.query.PaperId) {
        this.postMsg.PaperId = decodeURI(this.$route.query.PaperId)
      }
      if (this.$route.query && this.$route.query.Id) {
        this.postMsg.Id = decodeURI(this.$route.query.Id);
        this.getExamInfo();
      }
    },
    mounted() {

    },
    watch: {
      "postMsg.StudentList": {
        handler(val) {
          this.sendStudent = [];
          if (this.postMsg.StudentList && this.postMsg.StudentList.length > 0) {
            this.postMsg.StudentList.forEach(x => {
              let obj = {
                ClassId: x.ClassId,
                CourseId: x.CourseId,
                GuestId: x.GuestId,
                Name: x.GuestName,
                OrderId: x.OrderId
              }
              this.sendStudent.push(obj);
            })
          }
        }
      }
    },
    methods: {
      uploadFile(files) {
        UploadSelfFile('studentIcon', files, res => {
          if (res.Code == 1) {
            this.postMsg.PublishPic.push(res.FileUrl);
          }
        })
      },
      //删除图片
      deleteItemImg(index) {
        this.postMsg.PublishPic.splice(index, 1);
      },
      //获取两个时间相差分钟数
      getMinus() {
        if (this.postMsg.ExamStartTime == '' || this.postMsg.ExamStartTime == null) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择开始时间`
          })
          return
        }
        //定义两个变量time1,time2分别保存开始和结束时间
        var time1 = this.postMsg.ExamStartTime;
        var time2 = this.postMsg.ExamEndTime;
        //判断开始时间是否大于结束日期
        if (time1 > time2) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `开始时间不能大于结束时间`
          })
          return
        }
        //截取字符串，得到日期部分"2009-12-02",用split把字符串分隔成数组
        var begin1 = time1.substr(0, 10).split("-");
        var end1 = time2.substr(0, 10).split("-");

        //将拆分的数组重新组合，并实例成化新的日期对象
        var date1 = new Date(begin1[1] + - +begin1[2] + - +begin1[0]);
        var date2 = new Date(end1[1] + - +end1[2] + - +end1[0]);

        //得到两个日期之间的差值m，以分钟为单位
        //Math.abs(date2-date1)计算出以毫秒为单位的差值
        //Math.abs(date2-date1)/1000得到以秒为单位的差值
        //Math.abs(date2-date1)/1000/60得到以分钟为单位的差值
        var m = parseInt(Math.abs(date2 - date1) / 1000 / 60);

        //小时数和分钟数相加得到总的分钟数
        //time1.substr(11,2)截取字符串得到时间的小时数
        //parseInt(time1.substr(11,2))*60把小时数转化成为分钟
        var min1 = parseInt(time1.substr(11, 2)) * 60 + parseInt(time1.substr(14, 2));
        var min2 = parseInt(time2.substr(11, 2)) * 60 + parseInt(time2.substr(14, 2));

        //两个分钟数相减得到时间部分的差值，以分钟为单位
        var n = min2 - min1;

        //将日期和时间两个部分计算出来的差值相加，即得到两个时间相减后的分钟数
        var minutes = m + n;
        // 返回 分钟差
        this.postMsg.ExamTimes = minutes;
      },
      //删除发放对象
      delStudentName(index) {
        this.postMsg.StudentList.splice(index, 1);
      },
      getExamInfo() {
        queryExamPublish({
          Id: this.postMsg.Id
        }).then(res => {
          if (res.Code == 1) {
            var tempData = res.Data;
            if (tempData) {
              this.postMsg.Id = tempData.Id;
              this.postMsg.PaperId = tempData.PaperId;
              this.postMsg.PublishType = tempData.PublishType;
              if (tempData.ExamStartTime) {
                this.postMsg.ExamStartTime = tempData.ExamStartTime.replace('T', ' ');
              }
              if (tempData.ExamEndTime) {
                this.postMsg.ExamEndTime = tempData.ExamEndTime.replace('T', ' ');
              }
              this.postMsg.ExamTimes = tempData.ExamTimes == 0 ? '' : tempData.ExamTimes;
              this.postMsg.SubmitTimes = tempData.SubmitTimes == 0 ? '' : tempData.SubmitTimes;
              this.postMsg.EnterTimes = tempData.EnterTimes == 0 ? '' : tempData.EnterTimes;
              this.postMsg.IsQuestionRandom = tempData.IsQuestionRandom;
              this.postMsg.IsOptionRandom = tempData.IsOptionRandom;
              this.postMsg.IsLeaveAnswer = tempData.IsLeaveAnswer;
              this.postMsg.LeaveTimes = tempData.LeaveTimes == 0 ? '' : tempData.LeaveTimes;
              this.postMsg.IsDisableMultiTerminal = tempData.IsDisableMultiTerminal;
              this.postMsg.IsExamType = tempData.IsExamType;
              this.postMsg.ExamTypeValue = tempData.ExamTypeValue;
              this.postMsg.ExamNotice = tempData.ExamNotice;
              this.postMsg.PassScore = tempData.PassScore;
              this.postMsg.IsAutoSubmit = tempData.IsAutoSubmit;
              this.postMsg.FillInIsSubject = tempData.FillInIsSubject;
              this.postMsg.FillInIsIgnore = tempData.FillInIsIgnore;
              this.postMsg.IsHalfScore = tempData.IsHalfScore;
              if (tempData.StudentList && tempData.StudentList.length > 0) {
                this.postMsg.StudentList = tempData.StudentList;
              }
              if (tempData.PicList && tempData.PicList.length > 0) {
                this.postMsg.PublishPic = tempData.PicList;
              }
            }
          }
        })
      },
      //显示班级学员弹窗
      showClassStu() {
        this.isShowClassStu = true;
      },
      //关闭班级学员弹窗
      closeClassStuForm() {
        this.isShowClassStu = false;
      },
      //获取选中的需要列表
      getClassStuList(array) {
        this.postMsg.StudentList = [];
        if (array && array.length > 0) {
          array.forEach(item => {
            this.postMsg.StudentList.push({
              GuestId: item.GuestId,
              ClassId: item.ClassId,
              OrderId: item.OrderId,
              CourseId: item.CourseId,
              GuestName: item.Name,
            });
          })
        }
        this.isShowClassStu = false;
      },
      //发布考试
      setPublishExam() {
        savePublishExam(this.postMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '操作成功!',
              position: 'top'
            })
            this.$router.push({
              path: '/exam/examlist',
              query: {}
            });
          } else {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `操作失败!`
            })
          }
        })
      }
    }
  }
</script>