<template>
  <div class="login-dialog">
    <el-alert title="登录超时,请重新登录!" type="warning"/>
    <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px">
      <el-form-item prop="userid">
        <el-input type="text" v-model="loginForm.userid" autocomplete="off" disabled placeholder="账号" size="mini" @keyup.native.enter='handleSubmit'>
          <i slot="prepend" class="el-icon-fa el-icon-fa-user"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="passwd">
        <el-input type="password" v-model="loginForm.passwd" autocomplete="off" placeholder="密码" size="mini" @keyup.native.enter='handleSubmit'>
          <i slot="prepend" class="el-icon-fa el-icon-fa-lock"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="captcha" v-if="needCaptcha">
        <el-input type="text" v-model="loginForm.captcha" autocomplete="off" placeholder="验证码" size="mini" maxlength="5">
          <img slot="prepend" class="captcha" @click="changeCaptcha" :src="captchaUrl" @keyup.native.enter='handleSubmit'>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="text-center margin-top-3">
      <el-button size="mini" class="blue" @click="handleSubmit" :loading="loading">登录</el-button>
      <!--<el-button size="mini" class="yellow" @click="cancel">取消</el-button>-->
    </div>


  </div>
</template>

<script>
  import config from "../config";
  import AcesAPI from "../api/base/sysm/AcesAPI.js";

  export default {
    computed: {},
    data() {
      return {
        loading: false,
        needCaptcha: false,
        captchaUrl: `${config.ajaxUrl}/anon/captcha.jpg`,
        loginForm: {
          userid: this.$store.state.base.sysUser.userId,
          passwd: "",
          captcha: ""
        },
        rules: {
          userid: [{required: true, message: "请输入账号"}],
          passwd: [{required: true, message: "请输入密码"}],
          captcha: [{required: true, message: "验证码不能为空"}]
        }
      };
    },
    async mounted() {
      //取出是否需要验证码
      this.needCaptcha = window.localStorage.getItem("login-captcha") === "true";
    },
    methods: {
      //切换验证码
      changeCaptcha() {
        this.captchaUrl = `${config.ajaxUrl}/anon/captcha.jpg?_dc=${new Date().getTime()}`;
      },
      // 处理登陆按钮
      async handleSubmit() {
        await this.$refs.loginForm.validate();
        this.loading = true;

        try {
          await AcesAPI.logck(this.loginForm.userid);
          await this.doLogin();
        } catch (e) {
          if (e.data.respCode === "020110") {
            if (window.confirm(e.data.respDesc)) {
              this.doLogin();
            }
          }
        } finally {
          this.loading = false;
        }
      },
      cancel() {
        this.$store.state.base.loginTimeout = false;
      },
      //执行最终登录
      async doLogin(confirm) {
        try {
          let data = await AcesAPI.login(this.loginForm).then();
          window.localStorage.setItem(config.loginToken, "true");
          window.localStorage.removeItem("login-captcha");
          this.$store.state.base.loginTimeout = false;
          this.$store.state.base.loginChangePwd = data.changepwd;
          await this.$router.push("/");
        } catch (e) {
          this.needCaptcha = e.data.captcha;
          window.localStorage.setItem("login-captcha", this.needCaptcha);
          this.changeCaptcha();
        }
      }
    }
  };
</script>
<style>
  .captcha {
    cursor: pointer;
    height: 20px;
  }
</style>
