<template>
<div>
  <div class="formLine">
    <form ref="loginForm" :model="loginForm" :rules="rules">
      <div class='formElement'>
        <!-- <img width="15px" src="../../assets/img/User.png" alt="" /> -->
        <input style="padding-left:50px;" id="userName" type="text" v-model="loginForm.userName" placeholder="用户名" autocomplete="off">
      </div>
      <div class="formElement">
        <!-- <img src="../../assets/img/Key.png" alt="" /> -->
        <input  style="padding-left:50px"  id="password" type="password" v-model="loginForm.password" placeholder="密码" autocomplete="off">
      </div>
      <div class="formOther">
        <Checkbox v-model="single">记住密码</Checkbox>
      </div>
      <div class="formOther">
       <Button @click="handleSubmit" type="primary" long>登录</Button>
      </div>
    </form>
  </div>
   <div class="bottom">
            <a>注册</a>
            <a>忘记密码</a>
    </div>
  </div>
</template>
<script>
export default {
  name: 'LoginForm',
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data () {
    return {
      single: false,
      loginForm: {
        userName: 'super_admin',
        password: '0000'
      }
    }
  },
  computed: {
    rules () {
      return {
        userName: this.userNameRules,
        password: this.passwordRules
      }
    }
  },
  methods: {
    handleSubmit () {
      console.log(this.$refs.loginForm)
      // this.$router.push('home')
      // this.$refs.loginForm.validate((valid) => {
      //   if (valid) {
      this.$emit('on-success-valid', {
        userName: this.loginForm.userName,
        password: this.loginForm.password
      })
      //   }
      // })
    }
  }
}
</script>
<style lang='less' scoped>
#userName{
  background: url(../../assets/img/User.png) no-repeat left center;
  background-size: 20px 20px;
  background-position: 15px;
  height: 40px;
}
#password{
  background: url(../../assets/img/Key.png) no-repeat left center;
  background-size: 20px 20px;
  background-position: 15px;
}
.formLine{
  .formElement{
    border:1px solid rgba(223, 223, 223, 1);
    width: 295px;
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    input{
      border:none;
      width: 100%;
      height: 40px;
    }
  }
  .formOther{
    margin-bottom: 15px;
  }
}

.bottom {
          display: flex;
          justify-content: space-between;
        }
</style>>
