<template>
  <div class="login login-box">
    <div class="login-body" @keyup.enter="submit('loginForm')">
      <div class="login-title">
        <img v-if="schoolLogo" :src="schoolLogo" alt="学校logo" />
        <h1 v-else>教务数据对接系统</h1>
      </div>
      <div class="login-form">
        <el-form ref="loginForm" :model="loginModel" :rules="loginRules">
          <el-form-item prop="loginName">
            <el-input
              v-model.trim="loginModel.loginName"
              placeholder="请输入手机号"
              name="username"
              clearable
            >
              <i class="icon icon-phone" slot="prefix"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model.trim="loginModel.password"
              placeholder="请输入密码"
              clearable
            >
              <i class="icon icon-password" slot="prefix"></i>
            </el-input>
          </el-form-item>
          <el-form-item></el-form-item>
          <el-form-item>
            <el-button
              class="login-submit-btn"
              size="large"
              type="info"
              :disabled="isSubmit"
              round
              @click="submit('loginForm')"
              >登录</el-button
            >
            <!-- <div class="login-link">
              <router-link :to="{ name: 'ForgetPwd' }">忘记密码</router-link>
            </div> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { password, phone } from "@/plugins/formRules";
import { login } from "../api";
import { Base64 } from "@/plugins/crypto";
import fetchSmsMixins from "../fetchSmsMixins";

export default {
  name: "login",
  mixins: [fetchSmsMixins],
  data() {
    return {
      schoolLogo: "",
      loginModel: {
        loginName: "",
        password: "",
      },
      loginRules: {
        password,
        loginName: phone,
      },
      userInfo: {},
      isSubmit: false,
    };
  },
  mounted() {
    this.$ls.clear();
  },
  methods: {
    async submit(name) {
      const valid = await this.$refs[name].validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      let datas = {
        loginName: this.loginModel.loginName,
        password: Base64(this.loginModel.password),
      };
      const data = await login(datas).catch(() => {});
      this.isSubmit = false;
      if (!data) return;

      if (data.orgInfo)
        this.$ls.set("orgId", data.orgInfo.id, this.GLOBAL.authTimeout);
      if (data.schoolInfo) {
        this.$ls.set("schoolId", data.schoolInfo.id, this.GLOBAL.authTimeout);
        this.$ls.set(
          "schoolName",
          data.schoolInfo.name,
          this.GLOBAL.authTimeout
        );
      }
      this.$ls.set("user", data, this.GLOBAL.authTimeout);
      this.$ls.set("token", data.accessToken, this.GLOBAL.authTimeout);

      if (data.roleList && data.roleList.includes("ADMIN")) {
        this.$router.push({
          name: "SelectSchool",
        });
      } else {
        this.$router.push({
          name: "Home",
        });
      }
    },
  },
};
</script>
