<template>
  <div>
    <back-box>
      <template slot="title">
        <span>学校管理</span>
      </template>
    </back-box>
    <div class="page-content">
      <el-empty
        :image-size="100"
        v-if="!tableList.length && loading == false"
        description="没有更多数据"
      ></el-empty>
      <div v-else class="content-box" v-loading="loading">
        <div class="left-box">
          <p class="h-title">
            <span class="tog-type" @click="setType">{{
              `${type == 1 ? "集团列表" : "区域列表"}`
            }}</span>
            <i class="icon el-icon-circle-plus-outline" @click="edit"></i>
          </p>
          <ul class="school-ul">
            <li
              class="school-item"
              v-for="item in tableList"
              :key="item.id"
              :class="showId == item.id ? 'active' : ''"
              @click="showSchool(item)"
            >
              {{ item.name }}（{{ item.num }}）
              <!-- <i class="el-icon-edit-outline" @click.stop="setSchool(item)"></i> -->
            </li>
          </ul>
        </div>
        <div class="content-detail">
          <div class="title-box">
            <span>管辖的学校（5）</span>
            <i class="icon el-icon-circle-plus-outline" @click="addSchool"></i>
          </div>
          <ul class="detail-list">
            <li
              class="detail-item"
              v-for="item in schoolData.list"
              :key="item.id"
            >
              <p class="item-tit">
                <span class="name" :class="type == 1 ? 'active' : ''">{{
                  item.name
                }}</span>
                <i
                  @click="addAdmin(item)"
                  v-if="type == 1"
                  class="icon el-icon-user-solid"
                ></i>
                <el-popconfirm
                  v-if="type == 2"
                  title="确定删除吗？"
                  @confirm="removeSchool(item)"
                >
                  <i slot="reference" class="icon el-icon-delete"></i>
                </el-popconfirm>
              </p>
              <div class="info">
                <p class="info-item">
                  <span class="txt">基站</span>
                  <img class="pic" src="../../assets/images/jizhan.png" />
                  <span>49</span>
                </p>
                <p class="info-item">
                  <span class="txt">键盘</span>
                  <img class="pic" src="../../assets/images/jianpan.png" />
                  <span>49</span>
                </p>
                <p class="info-item">
                  <span class="txt">班级</span>
                  <img class="pic" src="../../assets/images/banji.png" />
                  <span>49</span>
                </p>
                <p class="info-item">
                  <span class="txt">学生</span>
                  <img class="pic" src="../../assets/images/xuesheng.png" />
                  <span>49</span>
                </p>
                <p class="info-item">
                  <span class="txt">老师</span>
                  <img class="pic" src="../../assets/images/laoshi.png" />
                  <span>49</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog title="添加区域/集团" :visible.sync="diaCL" width="400">
      <el-form
        class="form-box"
        ref="formCL"
        :model="formCL"
        :rules="rulesCL"
        label-width="160px"
      >
        <el-form-item label="区域/集团名称：" prop="name">
          <el-col :span="10">
            <el-input
              maxlength="30"
              v-model.trim="formCL.name"
              placeholder="请输入区域/集团名称"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button type="primary" round @click="saveFormCL">确 定</el-button>
        <el-button round @click="diaCL = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加管理员" :visible.sync="diaAdmin" width="400">
      <el-form
        class="form-box"
        ref="formAdmin"
        :model="formAdmin"
        :rules="rulesAdmin"
        label-width="160px"
      >
        <el-form-item label="学校名称：">
          <span>{{ schoolData.name + formAdmin.name }}</span>
        </el-form-item>
        <el-form-item label="手机号码：" prop="phone">
          <el-col :span="10">
            <el-input
              maxlength="11"
              v-model.trim="formAdmin.phone"
              placeholder="请输入手机号码"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-col :span="10">
            <el-input
              maxlength="18"
              v-model.trim="formAdmin.phone"
              placeholder="请输入密码"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="姓名：" prop="realName">
          <el-col :span="10">
            <el-input
              maxlength="30"
              v-model.trim="formAdmin.realName"
              placeholder="请输入姓名"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button type="primary" round @click="saveFormAdmin">确 定</el-button>
        <el-button round @click="diaAdmin = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加学校" :visible.sync="diaSchool" width="400">
      <el-form
        class="form-box"
        ref="formSchool"
        :model="formSchool"
        :rules="rulesSchool"
        label-width="160px"
      >
        <el-form-item label="学校名称：" prop="name">
          <el-col :span="10">
            <el-input
              maxlength="11"
              v-model.trim="formSchool.name"
              placeholder="请输入学校名称"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="所属区域/集团：">
          <el-select
            class="sel"
            v-model="formSchool.quyu"
            placeholder="选择所属区域/集团"
          >
            <el-option
              v-for="item in tableList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学段：" prop="grade">
          <el-checkbox-group v-model="formSchool.grade">
            <el-checkbox :label="1">小学</el-checkbox>
            <el-checkbox :label="2">初中</el-checkbox>
            <el-checkbox :label="3">高中</el-checkbox>
            <el-checkbox :label="4">本科</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button type="primary" round @click="saveFormSchool"
          >确 定</el-button
        >
        <el-button round @click="diaSchool = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      diaCL: false,
      diaAdmin: false,
      diaSchool: false,
      loading: false,
      type: 1, //集团列表-1 区域列表-2
      showId: 1, //显示学校Id
      tableList: [
        // 集团列表/区域列表
        {
          id: 1,
          name: "云南衡水实验中学",
          num: 5,
        },
      ],
      schoolData: {
        //学校信息
        num: 5,
        name: "云南衡水实验中学",
        list: [
          { id: 1, name: "曲靖校区" },
          { id: 2, name: "玉溪校区" },
        ],
      },
      formCL: {
        name: "",
      },
      rulesCL: {
        name: [
          { required: true, message: "请输入区域/集团名称", trigger: "blur" },
        ],
      },
      formAdmin: {
        id: "",
        name: "",
        phone: "",
        password: "",
        realName: "",
      },
      rulesAdmin: {
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      },
      formSchool: {
        name: "",
        grade: [],
        quyu: "",
      },
      rulesSchool: {
        name: [{ required: true, message: "请输入学校名称", trigger: "blur" }],
        grade: [{ required: true, message: "请选择学段", trigger: "blur" }],
      },
    };
  },
  methods: {
    edit() {
      //添加区域/集团
      this.formCL.name = "";
      this.diaCL = true;
    },
    addAdmin(obj) {
      //添加管理员
      this.formAdmin = { ...obj };
      this.diaAdmin = true;
    },
    addSchool(obj) {
      //添加学校
      this.formSchool = {
        name: "",
        grade: [],
        quyu: "",
      };
      this.diaSchool = true;
    },
    setSchool() {
      //
    },
    setType() {
      //集团列表、区域列表切换
      this.type = this.type == 1 ? 2 : 1;
      this._QueryData();
    },
    removeSchool(obj) {
      // const { data, status, info } = await this.$request.xxx({
      //   id: obj.id,
      // });
      // if (status === 0) {
      //   this.$message.success(info);
      // } else {
      //   this.$message.error(info);
      // }
    },
    saveFormCL() {
      //保存添加区域/集团
      // this.$refs["formCL"].validate(async (valid) => {
      //   // 验证通过：保存
      //   if (valid) {
      //     const { data, status, info } = await this.$request.xxx({
      //       name: this.formCL.name,
      //     });
      //     if (status === 0) {
      //       this.$message.success(info);
      this.diaCL = false;
      //     } else {
      //       this.$message.error(info);
      //     }
      //   } else {
      //     this.$message.error("区域/集团名称数据有误，请检查！");
      //     return false;
      //   }
      // });
    },
    saveFormAdmin() {
      //保存管理员
      // this.$refs["formAdmin"].validate(async (valid) => {
      //   // 验证通过：保存
      //   if (valid) {
      //     const { data, status, info } = await this.$request.xxx({...formAdmin});
      //     if (status === 0) {
      //       this.$message.success(info);
      this.diaAdmin = false;
      //     } else {
      //       this.$message.error(info);
      //     }
      //   } else {
      //     this.$message.error("区域/集团名称数据有误，请检查！");
      //     return false;
      //   }
      // });
    },
    saveFormSchool() {
      //保存学校
      // this.$refs["formAdmin"].validate(async (valid) => {
      //   // 验证通过：保存
      //   if (valid) {
      //     const { data, status, info } = await this.$request.xxx({...formAdmin});
      //     if (status === 0) {
      //       this.$message.success(info);
      this.diaSchool = false;
      //     } else {
      //       this.$message.error(info);
      //     }
      //   } else {
      //     this.$message.error("区域/集团名称数据有误，请检查！");
      //     return false;
      //   }
      // });
    },
    async showSchool(obj) {
      // const { data, status, info } = await this.$request.xxx();
      // if (status === 0) {
      //   this.$message.success(info);
      // } else {
      //   this.$message.error(info);
      // }
    },
    async _QueryData() {
      // const { data, status, info } = await this.$request.xxx();
      // if (status === 0) {
      //   this.$message.success(info);
      // } else {
      //   this.$message.error(info);
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  padding: 20px 30px;
}
.content-box {
  display: flex;
  background: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  min-height: 400px;

  .h-title {
    height: 40px;
    line-height: 40px;
    background: #eee;
    border-radius: 10px 10px 0 0;
  }
  .left-box {
    width: 240px;
    .h-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 16px;
      box-sizing: border-box;
      .tog-type {
        cursor: pointer;
      }
      .icon {
        font-size: 20px;
        color: #7f7f7f;
        cursor: pointer;
      }
    }
    .school-ul {
      max-height: 70vh;
      overflow-y: scroll;
    }
    .school-item {
      font-size: 16px;
      color: #7f7f7f;
      line-height: 36px;
      cursor: pointer;
      padding-left: 12px;
      position: relative;
      &:hover {
        background: #eee;
      }
      &.active {
        color: #667ffd;
      }
      .el-icon-edit-outline {
        position: absolute;
        top: 8px;
        right: 12px;
        font-size: 20px;
        display: none;
        &:hover {
          color: #667ffd;
        }
      }
      &:hover {
        background: #eee;
        .el-icon-edit-outline {
          display: block;
        }
      }
    }
  }
  .content-detail {
    flex: 1;
    position: relative;
    border-left: 0.5px solid #eee;
    .title-box {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
      .icon {
        font-size: 24px;
        color: #7f7f7f;
        cursor: pointer;
      }
      .el-icon-circle-plus-outline {
        margin-left: 10px;
      }
    }
    .detail-list {
      padding-left: 20px;
      display: flex;
      flex-wrap: wrap;
    }
    .detail-item {
      width: 320px;
      padding: 12px 16px;
      border-radius: 10px;
      box-shadow: 1px 1px 3px #888;
      box-sizing: border-box;
      margin: 0 20px 20px 0;
      .item-tit {
        font-size: 16px;
        position: relative;
        padding-bottom: 10px;
        .name {
          cursor: pointer;
          &.active {
            color: #667ffd;
          }
        }
        &:hover {
          .icon {
            display: block;
          }
        }
        .icon {
          display: none;
          position: absolute;
          right: -5px;
          top: 0;
          color: #7f7f7f;
          cursor: pointer;
          padding: 2px;
          &:hover {
            color: #667ffd;
          }
        }
      }
      .info {
        width: 100%;
        display: flex;
        .info-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .txt {
          color: #7f7f7f;
        }
        .pic {
          height: 28px;
          margin: 2px 0 5px;
        }
      }
    }
  }
}
.dialog-footer {
  text-align: center;
}
</style>