<template>
  <div class="app-container">
    <el-row :gutter="24" class="mb8">
      <el-col :span="12">
        <div
          style="
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 20px;
          "
        >
          学生数据管理/学生测评历史排名/{{user.name}}
        </div>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-button @click="$router.go(-1)" size="mini" round>返回</el-button>
      </el-col>
    </el-row>
    <form-search
      :userData="user"
      :searchformShow="searchformShow"
      @handleQuery="handleQuery"
    ></form-search>
    <el-table v-loading="loading" :data="dataList" style="width: 100%">
      <el-table-column label="序号" type="index" align="center" />
      <el-table-column label="考试名称" prop="evaluationName" align="center" />
      <el-table-column label="时间" prop="evaluationTime" align="center" />
      <el-table-column label="得分率" prop="scoreRate" align="center" />
      <el-table-column label="名次" prop="ranking" align="center" />
      <el-table-column label="浮动情况" align="center">
        <template slot-scope="scope">
          <ranking-adjust
            :value="dataList[scope.$index].rankingAdjust"
          ></ranking-adjust>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-view"
            @click="detail(scope.$index)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-size="20"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getStudentHistory } from "@/api/webApi/front";
import RankingAdjust from "@/components/RankingAdjust";

export default {
  components: { RankingAdjust },
  data() {
    return {
      total: 0,
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        catalogId: "",
        classId: "",
        customerCode: "",
        gradeId: "",
        subjectId: "",
        termId: "",
        typeId: "",
      },
      dataList: [],
      user: {},
      routeParams: {},
      searchformShow: {}
    };
  },
  created() {
    this.routeParams = this.$route.query;
    this.user.id = this.routeParams.userId;
    this.user.name = this.routeParams.name;
    this.user.img = this.routeParams.avatar;
    this.searchformShow = { userSubject: '', gradeid: '', semester: '' }
    this.handleQuery();
  },
  methods: {
    detail(idx) {
      const nextItem = this.dataList[idx];
      const nextParams = {
        evaluationClassId: nextItem.evaluationClassId,
        evaluationName: nextItem.evaluationName,
        studentName: this.user.name,
        customerCode: this.routeParams.customerCode
      };
      this.$router.push({
        path: "/idc/reviewHistory/userList",
        query: nextParams,
      });
    },
    // 选择图标
    selected(name) {
      this.form.icon = name;
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      getStudentHistory(this.queryParams).then((rep) => {
        console.log("getStudentHistory rep=", rep);
        if (rep.code == 200 || rep.code == 0) {
          this.dataList = rep.rows || rep.data;
          this.total = rep.total || 0;
        } else {
          this.msgError(rep.msg || "getStudentHistory请求异常");
        }
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery(ctrlParams = {}) {
      this.queryParams.pageNum = 1;
      this.queryParams.subjectId = ctrlParams.userSubject || "";
      this.queryParams.gradeId = ctrlParams.gradeid || "";
      this.queryParams.termId = ctrlParams.semester || "";
      this.queryParams.typeId = ctrlParams.exam || "";
      this.queryParams.classId = this.routeParams.classId;
      this.queryParams.customerCode = this.routeParams.customerCode;
      this.getList();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
