<template>
  <div class="login-home login">
    <div class="login login-box">
      <div class="login-title">
        <h1>美术阅卷系统登录</h1>
      </div>
      <div class="login-form">
        <Form ref="loginForm" :model="loginModel" :rules="loginRules">
          <FormItem prop="loginName">
            <Input
              v-model.trim="loginModel.loginName"
              prefix="md-person"
              placeholder="请输入用户名"
              clearable
            ></Input>
          </FormItem>
          <FormItem prop="password">
            <Input
              type="password"
              v-model.trim="loginModel.password"
              prefix="md-lock"
              placeholder="请输入密码"
              clearable
            ></Input>
          </FormItem>
          <FormItem>
            <Button
              long
              type="primary"
              :disabled="isSubmit"
              @click="submit('loginForm')"
              >登录</Button
            >
            <div class="login-link">
              <!-- <router-link :to="{ name: 'ForgetPwd' }">忘记密码</router-link> -->
            </div>
          </FormItem>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
import { username, password } from "@/plugins/formRules";
import { login } from "@/api";

export default {
  name: "login",
  data() {
    return {
      loginModel: {
        loginName: "admin-cy",
        password: "123456"
      },
      loginRules: {
        loginName: username,
        password
      },
      isSubmit: false
    };
  },
  mounted() {
    this.$ls.clear();
  },
  methods: {
    async submit(name) {
      const valid = await this.$refs[name].validate();
      if (!valid) return;

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

      this.isSubmit = false;
      this.$ls.set("user", data, this.GLOBAL.authTimeout);
      this.$store.commit("setUser", data);
      // TODO:根据角色跳转不同的路由
      this.$router.push({
        name: "WorkManage"
      });
    }
  }
};
</script>
