<template>
  <div>
    <el-dialog
      class="modify-mark-params"
      :visible.sync="modalIsShow"
      top="0"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      append-to-body
      fullscreen
      @open="search"
    >
      <div slot="title">
        <h2 class="el-dialog__title">班级详情</h2>
        <button class="el-dialog__headerbtn" @click="cancel"></button>
      </div>

      <div class="part-box part-box-filter part-box-flex">
        <el-form
          ref="FilterForm"
          label-position="left"
          label-width="85px"
          inline
        >
          <el-form-item label="学院">
            <el-input
              v-model.trim="filter.college"
              placeholder="学院"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input
              v-model.trim="filter.majorName"
              placeholder="专业"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="教学班">
            <el-input
              v-model.trim="filter.teachClassName"
              placeholder="教学班"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="行政班">
            <el-input
              v-model.trim="filter.className"
              placeholder="行政班"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              v-model.trim="filter.studentName"
              placeholder="姓名"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="学号">
            <el-input
              v-model.trim="filter.studentCode"
              placeholder="学号"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="学号区间">
            <el-input
              v-model.trim="filter.startStudentCode"
              placeholder="起始学号"
              clearable
              class="width-200"
            >
            </el-input>
            <span class="mlr-1">-</span>
            <el-input
              v-model.trim="filter.endStudentCode"
              placeholder="终止学号"
              clearable
              class="width-200"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="成绩区间">
            <el-input-number
              v-model.trim="filter.startScore"
              placeholder="成绩最低分"
              :min="0"
              :max="9999"
              :step="0.01"
              step-strictly
              :controls="false"
              clearable
            >
            </el-input-number>
            <span class="mlr-1">-</span>
            <el-input-number
              v-model="filter.endScore"
              placeholder="成绩最高分"
              :min="0"
              :max="9999"
              :step="0.01"
              step-strictly
              :controls="false"
              clearable
            >
            </el-input-number>
          </el-form-item>
          <el-form-item label="客观题总分">
            <el-input-number
              v-model="filter.objectiveStartScore"
              placeholder="客观题总分"
              :min="0"
              :max="9999"
              :step="0.01"
              step-strictly
              :controls="false"
              clearable
            >
            </el-input-number>
            <span class="mlr-1">-</span>
            <el-input-number
              v-model="filter.objectiveEndScore"
              placeholder="客观题总分"
              :min="0"
              :max="9999"
              :step="0.01"
              step-strictly
              :controls="false"
              clearable
            >
            </el-input-number>
          </el-form-item>
          <el-form-item label="主观题总分">
            <el-input-number
              v-model="filter.subjectiveStartScore"
              placeholder="主观题总分"
              :min="0"
              :max="9999"
              :step="0.01"
              step-strictly
              :controls="false"
              clearable
            >
            </el-input-number>
            <span class="mlr-1">-</span>
            <el-input-number
              v-model="filter.subjectiveEndScore"
              placeholder="主观题总分"
              :min="0"
              :max="9999"
              :step="0.01"
              step-strictly
              :controls="false"
              clearable
            >
            </el-input-number>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="part-box-action">
          <el-button type="primary" icon="el-icon-document" @click="toReport"
            >成绩报告</el-button
          >
          <el-button
            type="success"
            :disabled="downloading"
            icon="el-icon-download"
            @click="toExportScore"
          >
            成绩导出
          </el-button>
          <el-button
            v-if="checkPrivilege('button', 'DownloadScore')"
            type="success"
            icon="el-icon-download"
            :disabled="downloading"
            @click="toDownloadScore"
          >
            成绩下载
          </el-button>
        </div>
      </div>

      <div class="part-box part-box-pad">
        <el-table ref="TableList" :data="dataList" @sort-change="sortChange">
          <el-table-column
            type="index"
            label="序号"
            width="70"
            :index="indexMethod"
          ></el-table-column>
          <el-table-column prop="studentName" label="姓名" min-width="150">
          </el-table-column>
          <el-table-column
            prop="studentCode"
            label="学号"
            width="150"
            sortable
          ></el-table-column>
          <el-table-column
            prop="statusDisplay"
            label="状态"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="breachStatus"
            label="违纪状态"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="paperType"
            label="卷型"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="totalScore"
            label="成绩"
            width="80"
            sortable
          ></el-table-column>
          <el-table-column
            prop="subjectiveScore"
            label="主观分"
            width="100"
            sortable
          ></el-table-column>
          <el-table-column
            prop="objectiveScore"
            label="客观分"
            width="100"
            sortable
          ></el-table-column>
          <el-table-column
            prop="collegeName"
            label="院系"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="majorName"
            label="专业"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="teachClassName"
            label="教学班"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="className"
            label="行政班"
            min-width="200"
          ></el-table-column>
          <el-table-column prop="checkTime" label="考试时间" width="180">
          </el-table-column>
          <el-table-column
            prop="courseName"
            label="课程名称"
            min-width="200"
          ></el-table-column>
          <el-table-column
            class-name="action-column"
            label="操作"
            width="120"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                class="btn-primary"
                type="text"
                @click="toViewSheetPaper(scope.row)"
                >原图</el-button
              >
              <el-button
                class="btn-primary"
                type="text"
                @click="toViewTrack(scope.row)"
                >轨迹图</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="part-page">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :pager-count="5"
            :current-page="current"
            :total="total"
            :page-size="size"
            @current-change="toPage"
            @size-change="pageSizeChange"
          >
          </el-pagination>
        </div>
      </div>

      <div slot="footer"></div>
    </el-dialog>
    <!-- image-preview -->
    <simple-image-preview
      :cur-image="curImage"
      @on-prev="toPrevImage"
      @on-next="toNextImage"
      ref="SimpleImagePreview"
    ></simple-image-preview>
    <!-- ScoreReportPreview -->
    <score-report-preview
      ref="ScoreReportPreview"
      :instance="reportParams"
    ></score-report-preview>
  </div>
</template>

<script>
import {
  scoreClassDetailListPage,
  scoreClassDetailScoreExport,
  scoreClassDetailScoreDownload,
} from "../api";
import SimpleImagePreview from "@/components/SimpleImagePreview";
import ScoreReportPreview from "./ScoreReportPreview.vue";
import { downloadByApi } from "@/plugins/download";
import markMinxin from "../markMinxin";
import { parseTimeRangeDateAndTime } from "@/plugins/utils";

export default {
  name: "score-class-detail",
  components: { SimpleImagePreview, ScoreReportPreview },
  mixins: [markMinxin],
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        college: "",
        majorName: "",
        className: "",
        studentName: "",
        studentCode: "",
        startStudentCode: "",
        endStudentCode: "",
        startScore: undefined,
        endScore: undefined,
        objectiveStartScore: undefined,
        objectiveEndScore: undefined,
        subjectiveStartScore: undefined,
        subjectiveEndScore: undefined,
        orderType: undefined,
        orderField: undefined,
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      downloading: false,
      reportParams: {},
      // img view
      curImage: {},
      curImageIndex: 0,
      imageList: [],
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getList() {
      const datas = {
        ...this.filter,
        examId: this.instance.examId,
        paperNumber: this.instance.paperNumber,
        pageNumber: this.current,
        pageSize: this.size,
      };
      if (datas.absent !== null && datas.absent !== "")
        datas.absent = !!datas.absent;
      if (datas.breach !== null && datas.breach !== "")
        datas.breach = !!datas.breach;

      if (
        (datas.startScore || datas.startScore === 0) &&
        (datas.endScore || datas.endScore === 0) &&
        datas.startScore > datas.endScore
      ) {
        this.$message.error("成绩最低分大于成绩最高分");
        return;
      }

      const data = await scoreClassDetailListPage(datas);
      this.dataList = data.records.map((item) => {
        const { date, time } = parseTimeRangeDateAndTime(
          item.examStartTime,
          item.examEndTime
        );
        item.checkTime = `${date || "--"} ${time || "--"}`;
        return item;
      });
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    search() {
      this.toPage(1);
    },
    sortChange({ prop, order }) {
      if (!order) {
        this.filter.orderField = undefined;
        this.filter.orderType = undefined;
      } else {
        this.filter.orderField = prop;
        this.filter.orderType = order === "ascending" ? "ASC" : "DESC";
      }
      this.getList();
    },
    toReport() {
      this.reportParams = {
        ...this.instance,
        filter: this.filter,
      };
      this.$refs.ScoreReportPreview.open();
    },
    async toExportScore() {
      if (this.downloading) return;
      this.downloading = true;

      const res = await downloadByApi(() => {
        return scoreClassDetailScoreExport({
          ...this.filter,
          examId: this.instance.examId,
          paperNumber: this.instance.paperNumber,
        });
      }).catch((e) => {
        this.$message.error(e || "下载失败，请重新尝试！");
      });
      this.downloading = false;

      if (!res) return;
      this.$message.success("下载成功！");
    },
    async toDownloadScore() {
      if (this.downloading) return;
      this.downloading = true;

      const res = await downloadByApi(() => {
        return scoreClassDetailScoreDownload({
          ...this.filter,
          examId: this.instance.examId,
          paperNumber: this.instance.paperNumber,
        });
      }).catch((e) => {
        this.$message.error(e || "下载失败，请重新尝试！");
      });
      this.downloading = false;

      if (!res) return;
      this.$message.success("下载成功！");
    },
    // img view
    async toViewTrack(row) {
      this.toMarkTrack(row.studentId);
    },
    toViewSheetPaper(row) {
      this.curImageIndex = 0;
      this.imageList = (row.sheetUrls || []).map((url, index) => {
        return { url, index: index + 1 };
      });
      this.selectImage(this.curImageIndex);
      this.$refs.SimpleImagePreview.open();
    },
    selectImage(index) {
      this.curImage = this.imageList[index];
    },
    toPrevImage() {
      if (this.curImageIndex === 0) {
        this.curImageIndex = this.imageList.length - 1;
      } else {
        this.curImageIndex--;
      }

      this.selectImage(this.curImageIndex);
    },
    toNextImage() {
      if (this.curImageIndex === this.imageList.length - 1) {
        this.curImageIndex = 0;
      } else {
        this.curImageIndex++;
      }

      this.selectImage(this.curImageIndex);
    },
  },
};
</script>
