<template>
    <div class="ht-base-form-login-demo">
        <ht-base-form ref="formInline" :model="formInline" :rules="ruleInline">
            <ht-base-form-item prop="user">
                <ht-base-input type="text" v-model="formInline.user" placeholder="请输入">
                    <ht-base-icon type='LiRa_user1' slot="prepend"></ht-base-icon>
                </ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item prop="password">
                <ht-base-input type="password" v-model="formInline.password" placeholder="请输入">
                    <ht-base-icon type='LiRa_lock' slot="prepend"></ht-base-icon>
                </ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item>
                <ht-base-checkbox v-model="single" class="pw">记住密码</ht-base-checkbox>
                <a href="#" class="sign">注册</a>
            </ht-base-form-item>
            <ht-base-form-item>
                <ht-base-button type="primary" @click="handleSubmit('formInline')" long>登录</ht-base-button>
            </ht-base-form-item>
        </ht-base-form>
    </div>
</template>

<script>
  export default {
      name: 'HtBaseFormLoginDemo',
      data () {
          return {
              single:true,
              formInline: {
                  user: '',
                  password: ''
              },
              ruleInline: {
                  user: [
                      { required: true, message: '请输入正确内容', trigger: 'blur' }
                  ],
                  password: [
                      { required: true, message: '请输入正确内容', trigger: 'blur' }
                  ]
              }
          }
      },
      methods: {
          handleSubmit(name) {
              this.$refs[name].validate((valid) => {
                  if (valid) {
                      this.$HtBaseMessage.success('Success!');
                  } else {
                      this.$HtBaseMessage.error('Fail!');
                  }
              })
          }
      }
  }
</script>
<style type="less">
    .ht-base-form-login-demo {
        width:200px;
        .pw{
            float: left;
        }
        .sign{
            float: right;
        }
    }
</style>

