<template>
  <div style="padding-bottom: 20px">
    <div class="search">
      <div class="sxBox">
        <div class="student_search">
          <div>班级筛选</div>
          <el-select v-model="classChoose" @change="searchStudent">
            <el-option label="全部" value="">全部</el-option>
            <el-option
              v-for="(c, cIndex) in classJuri"
              :key="cIndex"
              :value="c.id"
              :label="c.name"
            ></el-option>
          </el-select>
        </div>
        <div class="student_search">
          <div>课程筛选</div>
          <el-select v-model="courseChoose" @change="searchStudent">
            <el-option label="全部" value="">全部</el-option>
            <el-option
              v-for="(c, cIndex) in courseJuri"
              :key="cIndex"
              :value="c.courseId"
              :label="c.title"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="rightSearch">
        <div class="searchImg">
          <img src="../../../assets/icon/search.png" alt="" />
        </div>
        <el-input v-model="sName" placeholder="请输入学生姓名或账号"></el-input>
        <el-button size="mini" type="primary" @click="searchStudent"
          >查询</el-button
        >
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      v-loading="isLoading"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="cName" align="center" label="班级" min-width="25%">
      </el-table-column>
      <el-table-column
        prop="course"
        align="center"
        label="课程"
        min-width="25%"
      >
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="25%">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="getUserid(scope.row.id, scope.row.courseid)"
            >报告</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="student_page">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        v-if="page"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ["ooid"],
  data() {
    return {
      sName: "",
      classChoose: "",
      classJuri: [],
      courseChoose: "",
      page: 1,
      total: 0,
      courseJuri: [],
      tableData: [],
      isLoading: false,
      useridList: [],
    };
  },
  watch: {
    ooid: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.getClass();
        this.getCourse();
        this.getCourseData();
        this.$forceUpdate();
      },
    },
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getCourseData();
    },
    searchStudent() {
      this.page = 1;
      this.getCourseData();
    },
    getUserid(cid, courseid) {
      let params = {
        cid: cid,
        courseid: courseid,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseSuid", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            this.useridList = [];
            for (var i = 0; i < res.data[0].length; i++) {
              this.useridList.push(res.data[0][i].userid);
            }
          }
          this.$emit("getCourseReport", this.useridList, courseid);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getClass() {
      let params = {
        oid: this.ooid,
      };
      this.ajax
        .get(this.$store.state.api + "selectClassBySchool", params)
        .then((res) => {
          this.classJuri = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getCourse() {
      let params = {
        oid: this.ooid,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseByOid", params)
        .then((res) => {
          this.courseJuri = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getCourseData() {
      this.isLoading = true;
      let params = {
        cu: this.sName,
        cn: this.classChoose,
        cl: this.courseChoose,
        oid: this.ooid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseR", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
  },
  created() {
    this.getClass();
    this.getCourse();
    this.getCourseData();
  },
};
</script>

<style scoped>
.search {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 20px 0;
}
.search > div:nth-child(2) {
  position: relative;
}
.searchImg {
  width: 25px;
  height: 25px;
  position: absolute;
  z-index: 9;
  top: 8px;
  left: 5px;
}
.searchImg > img {
  width: 100%;
  height: 100%;
}
.search > div:nth-child(2) >>> .el-input__inner {
  width: 250px;
  text-indent: 20px;
}
.el-table >>> .even_row {
  background-color: #f1f1f1;
}
.student_search {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-right: 10px;
}
.student_search > div:nth-child(1) {
  margin-right: 10px;
  min-width: 65px;
}
.sxBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.rightSearch {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.rightSearch >>> .el-button {
  margin-left: 5px;
  height: 35px;
  width: 80px;
  font-size: 14px;
}
.student_page {
  margin-top: 10px;
}
</style>