<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" id="login-form">
    <FormItem prop="username" v-validate:username.required="rules">
      <Input v-model="form.username" placeholder="请输入用户名">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password" v-validate:password.required="rules">
      <Input type="password" v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem v-if="errorMsg">
      <p style="color:red">{{errorMsg}}</p>
    </FormItem>
    <FormItem>
      <Button @click="handleSubmit" type="primary" long>登录</Button>
    </FormItem>
  </Form>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";

@Component
export default class LoginForm extends Vue {
  @Prop() errorMsg ! : String;
  form: object = { username: "", password: "" };
  rules:any={maxInputLength:500,required:true};
  @Emit("on-success-valid") callback(data: object) {}
  handleSubmit(): void {
    (this.$refs.loginForm as any).validate((valid: boolean) => {
      if (valid) {
        this.callback(this.form);
      }
    });
  }

  handleEvent(event){
      if(event.keyCode == 13 ) {
        this.handleSubmit()
      }
    }
      
  initEvent() {
      let ele=document.getElementById("login-form");
      ele!.removeEventListener('keydown', this.handleEvent,true);
      ele!.addEventListener('keydown', this.handleEvent,true);
    }
}
</script>
