<template>
  <div class="main">
    <div class="user-login">用户登录</div>
    <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"
      />
      <div class="from-info">
        <a-form-model-item prop="username">
          <a-input v-model="form.username" size="large" placeholder="账户: admin">
            <a-icon slot="prefix" type="user" :style="{ color: '#0BA1F8' }" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="password">
          <a-input-password v-model="form.password" size="large" placeholder="密码: admin123">
            <a-icon slot="prefix" type="lock" :style="{ color: '#0BA1F8' }" />
          </a-input-password>
        </a-form-model-item>
      </div>
      <a-row :gutter="16" v-if="captchaEnabled&&needCaptchaCode">
        <a-col class="gutter-row" :span="16">
          <a-form-model-item prop="code" :rules="{ required: true, message: '请输入验证码', trigger: 'blur' }">
            <a-input v-model="form.code" size="large" type="text" autocomplete="off" placeholder="验证码">
              <a-icon slot="prefix" type="security-scan" :style="{ color: '#0BA1F8' }"/>
            </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-form-model-item prop="rememberMe">
        <a-checkbox :checked="form.rememberMe" @change="rememberMe">
          <span style="color: #fff;">记住密码</span>
        </a-checkbox>
      </a-form-model-item>
      <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 { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import { getCodeImg } from '@/api/login'
import { LOGIN_USERNAME, LOGIN_PASSWORD, LOGIN_REMEMBERME } from '@/store/mutation-types'
import storage from 'store'

export default {
  components: {},
  data () {
    return {
      codeUrl: '',
      isLoginError: false,
      loginErrorInfo: '',
      form: {
        username: 'admin',
        password: 'admin123',
        code: undefined,
        uuid: '',
        rememberMe: false
      },
      rules: {
        username: [{ required: true, message: '请输入帐户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      logining: false,
      captchaEnabled: true,
      needCaptchaCode: false
    }
  },
  created () {
    this.getStorage()
    this.getCode()
  },
  methods: {
    getCode () {
      getCodeImg().then((res) => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (this.captchaEnabled) {
          this.codeUrl = 'data:image/gif;base64,' + res.img
          this.form.uuid = res.uuid
        }
      })
    },
    getStorage () {
      const username = storage.get(LOGIN_USERNAME)
      const password = storage.get(LOGIN_PASSWORD)
      const rememberMe = storage.get(LOGIN_REMEMBERME)
      if (username) {
        this.form = {
          username: username,
          password: password,
          rememberMe: rememberMe
        }
      }
    },
    rememberMe (e) {
      this.form.rememberMe = e.target.checked
    },
    ...mapActions(['Login', 'Logout']),
    handleSubmit () {
      this.logining = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.rememberMe) {
            storage.set(LOGIN_USERNAME, this.form.username)
            storage.set(LOGIN_PASSWORD, this.form.password)
            storage.set(LOGIN_REMEMBERME, this.form.rememberMe)
          } else {
            storage.remove(LOGIN_USERNAME)
            storage.remove(LOGIN_PASSWORD)
            storage.remove(LOGIN_REMEMBERME)
          }
          this.Login(this.form)
            .then((res) => this.loginSuccess(res))
            .catch((err) => this.requestFailed(err))
            .finally(() => {
              this.logining = false
            })
        } else {
          setTimeout(() => {
            this.logining = false
          }, 300)
        }
      })
    },
    loginSuccess (res) {
      // this.$router.push({ path: '/cardiot' })
      this.$router.push({path:'/vehicle/index'})
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`
        })
      }, 1000)
      this.handleCloseLoginError()
    },
    requestFailed (err) {
      this.needCaptchaCode = err.needCaptchaCode
      this.isLoginError = true
      this.loginErrorInfo = err.msg
      this.form.code = undefined
      if (this.captchaEnabled) {
        this.getCode()
      }
    },
    handleCloseLoginError () {
      this.isLoginError = false
      this.loginErrorInfo = ''
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  // width: 630px;
  width: 500px;
  max-width: 600px;
  height: 447px;
  background: url('../../assets/login/2782b15d0824e0f81d65a9267429de8.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .user-login {
    color: rgb(99, 194, 237);
    font-size: 22px;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-family: '宋体';
  }
}

.user-layout-login {
  label {
    font-size: 14px;
  }

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

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }
  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;
    .register {
      float: right;
    }
  }
  /deep/.ant-input {
    background-color: rgba(23, 136, 203, 0.3);
    cursor: pointer;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.3);
    &::placeholder {
      color: #fff;
    }
  }
  // /deep/.ant-form-item-control{
  //   width: 300px;
  // }
  .from-info{
    /deep/.ant-input{
    width: 350px !important;
  }
  }

  /deep/ input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
  }
  // 改变input里的字体颜色
  /deep/ .has-error .ant-input-affix-wrapper .ant-input,
  .has-error .ant-input-affix-wrapper .ant-input:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
  }
  /deep/ .ant-input-affix-wrapper .ant-input:not(:first-child) {
    padding-left: 30px;
  }
}
</style>
