<template>
  <!-- <div id="login-wrap"> -->

  <a-form-model id="formLogin" ref="form" class="user-layout-login" :model="form" :rules="rules">
    <a-alert
      v-if="isLoginError"
      type="error"
      showIcon
      style="margin-bottom: 24px;"
      :message="loginErrorInfo"
      closable
      :after-close="handleCloseLoginError"
    />
    <a-form-model-item prop="username">
      <div class="label-title">账户</div>
      <a-input v-model="form.username" size="large" placeholder="账户" >
      </a-input>
    </a-form-model-item>
    <a-form-model-item prop="password">
      <div class="label-title">密码</div>
      <a-input-password class="password-input" v-model="form.password" size="large" placeholder="密码">

      </a-input-password>
    </a-form-model-item>
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="16">
        <a-form-model-item prop="code">
          <a-input
            class="password-input"
            v-model="form.code"
            size="large"
            type="text"
            autocomplete="off"
            placeholder="验证码">

          </a-input>
        </a-form-model-item>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <img class="getCaptcha" :src="codeUrl" @click="getCode">
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="16">
        <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">记住密码</a-checkbox>
      </a-col>
      <a-col class="gutter-row" :span="8" style="text-align:right">
        <a @click="forgetFun">忘记密码?</a>
      </a-col>
    </a-row>
    <a-form-item style="margin-top:24px">
      <a-button
        size="large"
        type="primary"
        htmlType="submit"
        class="login-button"
        :loading="logining"
        :disabled="logining"
        @click="handleSubmit"
      >确定</a-button>
    </a-form-item>
  </a-form-model>

  <!-- </div> -->
</template>

<script>
// import md5 from 'md5'
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import { getCodeImg } from '@/api/login'

export default {
  components: {
  },
  data() {
    return {
      codeUrl: '',
      isLoginError: false,
      loginErrorInfo: '',
      form: {
        username: '',
        password: '',
        code: undefined,
        uuid: ''
      },
      rules: {
        username: [{ required: true, message: '请输入帐户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      logining: false
    }
  },
  created() {
    this.getCode()
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.img
        this.form.uuid = res.uuid
      })
    },
    ...mapActions(['Login', 'Logout']),
    handleSubmit() {
      this.logining = true
      this.$refs.form.validate(valid => {
        if (valid) {
          this.Login(this.form)
            .then((res) => this.loginSuccess(res))
            .catch(err => this.requestFailed(err))
            .finally(() => {
              this.logining = false
            })
        } else {
          setTimeout(() => {
            this.logining = false
          }, 600)
        }
      })
    },
    forgetFun() {
      this.$confirm({
        title: '忘记密码，请联系管理员！',
        onOk() {}

      })
    },

    loginSuccess(res) {
      this.$router.push({ path: '/' })
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`
        })
      }, 1000)
      this.handleCloseLoginError()
    },
    requestFailed(err) {
      this.isLoginError = true
      this.loginErrorInfo = err
      this.form.code = undefined
      this.getCode()
    },
    handleCloseLoginError() {
      this.isLoginError = false
      this.loginErrorInfo = ''
    }
  }
}
</script>

<style lang="less" scoped>
.label-title{
  line-height: 20px;
  margin-bottom: 10px;
}
.user-layout-login {
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 46px;
  }

  button.login-button {
    height: 50px;
    background-color: #3b75f5;
    border-radius: 10px;
    opacity: 0.8;
    width: 100%;
    font-family: MicrosoftYaHei;
    font-size: 18px;
    color: #ffffff;
  }
}

</style>
<style lang="less">
.main{
  .ant-input{
    height: 48px;
    background: rgba(59,117,245, 0.15);
    border-radius: 10px;
    border: none;
    padding: 0 20px;
    color: #000;
  }
  .password-input{
    border-radius: 10px;
    background: rgba(242,244,247, 1);
    .ant-input{
      background: rgba(242,244,247, 1);
    }
  }
}
</style>
