<template>
  <div class="data-return-manage">
    <div class="part-box part-box-filter part-box-flex">
      <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
        <el-form-item prop="semesterId" label="学期：">
          <semester-select
            ref="SemesterSelect"
            v-model="filter.semesterId"
            :clearable="false"
            manual-fetch
            select-default
          ></semester-select>
        </el-form-item>
        <el-form-item prop="examTypeId" label="考试类型：">
          <exam-type-select v-model="filter.examTypeId"></exam-type-select>
        </el-form-item>
        <el-form-item label="学院：">
          <college-select v-model="filter.collegeId"></college-select>
        </el-form-item>
        <el-form-item label="考试：">
          <ecs-exam-select
            v-model="filter.examId"
            :college-id="filter.collegeId"
          ></ecs-exam-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toPage(1)">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="part-box-action">
        <el-button type="primary" icon="el-icon-download" @click="toDownload"
          >下载</el-button
        >
      </div>
    </div>
    <div class="part-box part-box-pad">
      <el-table ref="TableList" :data="dataList">
        <el-table-column
          type="index"
          label="序号"
          width="70"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column prop="examId" label="云阅卷id"></el-table-column>
        <el-table-column prop="xnm" label="学年"></el-table-column>
        <el-table-column prop="xqm" label="学期"></el-table-column>
        <el-table-column prop="jxbId" label="教学班ID"></el-table-column>
        <el-table-column prop="kch" label="课程号"></el-table-column>
        <el-table-column prop="kcmc" label="课程名称"></el-table-column>
        <el-table-column prop="xh" label="学号"></el-table-column>
        <el-table-column prop="xmcj" label="成绩" width="100"></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"
          :page-sizes="[20, 50, 100]"
          @current-change="toPage"
        >
        </el-pagination>
      </div>
    </div>

    <!-- DataTaskDialog -->
    <data-task-dialog
      ref="DataTaskDialog"
      task-type="CLOUD_MARKING_STUDENT_SCORE"
    ></data-task-dialog>
  </div>
</template>

<script>
import { dataReturnList, downloadDataReturn } from "../api";
import DataTaskDialog from "../components/DataTaskDialog.vue";
import { downloadByApi } from "@/plugins/download";

export default {
  name: "data-return-manage",
  components: { DataTaskDialog },
  data() {
    return {
      filter: {
        semesterId: "",
        examTypeId: "",
        collegeId: "",
        examId: "",
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      downloading: false,
    };
  },
  async mounted() {
    await this.$refs.SemesterSelect.search();
    // this.getList();
  },
  methods: {
    async getList() {
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size,
      };

      const data = await dataReturnList(datas);
      this.dataList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    async toDownload() {
      if (
        !this.filter.semesterId ||
        !this.filter.examTypeId ||
        !this.filter.examId
      ) {
        this.$message.error("学期、考试以及考试类型必选！");
        return;
      }

      if (this.downloading) return;
      this.downloading = true;

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

      if (!res) return;
      this.$message.success("下载成功！");
    },
  },
};
</script>
