<template>
<div>
  <div class="formLine">
    <Form ref="loginForm" :model="form" :rules="rules">
      <Form-item  class='formElement' prop='loginname'>
        <!-- <img width="15px" src="../../assets/img/User.png" alt="" /> -->
        <input style="padding-left:50px;" id="userName" type="text" v-model="form.loginname" placeholder="用户名" autocomplete="off" />
      </Form-item>
      <Form-item  class="formElement"  prop='loginpwd'>
        <!-- <img src="../../assets/img/Key.png" alt="" /> -->
        <input  style="padding-left:50px"  id="password" type="password" v-model="form.loginpwd" placeholder="密码" autocomplete="off">
      </Form-item>
      <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: {
    loginnameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      }
    },
    loginpwdRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data () {
    return {
      single: false,
      form: {
        loginname: '13140197098',
        loginpwd: '123456'
      }
    }
  },
  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) => {
        console.log(valid)
        if (valid) {
          this.$emit('on-success-valid', {
            loginname: this.form.loginname,
            loginpwd: this.form.loginpwd
          })
        }
      })
    }
  }
}
</script>
<style lang='less' scoped>
// #userName>.ivu-form-item-content{
//   width: 290px!important;
// }
#userName{
  background: url(../../assets/img/user.png) no-repeat left center;
  background-size: 20px 20px;
  background-position: 15px;
  height: 40px;
  width: 295px;

}
#password{
  background: url(../../assets/img/key.png) no-repeat left center;
  background-size: 20px 20px;
  background-position: 15px;
  width: 295px;

}
.formLine{
  .formElement{
    // background:rgba(1,167,193,1);
        border:0.5px solid #DFDFDF;
    width: 295px;
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 22px;

    input{
      border:none;
      width: 100%;
      height: 40px;
    }
  }
  .ivu-btn-primary{
    height: 40px;
    font-size:18px;
    font-family:'Microsoft YaHei';
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:13px;
  }
  .formOther{
    margin-bottom: 15px;
  }
}

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