<template>
  <div class="assign-score-action">
    <div class="page-head page-head-flex">
      <h2>
        <span>赋分管理</span>
        <el-popover
          popper-class="el-popper-dark"
          placement="right-start"
          width="300"
          trigger="hover"
        >
          <i class="el-icon-question" slot="reference"></i>
          <div>
            <p>
              1.赋分前，请开课学院确认卷面成绩是已确定可以赋分的状态；赋分成绩发布后，考查学院及教务处才可查看发布后的最终成绩数据；
            </p>
            <p>
              2.按照“试算→预览→发布”的流程完成赋分；
            </p>
            <p>
              3.若对赋分结果不满意，可进行重算；
            </p>
            <p>
              4.若对发布后的成绩不满意，可撤回。
            </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 label="发布状态：">
          <el-select
            v-model="filter.publishStatus"
            style="width: 150px;"
            placeholder="请选择发布状态"
            clearable
          >
            <el-option
              v-for="(val, key) in PUBLISH_STATUS"
              :key="key"
              :value="key"
              :label="val"
            ></el-option>
          </el-select>
        </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">
      <el-table
        ref="TableList"
        :data="dataList"
        border
        @sort-change="sortChange"
      >
        <el-table-column prop="courseCode" label="课程(代码)" min-width="120">
          <span
            class="text-link"
            slot-scope="scope"
            @click="toPreview(scope.row)"
          >
            {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
          </span>
        </el-table-column>
        <el-table-column
          prop="teachCollegeName"
          label="开课学院"
          min-width="80"
        ></el-table-column>
        <el-table-column prop="inspectCollegeCount" width="70">
          <span class="cell-head" slot="header">考查<br />学院</span>
        </el-table-column>
        <el-table-column prop="realityCount" width="70">
          <span class="cell-head" slot="header">有效<br />人数</span>
        </el-table-column>
        <el-table-column prop="currentRealityRate" width="90">
          <span class="cell-head" slot="header">应届占比<br />(人数)</span>
          <span slot-scope="scope">
            {{ scope.row.currentRealityRate }}% <br /><i class="color-gray"
              >({{ scope.row.currentRealityCount }})</i
            >
          </span>
        </el-table-column>
        <el-table-column prop="pastRealityRate" width="100">
          <span class="cell-head" slot="header">非应届占比<br />(人数)</span>
          <span slot-scope="scope">
            {{ scope.row.pastRealityRate }}%
            <i class="color-gray">({{ scope.row.pastRealityCount }})</i>
          </span>
        </el-table-column>
        <el-table-column
          prop="absentCount"
          label="缺考"
          width="60"
        ></el-table-column>
        <el-table-column label="赋分前" align="center">
          <el-table-column prop="avgScoreBefore" width="80">
            <span class="cell-head" slot="header">总体<br />平均分</span>
          </el-table-column>
          <el-table-column prop="notPassRateBefore" width="80">
            <span class="cell-head" slot="header">总体不<br />及格率</span>
            <span slot-scope="scope">
              {{ scope.row.notPassRateBefore }}% <br /><i class="color-gray"
                >({{ scope.row.notPassCountBefore }})</i
              >
            </span>
          </el-table-column>
          <el-table-column
            prop="currentAvgScoreBefore"
            sortable="custom"
            width="100"
          >
            <span class="cell-head" slot="header">应届<br />平均分</span>
          </el-table-column>
          <el-table-column
            prop="currentNotPassRateBefore"
            sortable="custom"
            width="100"
          >
            <span class="cell-head" slot="header">应届不<br />及格率</span>
            <span slot-scope="scope">
              {{ scope.row.currentNotPassRateBefore }}% <br /><i
                class="color-gray"
                >({{ scope.row.currentNotPassCountBefore }})</i
              >
            </span>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="coefficient" width="60" align="center">
          <span class="cell-head" slot="header">赋分<br />系数</span>
        </el-table-column>
        <el-table-column label="赋分后" align="center">
          <el-table-column prop="avgScoreAfter" width="80">
            <span class="cell-head" slot="header">总体<br />平均分</span>
          </el-table-column>
          <el-table-column prop="notPassRateAfter" width="80">
            <span class="cell-head" slot="header">总体不<br />及格率</span>
            <span slot-scope="scope">
              {{ scope.row.notPassRateAfter }}% <br /><i class="color-gray"
                >({{ scope.row.notPassCountAfter }})</i
              >
            </span>
          </el-table-column>
          <el-table-column
            prop="currentAvgScoreAfter"
            sortable="custom"
            width="100"
          >
            <span class="cell-head" slot="header">应届<br />平均分</span>
          </el-table-column>
          <el-table-column
            prop="currentNotPassRateAfter"
            sortable="custom"
            width="100"
          >
            <span class="cell-head" slot="header">应届不<br />及格率</span>
            <span slot-scope="scope">
              {{ scope.row.currentNotPassRateAfter }}% <br /><i
                class="color-gray"
                >({{ scope.row.currentNotPassCountAfter }})</i
              >
            </span>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="status" label="发布状态" width="90">
          <span slot-scope="scope">
            {{ scope.row.status | publishStatusFilter }}
          </span>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="130">
          <template slot-scope="scope">
            <el-button
              class="btn-table-icon"
              type="text"
              @click="toCalc(scope.row, false)"
              v-if="scope.row.status === 'WILL_COMPUTE'"
              >试算</el-button
            >
            <el-button
              class="btn-table-icon"
              type="text"
              @click="toCalc(scope.row, true)"
              v-if="scope.row.status === 'UN_PUBLISH'"
              >重算</el-button
            >
            <el-button
              class="btn-table-icon"
              type="text"
              @click="toPreview(scope.row)"
              v-if="scope.row.status === 'UN_PUBLISH'"
              >预览</el-button
            >
            <el-button
              class="btn-table-icon"
              type="text"
              @click="toPreview(scope.row)"
              v-if="scope.row.status === 'PUBLISH'"
              >查看</el-button
            >
            <el-button
              class="btn-table-icon"
              type="text"
              @click="toPublish(scope.row, true)"
              v-if="scope.row.status === 'UN_PUBLISH'"
              >发布</el-button
            >
            <el-button
              class="btn-table-icon"
              type="text"
              @click="toPublish(scope.row, false)"
              v-if="scope.row.status === 'PUBLISH'"
              >撤回</el-button
            >
          </template>
        </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>
  </div>
</template>

<script>
import {
  courseSurveyAspointsList,
  courseSurveyAspointsPublish
} from "../../api";
import { PUBLISH_STATUS } from "../../../../constants/enumerate";

export default {
  name: "assign-score-action",

  data() {
    return {
      isInit: false,
      filter: {
        semesterId: "",
        examId: "",
        courseCode: "",
        publishStatus: null,
        column: null,
        order: null
      },
      PUBLISH_STATUS,
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: [],
      orgName: ""
    };
  },
  methods: {
    search() {
      this.toPage(1);
    },
    async getList() {
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size
      };
      const data = await courseSurveyAspointsList(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.courseCode = null;
      // 初次载入页面加载默认数据
      if (!this.isInit && this.filter.examId && this.filter.semesterId) {
        this.isInit = true;
        this.search();
      }
    },
    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();
    },
    toCalc(row, again) {
      this.$ls.set("assignSet", {
        semesterId: this.filter.semesterId,
        examId: this.filter.examId,
        courseCode: row.courseCode,
        coefficient: row.coefficient,
        status: row.status,
        again
      });
      this.$router.push({ name: "AssignScoreActionTry" });
    },
    toPreview(row) {
      this.$ls.set("ownerCourseSet", {
        semesterId: this.filter.semesterId,
        examId: this.filter.examId,
        courseCode: row.courseCode
      });
      this.$router.push({ name: "OwnerCourseExamAnalysis" });
      // this.$ls.set("assignSet", {
      //   semesterId: this.filter.semesterId,
      //   examId: this.filter.examId,
      //   courseCode: row.courseCode,
      //   coefficient: row.coefficient,
      //   status: row.status,
      //   again: false
      // });
      // this.$router.push({ name: "AssignScoreActionTry" });
    },
    toPublish(row, publish) {
      const actionName = publish ? "发布" : "撤销";
      this.$confirm(`确定${actionName}当前学院报告吗？`, "提示", {
        cancelButtonClass: "el-button--danger is-plain",
        confirmButtonClass: "el-button--primary",
        type: "warning"
      })
        .then(() => {
          this.publish(row, publish);
        })
        .catch(() => {});
    },
    async publish(row, publish) {
      const res = await courseSurveyAspointsPublish({
        examId: this.filter.examId,
        courseCode: row.courseCode,
        publishStatus: publish ? "PUBLISH" : "UN_PUBLISH"
      });
      if (!res) return;
      this.$message.success("操作成功");
      this.getList();
    }
  }
};
</script>
