<template>
  <div style="padding-bottom: 20px">
    <div class="search">
      <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="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>
    <div class="student_table">
      <el-table
        :data="tableData"
        border
        :fit="true"
        v-loading="isLoading"
        style="width: 100%"
        :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="sName"
          align="center"
          label="学生姓名"
          min-width="20%"
        >
        </el-table-column>
        <el-table-column
          prop="cName"
          align="center"
          label="班级"
          min-width="20%"
        >
        </el-table-column>
        <el-table-column
          prop="course"
          align="center"
          label="课程"
          min-width="40%"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="20%">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="lookEvaCourse(scope.row.userid)"
              >报告</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <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>
    <el-dialog
      title="选择报告"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="650px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div v-if="!isLoading1">
        <div
          class="evaBox"
          v-for="(item, index) in mbCourse"
          :key="index"
          v-loading="isLoading1"
        >
          <div>目标体系-{{ item.title }}</div>
          <el-table :data="item.course" border style="width: 100%" stripe>
            <el-table-column
              prop="title"
              label="项目"
              align="center"
              min-width="15%"
            >
            </el-table-column>
            <el-table-column label="选择" align="center" min-width="25%">
              <template slot-scope="scope">
                <input
                  type="checkbox"
                  :id="scope.row.courseId"
                  :value="scope.row.title"
                  @change="isChooseS(scope.row.courseId, index)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-else>正在加载数据中...</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getStudentReport">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["ooid", "ccid"],
  data() {
    return {
      sName: "",
      classChoose: "",
      isChooseStudent: "",
      page: 1,
      total: 0,
      classJuri: [],
      tableData: [],
      isLoading: false,
      isLoading1: false,
      dialogVisible: false,
      mbCourse: [],
      courseIdList: [],
    };
  },
  watch: {
    ooid: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.getClass();
        this.getSData();
        this.$forceUpdate();
      },
    },
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    getStudentReport() {
      if (this.courseIdList.length > 0) {
        this.$emit("getStReport", this.courseIdList, this.isChooseStudent);
        this.dialogVisible = false;
      } else {
        this.$message.error("请选择至少一项课程！");
      }
    },
    handleClose(done) {
      done();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getSData();
    },
    searchStudent() {
      this.page = 1;
      this.getSData();
    },
    isChooseS(id, i) {
      if (this.mbCourse[i].isChoose.indexOf(id) != -1) {
        this.mbCourse[i].isChoose.splice(
          this.mbCourse[i].isChoose.indexOf(id),
          1
        );
      } else {
        this.mbCourse[i].isChoose.push(id);
      }
      this.courseIdList = this.mbCourse[i].isChoose;
      this.$forceUpdate();
    },
    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);
        });
    },
    getSData() {
      this.isLoading = true;
      let params = {
        cu: this.sName,
        cn: this.classChoose,
        oid: this.ooid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectSr", 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);
        });
    },
    getSEvaList() {
      this.isLoading1 = true;
      let params = {
        uid: this.isChooseStudent,
        oid: this.ooid,
        cid: this.ccid,
      };
      this.ajax
        .get(this.$store.state.api + "selectMrEva", params)
        .then((res) => {
          this.isLoading1 = false;
          this.mbCourse = res.data[1];
          var courseList = res.data[2];
          for (var i = 0; i < this.mbCourse.length; i++) {
            this.mbCourse[i].course = [];
            this.mbCourse[i].isChoose = [];
            for (var j = 0; j < courseList.length; j++) {
              if (this.mbCourse[i].id == courseList[j].evaId) {
                this.mbCourse[i].course.push(courseList[j]);
              }
            }
          }
        })
        .catch((err) => {
          this.isLoading1 = false;
          console.error(err);
        });
    },
    lookEvaCourse(id) {
      this.isChooseStudent = id;
      this.getSEvaList();
      this.dialogVisible = true;
    },
  },
  created() {
    this.getClass();
    this.getSData();
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
  font-size: 15px;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 14px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.check_diy >>> .el-dialog__body {
  padding-bottom: 0;
}
.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}
.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;
}
.student_search > div:nth-child(1) {
  margin-right: 10px;
}
/* .people_name {
  display: flex;
  justify-content: flex-start;
  padding: 20px 0 0 25px;
  flex-direction: column;
  flex-wrap: wrap;
} */

.p_box {
  position: relative;
}

/* .people_name >>> .el-checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.people_name >>> .el-checkbox__label {
  text-overflow: ellipsis;
  overflow: hidden;
  width: calc(100%);
} */

.people_name2 >>> .el-checkbox__label {
  width: calc(100% - 130px);
}
.student_table >>> .el-table--border td {
  border-right: 0px !important;
}

.student_table >>> .el-table,
.student_table >>> .el-table__body-wrapper {
  height: auto !important;
}

.student_page {
  margin-top: 10px;
}
.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;
}
.evaBox,
.evaBox > div:nth-child(1) {
  margin-bottom: 10px;
}
</style>