<template>
  <div class="pb_content" style="
      overflow: auto;
      margin: 0px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    ">
    <div>
      <div class="pb_content_body" style="
          background: #fff;
          padding: 0px 25px;
          box-sizing: border-box;
          margin: 10px auto 0;
        ">
        <div class="pb_head">
          <span>项目审核</span>
          <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
        </div>
        <div class="student_head">
          <div class="student_search">
            <div class="searchBox">
              <div>项目筛选</div>
              <el-input v-model="cn" placeholder="筛选项目名称" @input="search"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="pb_content_body" style="margin: 0 auto 10px;">
        <div class="student_table">
          <el-table ref="table" :data="tableData" stripe border :header-cell-style="{
            background: '#f1f1f1',
          
          }" style="width: 100%" :height="tableHeight" v-loading="isLoading">
            <el-table-column prop="title" label="项目名称" min-width="300px" align="center">
            </el-table-column>
            <el-table-column prop="uname" label="创建人" min-width="300px" align="center">
            </el-table-column>
            <el-table-column prop="school" label="学校名称" min-width="300px" align="center">
            </el-table-column>
            <el-table-column prop="date" label="操作" width="300px" align="left">
              <template slot-scope="scope">
                <div class="pb_buttonBox">
                  <el-button class="btnClassGM" size="mini" type="primary"
                    @click="get(scope.row.courseId)">查看课程</el-button>
                  <el-button class="btnClassGM" size="mini" type="primary" @click="examine(scope.row.courseId,scope.row.examine,scope.row.title)">
                    {{scope.row.examine == '1' ? "审核" : "撤销审核"}}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </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>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      tableHeight: "500px",
      isLoading: false,
      formLabelWidth: "100px",
      tableData: [],
      fileList: [],
      page: 1,
      total: 0,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      cn: ""
    };
  },
  mounted() {
    this.$nextTick(function () {
    });
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    get(cid) {
      window.parent.postMessage({ cid: cid, screenType: "3gm" }, "*");
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },

    handleCurrentChange(val) {
      this.page = val;
      this.selectCourse();
    },
    selectCourse() {
      this.isLoading = true;
      let params = {
        oid: this.oid,
        org: this.org,
        cn: this.cn,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseExamine", 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);
        });
    },
    search() {
      this.page = 1;
      this.selectCourse();
    },
    examine(cid,examine,title){
      // examineCourse
      this.$confirm(
        examine=='1' ? "确认此课程通过审核吗？" : "确认撤销此课程的审核吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            // if (this.time()) {
              let params = [
                {
                  cid:cid,
                  exa:examine == '1' ? '2' : '1',
                  title:'新项目：'+title,
                  oid:this.oid,
                  org:this.org,
                },
              ];
              this.ajax
                .post(this.$store.state.api + "examineCourse", params)
                .then((res) => {
                  this.$message({
                    message: "审核成功",
                    type: "success",
                  });
                  this.selectCourse();
                })
                .catch((err) => {
                  this.$message.error("审核失败");
                  console.error(err);
                });
            // }
          })
          .catch(() => { });
    }
  },
  created() {
    this.page = 1;
    this.selectCourse();
  },
};
</script>
  
<style scoped>
.pb_head>span:nth-child(2) {
  font-size: 16px;
  margin-left: 80px;
  color: #ab582f;
}

.addBox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tian1 {
  /* font-size: 16px; */
  margin-right: 10px;
}

.pb_head {
  margin: 0 !important;
  width: 100% !important;
}

.student_page {
  margin: 10px 0 0 45px;
}

.disUoloadSty>>>.el-upload--picture-card {
  display: none;
  /* 上传按钮隐藏 */
}

.dialogBox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialogBox span {
  margin: 0 20px;
}

.student_head {
  margin-top: 10px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
}

.student_search,
.student_search1 {
  display: flex;
  width: 100%;
  position: relative;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.student_search1 {
  justify-content: space-between;
}

.searchBox {
  display: flex;
  align-items: center;
}

.searchBox>div {
  width: auto;
  margin-right: 10px;
}

.student_table>>>.el-table--border td {
  border-right: 0px !important;
}

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

.el-table>>>.even_row {
  background-color: #f1f1f1 !important;
}

.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;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
  background: #fafafa;
}

.r_diy>>>.el-dialog__footer {
  padding: 0;
}

.a_addBox {
  height: 570px;
  overflow: auto;
}

.workdates {
  height: 100%;
  position: absolute;
  top: 0;
  background: #fff;
  overflow: auto;
  z-index: 1;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  box-sizing: border-box;
}

.cancelbox {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: 95%;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  padding: 0 90px 0px 0px;
  box-sizing: border-box;
}

.cardList {
  font-size: 14px;
  height: 360px;
  overflow: auto;
}

.cardList div {
  margin-bottom: 18px;
}

.cardList div:last-child {
  margin-bottom: 0;
}

.cardHead {
  display: flex;
}

.student_page>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #5c549f;
  color: #fff !important;
}

.student_page>>>.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #5c549f;
}
</style>
  