<template>
  <div class="select-school login login-box">
    <div class="login-title">
      <h1>选择学校</h1>
    </div>
    <div class="login-form">
      <el-form
        ref="modalFormComp"
        size="large"
        :model="modalForm"
        :rules="rules"
      >
        <el-form-item prop="schoolId">
          <school-select
            v-model="modalForm.schoolId"
            style="width: 100%"
            @change="schoolChange"
          ></school-select>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="confirm"
            >进入学校</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="warning" @click="toAdmin"
            >进入超管中心<i class="el-icon-arrow-right"></i
          ></el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "select-school",
  data() {
    return {
      schools: [],
      modalForm: { schoolId: "" },
      curSchool: {},
      rules: {
        schoolId: [
          { required: true, message: "请选择学校", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.$ls.remove("schoolId");
    this.$ls.remove("schoolName");
    this.$ls.remove("schoolLogo");
  },
  methods: {
    schoolChange(school) {
      this.curSchool = school;
    },
    toAdmin() {
      this.$router.push({ name: "Admin" });
    },
    async confirm() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      this.$ls.set(
        "schoolId",
        this.modalForm.schoolId,
        this.GLOBAL.authTimeout
      );
      this.$ls.set("schoolName", this.curSchool.name, this.GLOBAL.authTimeout);
      this.$ls.set("schoolLogo", this.curSchool.logo, this.GLOBAL.authTimeout);

      this.$router.push({
        name: "Home",
      });
    },
  },
};
</script>
