<template>
  <div style="width: 100%">
    <el-main>
      <div class="tou">分组管理</div>
      <div>
        <el-button
          size="small"
          type="primary"
          style="position: absolute; right: 20px; top: 90px"
          @click="dialogVisible1 = true"
          >添加分组</el-button
        >
        <!-- <div>Banner管理</div>      -->
        <el-table
          ref="table"
          :data="tableData"
          stripe
          border
          :header-cell-style="{ background: '#f1f1f1', 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%; margin-top: 70px"
          :height="tableHeight"
          v-loading="isLoading"
        >
          <el-table-column prop="name" label="课程分组" min-width="70">
          </el-table-column>
          <el-table-column prop="date" label="操作" min-width="30">
            <template slot-scope="scope">
              <div class="pb_buttonBox">
                <!-- <el-button
                  size="mini"
                  type="primary"
                  @click="updatePop(scope.row.id, scope.$index)"
                  >修改</el-button
                > -->
                <el-button
                  size="mini"
                  type="primary"
                  @click="deleteGroup(scope.row.id)"
                  >删除</el-button
                >
                <!-- <el-button
                  size="mini"
                  type="primary"
                  @click="addGPop(scope.row.id)"
                  >添加年级</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="getGPop(scope.row.id)"
                  >查看年级</el-button
                > -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="student_page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-main>

    <el-dialog
      title="添加课程分组"
      :visible.sync="dialogVisible1"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
      center
    >
      <div class="addBox">
        <span class="tian1">分组名称</span>
        <el-input
          v-model="groupName"
          style="width: 250px; margin: 15px 0px"
          placeholder="请输入添加分组名称"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addGroup">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改课程分组"
      :visible.sync="dialogVisible2"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
      center
    >
      <div class="addBox">
        <span class="tian1">分组名称</span>
        <el-input
          v-model="updateGroupName"
          style="width: 250px; margin: 15px 0px"
          placeholder="请输入修改分组名称"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updateClass">修 改</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="查看年级"
      :visible.sync="garadeDialog"
      width="650px"
      :before-close="handleClose"
      class="dialog_diy"
      center
    >
      <div class="addBox">
        <el-table
          ref="table"
          :data="tableData2"
          stripe
          border
          :header-cell-style="{ background: '#f1f1f1', 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          height="500"
          v-loading="isLoading2"
        >
          <el-table-column prop="name" label="课程分组" min-width="70">
          </el-table-column>
          <el-table-column prop="date" label="操作" min-width="30">
            <template slot-scope="scope">
              <div class="pb_buttonBox">
                <el-button
                  size="mini"
                  type="primary"
                  @click="deleteGrade(scope.row.id)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="garadeDialog = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="添加年级"
      :visible.sync="addGradeDialog"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
      center
    >
      <div class="addBox">
        <span class="tian1">年级名称</span>
        <el-input
          v-model="gradeName"
          style="width: 250px; margin: 15px 0px"
          placeholder="请输入添加的年级名称"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addGradeDialog = false">取 消</el-button>
        <el-button type="primary" @click="addGrade">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible1: false,
      tableData: [
        {
          name: "艺术之美",
        },
        {
          name: "文化之旅",
        },
      ],
      page: 1,
      total: 0,
      isLoading: false,
      tableHeight: 500,
      groupName: "",
      dialogVisible2: false,
      updateGroupName: "",
      updateId: "",
      garadeDialog: false,
      addGradeDialog: false,
      gradeName: "",
      tableData2: [],
      isLoading2: false,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    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;
        }
      }
    },
    getGroup() {
      this.isLoading = true;
      let params = { page: this.page };
      this.ajax
        .get(this.$store.state.api + "getGroupAdmin", 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);
        });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getGroup();
    },
    changeHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
      // this.$refs.table.$el.offsetTop：表格距离浏览器的高度 //200表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
    },
    addGroup() {
      // if (this.time()) {
      //   let params = [{ n: this.groupName }];
      //   this.ajax
      //     .post(this.$store.state.api + "addGroup", params)
      //     .then((res) => {
      //       this.$message({
      //         message: "添加成功",
      //         type: "success",
      //       });
      //       this.dialogVisible1 = false;
      //       this.groupName = "";
      //       this.getGroup();
      //     })
      //     .catch((err) => {
      //       this.$message.error("添加失败");
      //       console.error(err);
      //     });
      // }
    },
    deleteGroup(id) {
      // let params = [{ id: id }];
      // var _this = this;
      // _this
      //   .$confirm("确定删除此分组吗?", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   })
      //   .then(() => {
      //     _this.ajax
      //       .post(_this.$store.state.api + "deleteClass", params)
      //       .then((res) => {
      //         _this.$message({
      //           message: "删除成功",
      //           type: "success",
      //         });
      //         if (_this.page != 1 && _this.tableData.length == 1) {
      //           _this.page--;
      //         }
      //         _this.getGroup();
      //       })
      //       .catch((err) => {
      //         _this.$message.error("删除失败");
      //         console.error(err);
      //       });
      //   })
      //   .catch(() => {});
    },
    updatePop(id, index) {
      this.dialogVisible2 = true;
      this.updateGroupName = this.tableData[index].name;
      this.updateId = id;
    },
    //修改分组
    updateClass() {
      if (this.updateGroupName === "") {
        this.$message.error("请输入修改的分组名称");
        return;
      }
      let params = [{ n: this.updateGroupName, id: this.updateId }];
      this.ajax
        .post(this.$store.state.api + "updateClass", params)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getGroup();
          this.dialogVisible2 = false;
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
    addGPop(id) {
      this.updateId = id;
      this.addGradeDialog = true;
    },
    getGPop(id) {
      this.updateId = id;
      this.garadeDialog = true;
      this.isLoading2 = true;

      let params = { pid: id };
      this.ajax
        .get(this.$store.state.api + "getGroupGrade", params)
        .then((res) => {
          this.isLoading2 = false;
          this.tableData2 = res.data[0];
        })
        .catch((err) => {
          this.isLoading2 = false;
          console.error(err);
        });
    },
    addGrade() {
      if (this.time()) {
        let params = [{ n: this.gradeName, pid: this.updateId }];
        this.ajax
          .post(this.$store.state.api + "addGroupGrade", params)
          .then((res) => {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.addGradeDialog = false;
            this.gradeName = "";
            this.updateId = "";
          })
          .catch((err) => {
            this.$message.error("添加失败");
            console.error(err);
          });
      }
    },
    deleteGrade(id) {
      let params = [{ id: id }];
      var _this = this;
      _this
        .$confirm("确定删除此年级吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          _this.ajax
            .post(_this.$store.state.api + "deleteClass", params)
            .then((res) => {
              _this.$message({
                message: "删除成功",
                type: "success",
              });
              _this.getGPop(this.updateId);
            })
            .catch((err) => {
              _this.$message.error("删除失败");
              console.error(err);
            });
        })
        .catch(() => {});
    },
  },
  created() {
    this.$nextTick(function () {
      this.page = 1;
      this.changeHeight();
      // this.getGroup();
    });
  },
};
</script>

<style scoped>
.tou {
  border-bottom: 1px solid #c9c9c9;
  height: 50px;
  font-size: 30px;
}
.addBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tian1 {
  /* font-size: 16px; */
  margin-right: 10px;
}
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.student_page {
  margin-top: 15px;
}
</style>