<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>
      <div class="allBox">
        <div class="halfBox" style="width: 58%">
          <div class="student_head">
            <div>参与校</div>
            <div>
              <el-button size="small" type="primary" @click="openAddSchool(1)">
                添加学校</el-button>
              <el-upload class="upload-demo newCss" v-show="false" :http-request="importA" :on-remove="handleRemove" action="#"
                :file-list="fileListUpload" accept=".xlsx">
                <el-button size="primary" type="primary">批量添加</el-button>
              </el-upload>
            </div>
          </div>
          <div style="margin: 0 auto 10px">
            <div class="student_table">
              <el-table ref="table" :data="tableData" stripe border :header-cell-style="{
                background: '#f1f1f1',
                'text-align': 'center',
              }" :cell-style="{ 'text-align': 'center' }" style="width: 100%" :height="tableHeight"
                v-loading="isLoading">
                <el-table-column prop="name" label="学校名称" min-width="30">
                </el-table-column>
                <el-table-column label="联结学校" min-width="10" align="center">
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.cname ? scope.row.cname : "暂无" }}
                    </div>
                  </template>
                </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="openNoCSchool(scope.row.id, scope.row.cname)">联结</el-button>
                      <el-button size="mini" type="primary" @click="
                        updateS(
                          scope.row.id,
                          scope.row.name,
                          scope.row.dest,
                          1
                        )
                      ">修改</el-button>
                      <el-button size="mini" type="primary" @click="deleteSchool(scope.row.id, 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 class="halfBox" style="width: 40%">
          <div class="student_head">
            <div>协同校</div>
            <div>
              <el-button size="small" type="primary" @click="openAddSchool(2)">
                添加学校</el-button>
            </div>
          </div>
          <div style="margin: 0 auto 10px">
            <div class="student_table">
              <el-table ref="table" :data="tableData1" stripe border :header-cell-style="{
                background: '#f1f1f1',
                'text-align': 'center',
              }" :cell-style="{ 'text-align': 'center' }" style="width: 100%" :height="tableHeight"
                v-loading="isLoading">
                <el-table-column prop="name" label="学校名称" min-width="30">
                  <template slot-scope="scope">
                    <div class="ljBox">
                      <div :class="scope.row.oid ? 'isLj' : ''">
                        {{
                          scope.row.oid
                            ? scope.row.name + "(已联结)"
                            : scope.row.name
                        }}
                      </div>
                      <div class="isLjImg" v-if="scope.row.oid">
                        <img src="../../../assets/icon/isLj.png" alt="" />
                      </div>
                    </div>
                  </template>
                </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="
                        updateS(
                          scope.row.id,
                          scope.row.name,
                          scope.row.dest,
                          2
                        )
                      ">修改</el-button>
                      <el-button size="mini" type="primary" @click="deleteSchool(scope.row.id, 2)">删除
                      </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="total1" v-if="page1"
              @current-change="handleCurrentChange1"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加学校" :visible.sync="dialogVisible" width="500px" :before-close="handleClose" class="dialog_diy"
      center>
      <div class="addBox">
        <span class="tian1">学校名称</span>
        <el-input v-model="schoolName" style="width: 250px; margin: 15px 0px" placeholder="请输入学校名称"></el-input>
      </div>
      <div class="addBox">
        <span class="tian1">所属地区</span>
        <el-cascader size="large" style="width: 250px" clearable :options="region" v-model="selectedOptions"
          @change="handleChange" placeholder="请选择市区">
        </el-cascader>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSchool">确 定</el-button>
      </span>
    </el-dialog>
    <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="schoolName" style="width: 250px; margin: 15px 0px" placeholder="请输入学校名称"></el-input>
      </div>
      <div class="addBox">
        <span class="tian1">所属地区</span>
        <el-cascader size="large" style="width: 250px" clearable :options="region" v-model="selectedOptions"
          @change="handleChange" placeholder="请选择市区">
        </el-cascader>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updateSchool">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加联结" :visible.sync="dialogVisible2" width="500px" :before-close="handleClose1" class="dialog_diy"
      center>
      <div class="addBox">
        <span class="tian1">协同校</span>
        <el-select v-model="isCSchool" placeholder="请选择联结学校">
          <el-option label="取消联结" value="''"> </el-option>
          <el-option v-for="item in cShool" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addNoSchool">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
const Data = regionData;
export default {
  data() {
    return {
      region: Data,
      selectedOptions: [], //"440000","440100"
      place: [],
      tableHeight: "500px",
      isLoading: false,
      formLabelWidth: "100px",
      tableData: [],
      tableData1: [],
      schoolName: "",
      page: 1,
      total: 0,
      page1: 1,
      total1: 0,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      sType: 0,
      isCSchool: "",
      cShool: [],
      fileListUpload:[]
    };
  },
  mounted() {
    this.$nextTick(function () {
      //   this.tableHeight =
      //     window.innerHeight - this.$refs.table.$el.offsetTop;
      //   if (this.tableHeight <= 530) {
      //     this.tableHeight = 530;
      //   }
      //   // 监听窗口大小变化
      //   let self = this;
      //   window.onresize = function () {
      //     self.tableHeight =
      //       window.innerHeight - self.$refs.table.$el.offsetTop;
      //     if (self.tableHeight <= 530) {
      //       self.tableHeight = 530;
      //     }
      //   };
    });
  },
  methods: {
    handleChange() {
      if (!this.selectedOptions) {
        return;
      }
      var loc = "";
      this.place = [];
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
        this.place.push(this.selectedOptions[i]);
      }
      console.log(this.region);
    },
    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 "";
      }
    },
    handleClose(done) {
      this.schoolName = "";
      this.place = [];
      done();
    },
    handleClose1(done) {
      done();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.selectSchool();
    },
    handleCurrentChange1(val) {
      this.page1 = val;
      this.selectSchool1();
    },
    selectSchool() {
      this.isLoading = true;
      let params = {
        t: 1,
        org: this.org,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectOrgType", 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);
        });
    },
    selectSchool1() {
      this.isLoading = true;
      let params = {
        t: 2,
        org: this.org,
        page: this.page1,
      };
      this.ajax
        .get(this.$store.state.api + "selectOrgType", params)
        .then((res) => {
          this.isLoading = false;
          this.total1 = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData1 = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    addSchool() {
      let params = [
        {
          n: this.schoolName,
          org: this.org,
          d: this.place.join("/"),
          t: this.sType,
          uid: this.userid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "insertSchoolByOrg", params)
        .then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.schoolName = "";
          this.place = [];
          this.selectSchool();
          this.selectSchool1();
          this.sType = 0;
        })
        .catch((err) => {
          this.$message.error("添加失败");
          console.error(err);
        });
    },
    updateS(id, name, d, t) {
      this.dialogVisible1 = true;
      this.schoolName = name;
      this.place = [];
      if (d != null) {
        this.selectedOptions = d.split("/");
      } else {
        this.selectedOptions = [];
      }
      this.updateId = id;
      this.sType = t;
    },
    updateSchool() {
      let params = {
        n: this.schoolName,
        d: this.place.join("/"),
        id: this.updateId,
      };
      this.ajax
        .get(this.$store.state.api + "updateSchoolByOrg", params)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.dialogVisible1 = false;
          this.updateId = "";
          this.schoolName = "";
          this.place = [];
          this.selectSchool();
          this.selectSchool1();
          this.sType = 0;
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
    deleteSchool(id, t) {
      this.sType = t;
      let params = [
        {
          id: id,
        },
      ];
      let _this = this;
      _this
        .$confirm("确定删除此学校吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          _this.ajax
            .post(this.$store.state.api + "deleteSchoolAdmin", params)
            .then((res) => {
              _this.$message({
                message: "删除成功",
                type: "success",
              });
              _this.updateId = "";
              _this.schoolName = "";
              _this.selectSchool();
              _this.selectSchool1();
              _this.sType = 0;
            })
            .catch((err) => {
              _this.$message.error("删除成功");
              console.error(err);
            });
        })
        .catch(() => {
          return;
        });
    },
    selectNoSChool() {
      this.ajax
        .get(this.$store.state.api + "selectNoCSchool")
        .then((res) => {
          this.cShool = res.data[0];
        })
        .catch((err) => {
          this.$message.error("查询失败");
          console.error(err);
        });
    },
    openAddSchool(t) {
      this.dialogVisible = true;
      this.place = [];
      this.selectedOptions = [];
      this.sType = t;
    },
    openNoCSchool(id, oname) {
      this.dialogVisible2 = true;
      this.updateId = id;
      if (oname != null || oname != "") {
        this.isCSchool = oname;
      }
      this.selectNoSChool();
    },
    addNoSchool() {
      let params = {
        id: this.updateId,
        coid: this.isCSchool,
      };
      this.ajax
        .get(this.$store.state.api + "addNoSchool", params)
        .then((res) => {
          this.$message({
            message: "联结成功",
            type: "success",
          });
          this.dialogVisible2 = false;
          this.updateId = "";
          this.isCSchool = "";
          this.selectSchool();
          this.selectSchool1();
        })
        .catch((err) => {
          this.$message.error("联结失败");
          console.error(err);
        });
    },
    importA(file) {
      this.fileTemp = file.file;
      if (this.fileTemp) {
        if (
          this.fileTemp.type ==
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
          this.fileTemp.type == "application/vnd.ms-excel"
        ) {
          this.importCount = 1;
          this.importfxx(this.fileTemp);
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请删除后重新上传！",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！",
        });
      }
    },
    handleRemove(file, fileList) {
      this.fileTemp = null;
    },
    importfxx(obj) {
      const loading = this.$loading.service({
        background: "rgba(255, 255, 255, 0.7)",
        target: document.body,
      });
      this.importCount++;
      let _this = this;
      // 通过DOM取文件数据
      this.file = obj;
      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;
      var reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function (e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64",
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary",
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
          this.da = [...outdata];
          let arr = [];
          this.da.map((v) => {
            let obj = {};
            obj.school = v["学校名字"];
            arr.push(obj);
          });
          console.log(arr);
          let newArr = JSON.stringify(arr);
          let params = [
            {
              arr: newArr,
              org: _this.org,
            },
          ];
          _this.ajax
            .post(_this.$store.state.api + "batchRegistrationSchool", params)
            .then((res) => {
                _this.$message({
                  message: "新增成功",
                  type: "success",
                });
              loading.close();
            })
            .catch((err) => {
              console.error(err);
            });
          _this.fileListUpload = [];
        };

        reader.readAsArrayBuffer(f);
      };

      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },
  },
  created() {
    this.page = 1;
    this.selectSchool();
    this.selectSchool1();
  },
};
</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 0;
}

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

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

.dialogBox span {
  margin: 0 20px;
}

.student_head {
  width: 100%;
  /* margin-left: 25px; */
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  background: #fff;
}

.student_head>div:nth-child(1) {
  padding: 0 0 0 30px;
  font-size: 18px;
}

.student_head>div:nth-child(2) {
  margin-right: 10px;
}

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

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

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

.allBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 94%;
  margin: 0 auto;
  justify-content: space-between;
}

.halfBox {
  /* width: 50%; */
  margin-top: 10px;
}

.ljBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.isLj {
  color: #4679ab;
  font-weight: bold;
}

.isLjImg {
  width: 20px;
  height: 20px;
  margin-left: 5px;
}

.isLjImg>img {
  width: 100%;
  height: 100%;
}
</style>
