<template>
  <div class="login">
    <h3 class="login-header">原动力有限公司</h3>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login-form">
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off" show-password></el-input>
      </el-form-item>
    </el-form>
    <!-- <p style="margin: 10px 0">测试：username: 'admin1',password: 'a12345678'</p> -->
    <el-button type="primary" @click="onSubmit('ruleForm')">提交</el-button>
  </div>
</template>

<script>
export default {
  name: 'Login',
  components: {},
  data () {
    const checkS = function (str) {
      // 判断字符串是否为数字和字母组合
      var zg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
      if (!zg.test(str)) {
        return false
      } else {
        return true
      }
    }
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不可以为空'))
      }
      setTimeout(() => {
        if (!checkS(value)) {
          callback(new Error('请输入数字和字母'))
        } else {
          if (value.length > 18 || value.length < 5) {
            callback(new Error('请输入5到18位数的用户名'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不可为空'))
      }
      setTimeout(() => {
        if (!checkS(value)) {
          callback(new Error('请输入数字和字母'))
        } else {
          if (value.length > 18 || value.length < 6) {
            callback(new Error('请输入6到18位数的密码'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    return {
      ruleForm: {
        username: 'admin1',
        password: 'a12345678'
      },
      rules: {
        username: { validator: checkUsername, trigger: 'blur' },
        password: { validator: checkPassword, trigger: 'blur' }
      },
      adminMsg: {
        username: 'admin1',
        password: 'a12345678'
      }
    }
  },
  mounted () {
  },
  methods: {
    onSubmit (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.ruleForm.username !== this.adminMsg.username) {
            this.$message.error('用户名错误')
          } else if (this.ruleForm.password !== this.adminMsg.password) {
            this.$message.error('密码错误')
          } else {
            console.log(this.ruleForm)
            this.$router.push({
              name: 'home'
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.login {
  width: 500px;
  height: 350px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.login-header {
  margin-bottom: 50px;
  font-size: 25px;
}

.login-form {
  /* display: inline-block ; */
  /* margin: auto; */
  width: 80%;
}

.el-button {
  width: 80%;
  /* height: 50px; */
  line-height: 30px;
}
</style>
