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