<template>
  <div class="login" @keyup.enter="submit">
    <div class="login-header home-header">
      <div class="head-actions">
        <span class="action-icon" title="最小化" @click="minWin"
          ><Icon type="md-remove" size="16"
        /></span>
        <span class="action-icon" title="最大化" @click="maxWin"
          ><Icon type="md-browsers" size="16"
        /></span>
        <span class="action-icon" title="关闭" @click="close"
          ><Icon type="md-close" size="16"
        /></span>
      </div>
    </div>
    <div class="login-body">
      <div class="login-title">
        <h1>美术阅卷系统登录</h1>
      </div>
      <div class="login-form">
        <Form ref="loginForm" :model="loginModel" :rules="loginRules">
          <FormItem prop="loginname">
            <Input
              size="large"
              v-model.trim="loginModel.loginname"
              prefix="md-person"
              placeholder="请输入用户名"
              clearable
            ></Input>
          </FormItem>
          <FormItem prop="password">
            <Input
              size="large"
              type="password"
              v-model.trim="loginModel.password"
              prefix="md-lock"
              placeholder="请输入密码"
              clearable
            ></Input>
          </FormItem>
          <FormItem style="margin-top:54px;">
            <Button
              size="large"
              type="primary"
              :disabled="isSubmit"
              @click="submit"
              style="width: 120px"
              >登录</Button
            >
          </FormItem>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
import { username, password } from "@/plugins/formRules";
import initStoreMixin from "../mixins/initStoreMixin";
import { formatDate } from "../plugins/utils";
import { $get } from "@/plugins/axios";
const { ipcRenderer } = require("electron");

export default {
  name: "login",
  mixins: [initStoreMixin],
  data() {
    return {
      loginModel: {
        loginname: "scan01",
        password: "123456"
      },
      loginRules: {
        loginname: username,
        password
      },
      isSubmit: false
    };
  },
  mounted() {
    this.$ls.clear();
    this.initData();
  },
  methods: {
    minWin() {
      ipcRenderer.send("minimize-window");
    },
    maxWin() {
      ipcRenderer.send("maximize-window");
    },
    close() {
      ipcRenderer.send("close-window");
    },
    async initData() {
      await this.initStore();
      const lastLoginUser = await this.getLastLoginUser();

      if (lastLoginUser) {
        this.loginModel = { ...JSON.parse(lastLoginUser) };
      }
    },
    async submit(name) {
      const valid = await this.$refs.loginForm.validate();
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await $get(
        "/api/user/login",
        this.loginModel
      ).catch(() => {});
      this.isSubmit = false;
      if (!data) return;

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

      await this.setLastLoginUser(this.loginModel);
      await this.initScanArea(data.subjects);
      await this.initStartCountTime(data.subjects);

      this.$ls.set("user", data);
      this.$store.commit("setUser", data);
      this.$store.commit("client/setClientConfig", {
        imageEncrypt: data.paramSetting.imageEncrypt,
        packageScan: data.paramSetting.packageScan,
        paperStage: data.paramSetting.paperStage
      });
      this.$router.push({
        name: "Subject"
      });
    }
  }
};
</script>
