<template>
  <div class="login" @keyup.enter="submit">
    <div class="login-action">
      <div class="login-action-btn" @click="toSet">
        <i class="el-icon-s-tools"></i><span>设置</span>
      </div>
      <div class="login-action-btn" @click="toSetScan">
        <i class="el-icon-s-tools"></i><span>配置扫描仪</span>
      </div>
    </div>
    <div class="login-body">
      <div class="login-title">
        <h1>档案电子化扫描系统</h1>
      </div>
      <div class="login-form">
        <h2 class="login-form-title">扫描员登录</h2>
        <el-form ref="loginForm" :model="loginModel" :rules="loginRules">
          <el-form-item prop="loginName">
            <el-input
              v-model.trim="loginModel.loginName"
              size="large"
              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"
              size="large"
              placeholder="请输入密码"
              clearable
            >
              <i class="icon icon-password" slot="prefix"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="schoolCode"></el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :disabled="isSubmit"
              size="large"
              @click="submit"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { password } from "@/plugins/formRules";
import { formatDate } from "../../../plugins/utils";
import { login } from "../api";
import { Base64 } from "@/plugins/crypto";
import { setScanner } from "../../../plugins/scanner";

export default {
  name: "login",
  data() {
    return {
      loginModel: {
        schoolCode: "",
        type: "ACCOUNT",
        loginname: "",
        password: ""
      },
      loginRules: {
        loginName: [
          {
            required: true,
            pattern: /^[a-zA-Z0-9_-]{2,40}$/,
            message: "用户名只能包含字母、数字、下划线以及短横线",
            trigger: "change"
          }
        ],
        password,
        schoolCode: [
          {
            required: true,
            message: "学校编码缺失",
            trigger: "change"
          }
        ]
      },
      isSubmit: false
    };
  },
  mounted() {
    this.$ls.remove("token");
    this.$ls.remove("user");
    this.$ls.remove("orgId");
    this.$ls.remove("schoolId");
  },
  methods: {
    toSet() {
      this.$router.push({ name: "Setting" });
    },
    async toSetScan() {
      await setScanner().catch(error => {
        console.dir(error);
        this.$message.error("连接扫描仪异常");
      });
    },
    async submit() {
      let domain = this.$ls.get("domain");
      if (!domain) {
        this.$message.error("请先配置域名！");
        return;
      }
      this.loginModel.schoolCode = this.$ls.get("schoolCode");

      const valid = await this.$refs.loginForm.validate().catch(() => {});
      if (!valid) return;

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

      data.loginTime = formatDate();
      data.name = this.loginModel.loginName;

      this.$ls.set("user", data);
      this.$store.commit("setUser", data);
      if (data.orgInfo) this.$ls.set("orgId", data.orgInfo.id);
      if (data.schoolInfo) this.$ls.set("schoolId", data.schoolInfo.id);
      this.$ls.set("token", data.accessToken);

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