<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="eTitle"
        align="center"
        label="目标体系名称"
        min-width="25%"
      >
      </el-table-column>
      <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="lookmbCourse(scope.row.eid, scope.row.id)"
            >报告</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>
    <el-dialog
      title="选择课程"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="650px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div>
          <el-table
            :data="tableData1"
            border
            v-loading="isLoading1"
            style="width: 100%; margin-top: 10px"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="title"
              align="center"
              label="课程名称"
              min-width="25%"
            >
            </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)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getEvaReport">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["ooid"],
  data() {
    return {
      sName: "",
      classChoose: "",
      classJuri: [],
      courseChoose: "",
      page: 1,
      total: 0,
      courseJuri: [],
      tableData: [],
      tableData1: [],
      dialogVisible: false,
      isChooseList: [],
      isLoading: false,
      isLoading1: false,
      classid: "",
      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 "";
      }
    },
    handleClose(done) {
      done();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getCourseData();
    },
    getEvaReport() {
      if (this.isChooseList.length > 0) {
        let params = {
          cid: this.classid,
          courseid: this.isChooseList.join(","),
        };
        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);
              }
            }
            console.log(this.useridList, this.isChooseList.join(","));
            this.$emit(
              "getEvaReport",
              this.useridList,
              this.isChooseList.join(",")
            );
          })
          .catch((err) => {
            console.error(err);
          });
        this.dialogVisible = false;
      } else {
        this.$message.error("请选择至少一项课程！");
      }
    },
    isChooseS(id) {
      if (this.isChooseList.length > 0) {
        if (this.isChooseList.indexOf(id) == -1) {
          this.isChooseList.push(id);
        } else {
          this.isChooseList.splice(this.isChooseList.indexOf(id), 1);
        }
      } else {
        this.isChooseList.push(id);
      }
      this.$forceUpdate();
    },
    lookmbCourse(eid, id) {
      this.isLoading1 = true;
      this.classid = id;
      let params = {
        eid: eid,
        cid: id,
      };
      this.ajax
        .get(this.$store.state.api + "selectEvaCourse", params)
        .then((res) => {
          this.isLoading1 = false;
          this.tableData1 = res.data[0];
          this.isChooseList = [];
          this.dialogVisible = true;
        })
        .catch((err) => {
          this.isLoading1 = false;
          console.error(err);
        });
    },
    searchStudent() {
      this.page = 1;
      this.getCourseData();
    },
    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>
.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;
  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>