<template>
  <div class="assign-result">
    <el-form ref="FilterForm" label-position="left" inline>
      <el-form-item label="考查学院：">
        <kc-college-select
          v-model="filter.kcCollege"
          :filter-data="assignInfo"
        ></kc-college-select>
      </el-form-item>
      <el-form-item label="班级：">
        <clazz-select
          v-model="filter.clazzId"
          :filter-data="{ ...assignInfo, kcCollege: filter.kcCollege }"
        ></clazz-select>
      </el-form-item>
      <el-form-item label="任课老师：">
        <teacher-select
          v-model="filter.teacherCode"
          :filter-data="{
            ...assignInfo,
            kcCollege: filter.kcCollege,
            clazzId: filter.clazzId,
          }"
        ></teacher-select>
      </el-form-item>
      <el-form-item label="赋分分数段：">
        <el-input-number
          style="width: 65px"
          v-model.trim="filter.minAssignScore"
          placeholder="下限"
          :controls="false"
          :min="0"
          :max="filter.maxAssignScore || 9999"
        ></el-input-number>
        <span class="mlr-1">-</span>
        <el-input-number
          style="width: 65px"
          v-model.trim="filter.maxAssignScore"
          placeholder="上限"
          :controls="false"
          :min="filter.minAssignScore || 0"
          :max="9999"
        ></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toPage(1)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="TableList" :data="dataList">
      <el-table-column
        prop="courseCode"
        label="课程代码"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="courseName"
        label="课程名称"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="studentCode"
        label="学号"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="studentName"
        label="姓名"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="objectiveScore"
        label="客观总分"
        width="90"
      ></el-table-column>
      <el-table-column
        prop="subjectiveScore"
        label="主观总分"
        width="90"
      ></el-table-column>
      <el-table-column
        prop="totalScore"
        label="总分"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="assignScore"
        label="赋分后总分"
        width="100"
      ></el-table-column>
      <el-table-column class-name="action-column" label="评分明细" width="100">
        <template slot-scope="scope">
          <el-button
            class="btn-primary-strict"
            type="text"
            @click="toViewScoreDetail(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="clazzName"
        label="班级"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="collegeName"
        label="学院"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="teacherName"
        label="任课老师"
        width="120"
      ></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>

    <!-- ScoreDetailDialog -->
    <score-detail-dialog
      ref="ScoreDetailDialog"
      :data="curRow"
    ></score-detail-dialog>
  </div>
</template>

<script>
import { assignmentCalcResult } from "../../api";
import ScoreDetailDialog from "./ScoreDetailDialog.vue";

export default {
  name: "assign-result",
  components: { ScoreDetailDialog },
  props: {
    assignInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      filter: {
        kcCollege: "",
        clazzId: "",
        teacherCode: "",
        minAssignScore: undefined,
        maxAssignScore: undefined,
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      curRow: {},
      scoreDetailDialog: false,
    };
  },
  methods: {
    async getList() {
      const datas = {
        ...this.assignInfo,
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size,
      };
      if (
        datas.minAssignScore &&
        datas.maxAssignScore &&
        datas.minAssignScore > datas.maxAssignScore
      ) {
        this.$message.error("赋分分数段下限不能高于上限");
        return;
      }

      const data = await assignmentCalcResult(datas);
      this.dataList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    toViewScoreDetail(row) {
      this.curRow = row;
      this.$refs.ScoreDetailDialog.open();
    },
  },
};
</script>
