<template>
  <div class="teach-college-score">
    <div class="page-head page-head-flex">
      <h2>
        <span>开课成绩查询</span>
        <el-popover
          popper-class="el-popper-dark"
          placement="bottom-start"
          width="300"
          trigger="hover"
        >
          <i class="el-icon-question" slot="reference"></i>
          <div>
            <p>1.课程评卷完成后，阅卷系统里的卷面成绩数据才会同步更新；</p>
            <p>
              2.赋分试算结果并保存后，赋分总分才会显示赋分成绩；若赋分需要修改，则赋分相关指标计算完成后，赋分总分数据也会同步更新；
            </p>
            <p>
              3.可导出查询结果的EXCEL表，便于开课学院做个性化的成绩分析处理。
            </p>
          </div>
        </el-popover>
      </h2>
      <div v-if="orgName">
        <i class="icon icon-sign"></i>开课学院：{{ orgName }}
      </div>
    </div>
    <div class="part-box part-box-filter">
      <el-form ref="FilterForm" label-position="left" label-width="60px" inline>
        <el-form-item label="学期：">
          <semester-select
            v-model="filter.semesterId"
            select-default
            :clearable="false"
            @change="semesterChange"
          ></semester-select>
        </el-form-item>
        <el-form-item label="考试：">
          <exam-select
            v-model="filter.examId"
            select-default
            :clearable="false"
            :semester-id="filter.semesterId"
            @change="examChange"
          ></exam-select>
        </el-form-item>
        <el-form-item label="课程：">
          <course-select
            v-model="filter.courseCode"
            :exam-id="filter.examId"
          ></course-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="filter.current"
            style="width: 142px;"
            placeholder="请选择"
            clearable
            @change="currentChange"
          >
            <el-option
              v-for="(val, key) in CURRENT_TYPE"
              :key="key"
              :value="key"
              :label="val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考查学院：">
          <inspect-college-select
            ref="InspectCollegeSelect"
            v-model="filter.inspectCollegeId"
            :filter="filter"
          ></inspect-college-select>
        </el-form-item>
        <el-form-item label="教师：">
          <teach-select
            ref="TeachSelect"
            v-model="filter.teacherId"
            :filter="filter"
          ></teach-select>
        </el-form-item>
        <el-form-item label="模糊查询：">
          <el-input
            v-model="filter.studentParam"
            placeholder="准考证号/学号/姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="part-box part-box-pad">
      <div class="box-justify mb-2">
        <el-button
          type="info"
          icon="icon icon-export-white"
          :disabled="loading"
          @click="toExport"
        >
          导出查询结果</el-button
        >
        <!-- <upload-button
          btn-icon="el-icon-upload2"
          btn-content="导入异常考试类型"
          btn-type="warning"
          :upload-url="uploadUrl"
          :format="['doc', 'docx']"
          @upload-error="uplaodError"
          @upload-success="uploadSuccess"
          style="margin: 0"
        >
        </upload-button> -->
      </div>
      <el-table
        ref="TableList"
        :data="dataList"
        border
        @sort-change="sortChange"
      >
        <el-table-column
          prop="semester"
          label="学期"
          min-width="160"
        ></el-table-column>
        <el-table-column prop="examName" label="考试名称"></el-table-column>
        <el-table-column prop="courseCode" label="课程(代码)" min-width="100">
          <span slot-scope="scope">
            {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
          </span>
        </el-table-column>
        <el-table-column
          prop="ticketNumber"
          label="准考证号"
          min-width="120"
        ></el-table-column>
        <el-table-column prop="studentCode" label="学号" min-width="130">
          <template slot-scope="scope">
            <el-button
              class="btn-table-icon"
              type="text"
              title="查看报告"
              @click="toReport(scope.row)"
              v-if="scope.row.current"
              >{{ scope.row.studentCode }}</el-button
            >
            <span v-else>{{ scope.row.studentCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="80"></el-table-column>
        <el-table-column prop="current" width="70" sortable="custom">
          <span class="cell-head" slot="header">考试<br />类型</span>
          <span slot-scope="scope">{{
            scope.row.current | studentExamTypeFilter
          }}</span>
        </el-table-column>
        <el-table-column prop="objectiveScore" width="70" sortable="custom">
          <span class="cell-head" slot="header">客观<br />总分</span>
        </el-table-column>
        <el-table-column prop="subjectiveScore" width="70" sortable="custom">
          <span class="cell-head" slot="header">主观<br />总分</span>
        </el-table-column>
        <el-table-column prop="totalScore" width="70" sortable="custom">
          <span class="cell-head" slot="header">卷面<br />总分</span>
        </el-table-column>
        <el-table-column prop="assignedScore" width="70" sortable="custom">
          <span class="cell-head" slot="header">赋分<br />总分</span>
        </el-table-column>
        <el-table-column
          prop="clazzName"
          label="班级"
          min-width="100"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          prop="teachCollegeName"
          label="开课学院"
          min-width="100"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          prop="inspectCollegeName"
          label="考查学院"
          min-width="100"
          sortable="custom"
        ></el-table-column>
        <el-table-column prop="teacherName" width="80" sortable="custom">
          <span class="cell-head" slot="header">任课<br />老师</span>
        </el-table-column>
      </el-table>
      <div class="part-page">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :current-page="current"
          :total="total"
          :page-size="size"
          @current-change="toPage"
        >
        </el-pagination>
      </div>
    </div>

    <!-- PreviewStudentReport -->
    <preview-student-report
      :instance="curStudent"
      ref="PreviewStudentReport"
    ></preview-student-report>
  </div>
</template>

<script>
import {
  schoolStudentTeachCollegeResult,
  schoolStudentExportTeachCollegeResult
} from "../api";
import { CURRENT_TYPE } from "../../../constants/enumerate";
import PreviewStudentReport from "./student-report-manage/PreviewStudentReport";
// import UploadButton from "@/components/UploadButton.vue";
import { downloadByApi } from "@/plugins/download";

export default {
  name: "teach-college-score",
  components: { PreviewStudentReport },
  data() {
    return {
      isInit: false,
      filter: {
        semesterId: "",
        examId: "",
        courseCode: "",
        current: null,
        inspectCollegeId: "",
        teacherId: "",
        studentParam: "",
        column: null,
        order: null
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      orgName: "",
      dataList: [],
      curStudent: {},
      CURRENT_TYPE,
      loading: false,
      // import
      uploadUrl: "/api/report/school/student/import_abnormal_data"
    };
  },
  created() {
    const orgInfo = this.$ls.get("user", { orgInfo: { name: "" } }).orgInfo;
    if (orgInfo) this.orgName = orgInfo.name;
  },
  methods: {
    search() {
      this.toPage(1);
    },
    async getList() {
      if (!this.filter.semesterId || !this.filter.examId) {
        this.$message.error("请选择学期和考试！");
        return;
      }
      let datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size
      };
      if (datas.current) datas.current = !!(datas.current * 1);
      const data = await schoolStudentTeachCollegeResult(datas);
      this.dataList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    semesterChange() {
      this.filter.examId = null;
      this.examChange();
    },
    examChange() {
      this.filter.inspectCollegeId = null;
      this.filter.courseCode = null;
      this.filter.teacherId = null;

      // 初次载入页面加载默认数据
      if (!this.isInit && this.filter.examId && this.filter.semesterId) {
        this.isInit = true;
        this.search();
      }
    },
    currentChange() {
      this.filter.inspectCollegeId = null;
      this.filter.teacherId = null;
    },
    sortChange({ prop, order }) {
      if (order) {
        this.filter.column = prop;
        this.filter.order = order.replace("ending", "").toUpperCase();
      } else {
        this.filter.column = null;
        this.filter.order = null;
      }
      this.getList();
    },
    async toExport() {
      if (this.loading) return;

      if (!this.filter.semesterId || !this.filter.examId) {
        this.$message.error("请选择学期和考试！");
        return;
      }

      this.loading = true;
      const res = await downloadByApi(() => {
        return schoolStudentExportTeachCollegeResult(this.filter);
      }, `开课成绩明细.xlsx`).catch(() => {});

      this.loading = false;

      if (res) {
        this.$message.success("文件下载成功！");
      } else {
        this.$message.error("文件下载失败，请重新尝试！");
      }
    },
    toReport(row) {
      this.curStudent = {
        schoolId: this.$ls.get("schoolId"),
        studentName: row.name,
        studentCode: row.studentCodeEncoder,
        examId: this.filter.examId,
        courseCode: row.courseCode
      };
      this.$refs.PreviewStudentReport.open();
    },
    // import
    uplaodError(errorData) {
      this.$notify.error({ title: "错误提示", message: errorData.message });
    },
    uploadSuccess(data) {
      this.$message.success("上传成功！");
    }
  }
};
</script>
