<template>
  <!-- 活动管理 -->
  <div class="activity_manage">
    <el-table :data="activityData" style="width: 997px" :header-cell-style="changeHeader">
      <el-table-column label="学号" align="center">
        <template slot-scope="scope">
          <div class="cell_color">{{scope.row.username}}</div>
        </template>
      </el-table-column>
      <el-table-column label="学生姓名" align="center">
        <template slot-scope="scope">
          <div class="cell_color">{{scope.row.nickname}}</div>
        </template>
      </el-table-column>
      <el-table-column  label="测评时间" align="center">
        <template slot-scope="scope">
          <div class="cell_color" v-if="scope.row.date">{{scope.row.date}}<br/>{{scope.row.time}}</div>
          <div class="cell_color" v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="测评状态" align="center">
        <template slot-scope="scope">
          <div
            class="no_test"
            :class="{tested:scope.row.status == 1}"
          >{{scope.row.status == 1?"已测评":"未测评"}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div
            class="operation"
            @click="activeOperate(scope.row)"
            v-show="scope.row.status == 1"
          >查看报告</div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      class="teach_pagation"
      layout="prev, pager, next"
      :page-count="total"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>
<script>
import { post } from "@/api/http";
export default {
  data() {
    return {
      activityData: [],
      id: "",
      total: 10,
      page: "",
      type: ""
    };
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      this.testStudentData();
      document.getElementById("search").scrollIntoView();
    },
    // 表头样式
    changeHeader({ row, rowIndex }) {
      if (rowIndex == 0) {
        return "background-color:#f1f1f1;color:#5B5E63!important;font-weight:400";
      }
    },
    // 查看报告
    activeOperate(row) {
      console.log(row);
      if (this.type == 1) {
        // 兴趣测评
        this.$router.push({
          path: "/AssessmentReport",
          query: { testId: row.id }
        });
      } else {
        // 多元测评
        this.$router.push({
          path: "/MulReport",
          query: { testId: row.user_id, id: this.id }
        });
      }
    },
    // 测评管理
    testStudentData() {
      let url = "/api/teacher/testStudentData";
      let params = {
        test_id: this.id,
        page: this.page
      };
      post(url, params).then(res => {
        this.activityData = res.test_list;
        this.total = res.total_page;
      });
    }
  },
  components: {},
  mounted() {
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.testStudentData();
  },
  watch:{
    '$route'(to,from){
      this.id = this.$route.query.id;
      this.testStudentData();
    }
  },
};
</script>
<style scoped>
@import "../../../style/personal.css";

.operation {
  margin: 0 0 0 20px;
}

/* 已报名 */
.sign_up {
  background-color: #a4c7ff;
  border-color: #a4c7ff;
}

.input_exp {
  background-color: #fff;
  color: #409eff;
}
.teach_pagation {
  margin-top: 55px;
}
.no_test {
  color: #f44a5e;
}
.tested {
  color: #47d1a0;
}
</style>