分页

<template>
  <section>
    <!-- 考试列表 -->
    <div class="exam_list">
      <!-- 考试列表 头部-->
      <div class="head_box">
        <div class="head_content">
          <el-form ref="form" :model="form" label-width="95px">
            <el-form-item label="考试时间：">
              <el-date-picker
                v-model="form.examDate"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="examDateChange"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="考试年级：">
              <el-select
                class="subject"
                @change="gradeChange"
                v-model="form.grade"
                placeholder="请选择年级"
              >
                <el-option label="高一年级" value="1"></el-option>
                <el-option label="高二年级" value="2"></el-option>
                <el-option label="高三年级" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-radio-group v-model="form.category">
              <el-radio label>不分文理</el-radio>
              <el-radio label="10">只看文科</el-radio>
              <el-radio label="11">只看理科</el-radio>
            </el-radio-group>
          </el-form>
        </div>
      </div>

      <!-- 考试列表数组 -->
      <div class="exam_container" v-loading="loading" v-if="dataVisible">
        <div class="exam_box" :class="{kjb:item.isMarking}" v-for="(item,i) in examList" :key="i">
          <div class="one_box cf">
            <div class="info fl">
              <div class="title cf">
                <!-- <h2 class="paper_name fl">2018-2019学年高二上学期第一次月考（文科）</h2> -->
                <h2 class="paper_name fl">{{item.examName}}</h2>
                <!-- 校内or任教班级---状态判断 -->
                <!-- <span class="golden fl">校内考试</span>
                <span class="golden fl">任教班级考试</span>-->
                <span class="golden fl">{{examTypeAlter(item.examType)}}</span>
                <span class="blue fl" v-if="item.isMarking===1">考金榜阅卷</span>
              </div>
              <div class="two_line">
                <span>考试日期：{{item.beginTime}} 至 {{item.endTime}}</span>
                <!-- <span>考试年级：高二（文科班）</span> -->
                <span>考试年级：{{gradeType(parseInt(item.examGrade))}}{{item.subjectCode?item.subjectCode==10?'(文科班)':'(理科班)':''}}</span>
                <span :title="item.className">考试对象</span>
                <span :title="item.examRemark">考试备注</span>
              </div>
            </div>
            <!-- 导入后变成查看成绩 -->
            <div class="user_operation fr">
              <transition mode="out-in">
                <button
                  class="see_score ok_button"
                  @click="publishedResults(item)"
                  v-if="item.isMarking&&roleId==1&&!parseInt(item.ifRelease)"
                >发布成绩</button>
                <router-link
                  class="see_score ok_button"
                  :to="{ name:'scoreManagement',query: {examId:item.id,schoolids:item.schoolids}}"
                  v-else
                >查看成绩</router-link>
              </transition>
              <div class="see_icon" v-if="roleId==1">
                <img src="../../assets/images/examinationManage/circular_point.png" alt>
                <div class="hover_box">
                  <a class="hover_but" @click.prevent="upExam(item.id)">修改</a>
                  <a href="#" class="hover_but" @click="deleteExam(item,i,item.id)">删除</a>
                </div>
              </div>
            </div>

            <!-- <router-link  class="fr" :to="{name:'scoreManagement'}"> -->
            <!-- <button class="see_score"> -->
            <!-- 导入后变成查看成绩 -->
            <!-- 查看成绩 -->
            <!-- <img src="../../assets/images/examinationManage/circular_point.png" alt=""> -->
            <!-- </button> -->
            <!-- </router-link> -->
          </div>

          <!-- 科目列表-管理员-->
          <div class="exam_id cf" v-for="(subject,index) in item.subjects" :key="index">
            <div class="subject fl">
              <img :src="getImgType(subject.subjectId)" alt>
              <!-- 考卷的三种状态 -->
              <!-- <span>考卷：<i>KJB123df562s</i></span> -->
              <!-- <span>考卷：<i>扫描考卷</i> <i>扫描解析</i></span> -->
              <span>
                考卷：
                <i>
                  <a @click.prevent="getPaperDetail(item.id,subject.subjectId)" class="to_view">查看</a>
                </i>
              </span>
              <!--  <span>考卷：
                            <i>
                                <router-link :to="{ name:'scanningImg'}">
                                    扫描考卷
                                </router-link>
                            </i>
                        </span>
                        <span>考卷：
                            <i>
                                <router-link :to="{ name:'scanningResult'}">
                                    扫描解析
                                </router-link>
                            </i>
              </span>-->
              <!-- end -->
            </div>
            <div class="exam_type">
              <!-- 管理员部分 -->
              <p v-if="item.isMarking">
                <span v-if="roleId==1">答卷已入库{{subject.paperInLibrarySum}}份</span>
                <span v-if="roleId==1">客观题识别计分{{subject.objQuestionSpeed}}%</span>
                <span v-if="roleId==1">主观题阅卷进度{{subject.subQuestionMarkSpeed}}%</span>
                <span v-if="roleId==1">问题卷{{subject.matterPaperNum}}</span>
                <!-- 学科负责人 -->
                <span v-if="roleId==2&&subject.roleId==1">问题卷处理进度 5/12</span>
                <!-- 阅卷人 -->
                <span v-if="roleId==2&&subject.roleId==2">我的阅卷进度 5/500</span>
              </p>
              <!-- 非考金榜阅卷的考试 -->
              <p v-else>
                <span>非考金榜阅卷的考试</span>
              </p>
            </div>
            <div class="fr">
              <!-- 管理员 -->
              <template v-if="item.isMarking">
                <template v-if="!item.subjects[index].ifEndMark">
                  <router-link :to="{ name:'correctSetUp'}">
                    <el-tag v-if="roleId==1">阅卷设置</el-tag>
                  </router-link>
                  <a @click.prevent="endExam(item,item.id,item.subjects[index])">
                    <el-tag v-if="roleId==1" type="info">结束阅卷</el-tag>
                  </a>
                  <!-- 阅卷人-->
                  <router-link :to="{ name:'markExam'}">
                    <el-tag v-if="roleId==2&&subject.roleId==2&&item.isMarking">去阅卷</el-tag>
                  </router-link>
                  <!-- 学科负责人 -->
                  <template v-if="roleId==2&&subject.roleId==1">
                    <router-link :to="{ name:'problemExam'}">
                      <el-tag type="warning">问题卷处理</el-tag>
                    </router-link>
                    <router-link :to="{ name:'schedule'}">
                      <el-tag>进度监控</el-tag>
                    </router-link>
                    <router-link :to="{ name:'qualityInspect'}">
                      <el-tag type="danger">质量抽查</el-tag>
                    </router-link>
                  </template>
                </template>
                <template v-else>
                  <span>阅卷已结束</span>
                </template>
              </template>
              <!-- 导入后此按钮消失 -->
              <a @click.prevent="importScoreData(item.id,subject.subjectId)" v-if="!item.isMarking">
                <el-tag type="danger" v-if="roleId==1">导入成绩</el-tag>
              </a>
              <!-- end -->
            </div>
          </div>
          <!-- 科目列表-阅卷人和检查人-->
          <div class="subject_list exam_id" v-if="(item.isMarking&&roleId==2&&false)">
            <div class="subject" v-for="(subject,i) in item.subjects" :key="i">
              <!-- 没有该科目权限-->
              <template v-if="subject.enterStatus==0">
                <img :src="getImgType(subject.subjectId)" alt>
                <span>
                  考卷：
                  <i v-if="subject.enterStatus==1">
                    <a @click.prevent="getPaperDetail(item.id,subject.subjectId)" class="to_view">查看</a>
                  </i>
                  <!-- 该科目考试未扫描录入试卷  enterStatus==0-->
                  <i v-else>
                    <a style="color:#999;" @click.prevent>查看</a>
                  </i>
                </span>
              </template>
            </div>
          </div>
          <!-- end -->
        </div>

        <div class="pagination" v-if="total/pageSize>0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <div class="no_data" v-else>暂无数据</div>
    </div>
    <!--弹窗-结束阅卷 -->
    <dialog-end-exam
      :msg1.sync="dialogEndExamVisible"
      :obj.sync="dialogEndExamObj"
      :subject.sync="dialogEndExamSubject"
      @emitParent="resetDialogEnd"
    ></dialog-end-exam>
    <!-- 弹窗-删除考试 -->
    <dialog-delete-exam
      :msg1.sync="dialogDeleteExamVisible"
      :obj.sync="dialogDeleteExamObj"
      @emitParent="resetDialogDelete"
      v-if="dialogDeleteExamVisible"
    ></dialog-delete-exam>

    <!-- 弹窗-导入成绩 -->
    <import-score :scoreType="score"></import-score>

    <!-- 弹窗-自动升年级 -->
    <upgrade></upgrade>
  </section>
</template>
<script>
import { test, up } from "service";
import "css/examinationManage/examinationList.css";
import "css/headTetleScreen.css";
import importScore from "../scoreManagementManage/unit/importScore.vue";
import dialogEndExam from "./unit/dialogEndExam.vue";
import dialogDeleteExam from "./unit/dialogDeleteExam.vue";
import upgrade from "./unit/upgrade.vue";
export default {
  components: {
    importScore,
    dialogEndExam,
    dialogDeleteExam,
    upgrade
  },
  data() {
    return {
      roleId: "",
      createObj: {}, //创建考试对象
      examList: [], //考试列表
      // 分页
      currentPage: 1,
      total: 0,
      pageSize: 10, //每页显示条目个数
      PageNow: 1,
      // 分页
      subjectsList: [], //科目列表
      form: {
        name: "",
        grade: "1", //考试年级
        examDate: [new Date(2019, 0, 1), new Date(2021, 0, 1)], //考试时间
        category: "" //文理
      },
      dialogEndExamVisible: false, //结束阅卷弹窗
      dialogEndExamObj: {}, //结束阅卷弹窗对象
      dialogEndExamSubject: {}, //结束阅卷弹窗对象
      dialogDeleteExamVisible: false, //删除考试弹窗
      dialogDeleteExamObj: {}, //删除考试弹窗对象
      deleteExamObj: {}, //删除考试对象
      score: {
        //导入成绩弹窗
        isShow: false
      },
      loading: true, //无数据时的显示
      dataVisible: true //暂无数据
    };
  },
  mounted() {
    // this.roleId = this.roleId;
    this.roleId = this.$store.state.roleId;
    this.createObj = this.$route.query.obj;
    if (this.form.examDate && this.form.grade) {
      this.getExamList();
    } else {
      this.$message("请选择考试时间和考试年级！");
    }
  },
  methods: {
    // 导入成绩
    importScoreData(examId, subjectId) {
      // console.log(examId, subjectId);
      up("/exam/importScore", {
        examId,
        subjectId,
        name: "",
        photoBeas: ""
      }).then(res => {});
      this.score.isShow = true;
    },
    //api
    gradeChange(e) {
      console.log(e, 1111);
      if (this.form.examDate && this.form.grade) {
        this.getExamList();
      }
    },
    examDateChange() {
      if (this.form.examDate && this.form.grade) {
        this.getExamList();
      }
    },
    //返回考试类型
    examTypeAlter(i) {
      switch (i) {
        case 1:
          return "校内考试";
          break;
        case 2:
          return "多校联考";
          break;
        case 3:
          return "任教班级考试";
          break;
        default:
      }
    },
    gradeType(i) {
      switch (i) {
        case 1:
          return "高一年级";
          break;
        case 2:
          return "高二年级";
          break;
        case 3:
          return "高三年级";
          break;
        default:
      }
    },
    // 获取科目列表图片
    getImgType(subjectid) {
      switch (subjectid) {
        case 1:
          return require("../../assets/images/subjectIcon/Chinese.png");
          break;
        case 2:
          return require("../../assets/images/subjectIcon/Mathematics.png");
          break;
        case 3:
          return require("../../assets/images/subjectIcon/English.png");
          break;
        case 4:
          return require("../../assets/images/subjectIcon/Physics.png");
          break;
        case 5:
          return require("../../assets/images/subjectIcon/Chemistry.png");
          break;
        case 6:
          return require("../../assets/images/subjectIcon/Biology.png");
          break;
        case 7:
          return require("../../assets/images/subjectIcon/History.png");
          break;
        case 8:
          return require("../../assets/images/subjectIcon/Geography.png");
          break;
        case 9:
          return require("../../assets/images/subjectIcon/Politics.png");
          break;
      }
    },
    // 获取考试列表
    getExamList() {
      test("/exam/getExamList", {
        beginTime: this.form.examDate[0],
        endTime: this.form.examDate[1],
        subjectCode: this.form.category || "",
        examGrade: this.form.grade,
        PageNow: this.PageNow,
        PageSize: this.pageSize
        // roleId: this.roleId
      }).then(res => {
        console.log(res, "考试列表");
        this.loading = false;
        if (res) {
          this.total = res.total;
          this.examList = res.data;
          this.dataVisible = true;
        } else {
          this.dataVisible = false;
        }
      });
    },
    // 发布成绩
    publishedResults(item) {
      // console.log(item);
      console.log(item.subjects);
      let bool = true;
      item.subjects.forEach((item, i) => {
        // console.log(item.ifEndMark);
        if (item.ifEndMark == 0) {
          this.$message("当前考试有科目未结束阅卷！");
          bool = false;
          return;
        }
      });
      if (bool) {
        item.ifRelease = 1;
      }
      console.log(item);
    },
    // 单科结束阅卷
    endExam(obj, id, subject) {
      // console.log(obj);
      this.dialogEndExamObj = obj;
      this.dialogEndExamSubject = subject;
      this.dialogEndExamVisible = true;
    },
    resetDialogEnd(obj) {
      this.dialogEndExamVisible = false;
      if (obj) {
        up("/exam/endExam", {
          examId: obj.examId,
          subjectId: obj.subjectId
        }).then(res => {});
        this.getExamList();
      }
    },
    // 删除考试
    deleteExam(item, i, id) {
      // console.log(i, id);
      this.dialogDeleteExamVisible = true;
      this.dialogDeleteExamObj = item;
      this.deleteExamObj.index = i;
      this.deleteExamObj.examId = id;
    },
    // 删除考试
    resetDialogDelete(msg) {
      this.dialogDeleteExamVisible = false;
      if (msg == "dialogDeleteExam") {
        up("/exam/deleteExam", {
          examId: this.deleteExamObj.examId
        }).then(res => {});
        this.examList.splice(this.deleteExamObj.index, 1);
      }
    },
    // 编辑考试
    upExam(id) {
      this.$router.push({
        name: "foundExam",
        query: { examId: id }
      });
    },
    // 查看考卷
    getPaperDetail(examId, subjectId) {
      // console.log(examId, subjectId);
      let obj = {};
      test("/exam/getPaperDetail", { examId, subjectId }).then(res => {
        // console.log(res.data[0]);
        obj.examName = res.data[0].examName;
        obj.subjectName = res.data[0].subjectName;
        this.$router.push({ name: "scanningResult", query: { obj } });
      });
    },
    //改变时
    handleSizeChange(val) {
      this.pageSize = val;
      this.getExamList();
    },
    //条目改变时
    handleCurrentChange(val) {
      this.PageNow = val;
      this.getExamList();
    }
  },
  watch: {
    "form.category"() {
      // console.log(1)
      this.getExamList();
    }
  }
};
</script>
<style lang ='less' scoped>
.exam_container {
  min-height: 500px;
}
.exam_list .el-tag,
.exam_list .to_view {
  cursor: pointer;
}

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease;
}
</style>