<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
              size="large"
              class="input-huge"
              v-model.trim="loginModel.loginName"
              prefix="md-person"
              placeholder="输入账号"
              clearable
            ></Input>
          </FormItem>
          <FormItem prop="password">
            <Input
              size="large"
              class="input-huge"
              type="password"
              v-model.trim="loginModel.password"
              prefix="md-lock"
              placeholder="输入密码"
              clearable
            ></Input>
          </FormItem>
          <FormItem style="margin-top:70px;">
            <Button
              long
              size="large"
              shape="circle"
              type="primary"
              :disabled="isSubmit"
              @click="submit('loginForm')"
              >登录</Button
            >
          </FormItem>
        </Form>
      </div>
    </div>
    <div class="login-footer">
      <p>
        Copyright ©
        <a href="http:\\www.qmth.com" target="_blank">www.qmth.com.cn</a>, All
        Rights Reserved.
      </p>
    </div>

    <reset-pwd @confirm="resetSuccess" ref="ResetPwd"></reset-pwd>
  </div>
</template>

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

export default {
  name: "login",
  components: { ResetPwd },
  data() {
    return {
      loginModel: {
        loginName: "admin-cy",
        password: "123456"
      },
      loginRules: {
        loginName: username,
        password
      },
      rightRoutes: {
        ADMIN: {
          router: "WorkManage"
        },
        MARKER_LEVEL: {
          router: "GradingOperation"
        },
        MARKER_SCORE: {
          router: "MarkOperation"
        },
        MARK_LEADER_LEVEL: {
          router: "Grading"
        },
        MARK_LEADER_SCORE: {
          router: "Mark"
        },
        INSPECTION: {
          router: "Inspection"
        },
        QC: {
          router: "Quality"
        }
      },
      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.$ls.set("user", data, this.GLOBAL.authTimeout);
      this.$store.commit("setUser", data);
      // 初次登陆强制修改密码
      // if (
      //   data.role !== "ADMIN" &&
      //   data.role != "INSPECTION" &&
      //   !data.pwChangedCount
      // ) {
      //   this.$refs.ResetPwd.open();
      //   return;
      // }

      const params = {
        workId: data.workId,
        subjectId: `${data.workId}-${data.subject}`
      };
      // 根据角色跳转不同的路由
      const { role, markRight } = data;
      let routerType = role;
      if (role.includes("MARK")) {
        const curSubject = await subjectDetail(params.subjectId);
        const stage = curSubject.stage;
        routerType = `${role}_${stage}`;

        if (role === "MARKER") {
          if (stage === "INIT") {
            this.$Message.error("当前工作未开启分档！");
            return;
          }
          if (
            (stage === "LEVEL" && markRight === "ALLOW_SCORING") ||
            (stage === "SCORE" && markRight === "ALLOW_LEVELING")
          ) {
            this.$Message.error("您的权限不够！");
            return;
          }
        }
      }

      const routerName = this.rightRoutes[routerType].router;
      this.$router.push({
        name: routerName,
        params
      });
    },
    resetSuccess(newpassword) {
      this.loginModel.password = newpassword;
    }
  }
};
</script>
