<!--组卷-->
<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;
  }

  .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;
  }

</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">发放对象</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">
        <q-input filled v-model="postMsg.ExamStartTime" style="width: 308px" mask="####-##-## ##:##:##" label="开始时间"
          ref="StartTime" disable :rules="[(val) => !!val || '请选择开始时间']">
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                <div class="q-gutter-md row items-start">
                  <q-date v-model="postMsg.ExamStartTime" mask="YYYY-MM-DD HH:mm:ss"></q-date>
                  <q-time v-model="postMsg.ExamStartTime" format24h mask="YYYY-MM-DD HH:mm:ss" />
                </div>
                <q-btn v-close-popup label="关闭" color="primary" flat style="float: right" />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </div>
    </div>
    <div class="setCt">
      <span class="papPub_Left f1">结束时间</span>
      <div class="f1">
        <q-input filled v-model="postMsg.ExamEndTime" style="width: 308px" mask="####-##-## ##:##:##" label="结束时间"
          ref="ExamEndTime" disable :rules="[(val) => !!val || '请选择结束时间']">
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxy2" transition-show="scale" transition-hide="scale">
                <div class="q-gutter-md row items-start">
                  <q-date v-model="postMsg.ExamEndTime" mask="YYYY-MM-DD HH:mm:ss"></q-date>
                  <q-time v-model="postMsg.ExamEndTime" format24h mask="YYYY-MM-DD HH:mm:ss" />
                </div>
                <q-btn v-close-popup label="关闭" color="primary" flat style="float: right" />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </div>
    </div>
    <div class="setCt">
      <span class="papPub_Left f1">考试限时</span>
      <div class="f1">
        <q-input filled bottom-slots maxlength="10" style="width: 308px" v-model="postMsg.ExamTimes" label="考试限时"
          :dense="false" disable>
          <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" style="width: 308px" v-model="postMsg.SubmitTimes" label="限时提交"
          :dense="false" disable>
          <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" v-model="postMsg.EnterTimes" label="限时进入" :dense="false" disable>
          <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-checkbox size="xs" v-model="postMsg.IsQuestionRandom" :true-value="1" :false-value="0" label="题目乱序"
          disable />
        <div class="paper_QuesDes">学生接收到的题目显示顺序不同</div>
        <q-checkbox size="xs" v-model="postMsg.IsOptionRandom" :true-value="1" :false-value="0" label="选项乱序" disable />
        <div class="paper_QuesDes">学生接收到的题目选项顺序不同</div>
        <q-checkbox size="xs" v-model="postMsg.IsLeaveAnswer" :true-value="1" :false-value="0" label="学生离开作答页面"
          disable />
        <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" disabled></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="禁止学生多终端考试" disable />
        </div>
        <q-checkbox size="xs" v-model="postMsg.IsExamType" :true-value="1" :false-value="0" label="只允许" disable />
        <template>
          <span style="position: relative; top: 2px">
            &nbsp;<el-select style="width: 80px" size="small" v-model="postMsg.ExamTypeValue" disabled>
              <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" disabled></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="考试到达截止时间后自动提交"
        disable />
    </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="填空类型的题目设为主观题"
          disable />
        <div class="paper_QuesDes">
          填空题类型的包括填空题、分录题、资料题，设为主观题后需教师手动批阅
        </div>
        <q-checkbox size="xs" v-model="postMsg.FillInIsIgnore" :true-value="1" :false-value="0" label="填空题答案不区分大小写"
          disable />
        <div class="paper_QuesDes">勾选后，英文大写和小写都可以得分</div>
        <q-checkbox size="xs" v-model="postMsg.IsHalfScore" :true-value="1" :false-value="0" label="多选题未选全给一半分"
          disable />
        <div class="paper_QuesDes">不勾选时全选对才给分</div>
      </div>
    </div>
    <div class="row">
      <!-- <q-btn
        color="accent"
        @click="setPublishExam"
        class="q-mr-md"
        label="发布考试"
        disable
      /> -->
    </div>
    <classstutreeForm v-if="isShowClassStu" @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";
  export default {
    components: {
      classstutreeForm,
      UeEditor,
    },
    meta: {
      title: "发布考试",
    },
    data() {
      return {
        postMsg: {
          Id: 0, //发布编号
          PaperId: 0, //试卷编号
          PublishType: 1, // 发放类型(1-按班级发放，2-指定学生发放)
          ExamStartTime: "2021-08-20 10:00:00", //考试开始时间
          ExamEndTime: "2021-08-20 12:00:00", //考试结束时间
          ExamTimes: 0, //考试限时
          SubmitTimes: 0, //限时提交(多少分钟内不允许提交)
          EnterTimes: 0, //限时进入(多少分钟后不允许参加考试)
          IsQuestionRandom: 0, //题目乱序(1-是)
          IsOptionRandom: 0, //选项乱序(1-是)
          IsLeaveAnswer: 0, //学生离开作答页面(1-是)
          LeaveTimes: 0, //离开次数
          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: [],
        },
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 80,
        },

        isShowClassStu: false, //是否显示学员弹窗
      };
    },
    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() {},
    methods: {
      //删除发放对象
      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;
              this.postMsg.ExamStartTime = tempData.ExamStartTime;
              this.postMsg.ExamEndTime = tempData.ExamEndTime;
              this.postMsg.ExamTimes = tempData.ExamTimes;
              this.postMsg.SubmitTimes = tempData.SubmitTimes;
              this.postMsg.EnterTimes = tempData.EnterTimes;
              this.postMsg.IsQuestionRandom = tempData.IsQuestionRandom;
              this.postMsg.IsOptionRandom = tempData.IsOptionRandom;
              this.postMsg.IsLeaveAnswer = tempData.IsLeaveAnswer;
              this.postMsg.LeaveTimes = 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;
              }
            }
          }
        });
      },
      //显示班级学员弹窗
      showClassStu() {
        this.isShowClassStu = true;
      },
      //关闭班级学员弹窗
      closeClassStuForm() {
        this.isShowClassStu = false;
      },
      //获取选中的需要列表
      getClassStuList(array) {
        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>
