<template>
  <div class="login-container">
    <div class="logo-wrapper">
      <div class="logo-img"></div>
    </div>
    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
      <h3 class="title">登录</h3>
      <el-form-item prop="account">
        <span class="svg-container svg-container_login">
          <svg-icon icon-class="user" />
        </span>
        <el-input name="username" type="text" v-model="loginForm.account" autoComplete="on" placeholder="请输入用户账号"
          maxlength="11" />
      </el-form-item>
      <el-form-item prop="pw">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input name="password" :type="pwdType" v-model="loginForm.pw" autoComplete="on" placeholder="请输入登录密码"
          maxlength="24"></el-input>
        <span class="show-pwd" @click="showPwd">
          <svg-icon icon-class="eye" v-show="!falg" />
          <svg-icon icon-class="password-view" v-show="falg" /></span>
      </el-form-item>
      <el-form-item>
        <el-button class="log-btn" type="primary" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { Message } from 'element-ui'
  import '@/styles/loginform.scss'
  export default {
    name: 'login',
    data() {
      var validPassword = (rule, value, callback) => {
        const reg = /^[a-zA-Z0-9]{6,24}$/
        if (!value) {
          callback(new Error('请输入您的登录密码'))
        }
        if (!reg.test(value)) {
          callback(new Error('密码由6-24个数字和字母组成，区分大小写'))
        }
        callback()
      }
      return {
        falg: false,
        loginForm: {
          account: '',
          pw: ''
        },
        loginRules: {
          account: [{ required: true, message: '请输入您的用户账号' }],
          pw: [
            { required: true, validator: validPassword, trigger: 'blur' }
          ]
        },
        loading: false,
        pwdType: 'password'
      }
    },
    methods: {
      showPwd() {
        this.falg = !this.falg
        if (this.pwdType === 'password') {
          this.pwdType = ''
        } else {
          this.pwdType = 'password'
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('LoginByUsername', this.loginForm).then((response) => {
              this.loading = false
              if (response.success) {
                if (response.data) {
                  this.$store.dispatch('GetUserInfo').then(res => {
                  })
                  this.$router.push({ path: '/dashboard' })
                } else {
                  Message.error('该账号已停用，请联系管理员')
                }
              } else {
                if (response.code === -200001) {
                  Message.error('账号或密码错误，请重新输入')
                }
              }
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>