<template>
  <login-layout>
    <template #header>
      <span 
        @click="toggle('phone-login')">
        手机号登录</span>
    </template>
    <template #form-title>
      <div>邮箱密码登录</div>
    </template>
    <template>
      <email-input v-model="email"></email-input>
      <password-input v-model="pwd"></password-input>
    </template>
    <template #form-buttons>
      <main-button @click.native="login" :disabled="!canSubmit" :btnText="'登录'"></main-button>
    </template>
    <template #footer>
      <span @click="toggle('email-login')">验证码登录</span>
    </template>  
  </login-layout>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Inject, Emit } from 'vue-property-decorator';
import { Form, Field, CellGroup, Button } from 'vant';
import { Action } from 'vuex-class';
import LoginInterface from './login';
import { isEmail , isPwd } from '@/const/pattern';
import { LoginType } from '@/const/enum';
import LoginLayout from '@/layout/LoginLayout.vue';

@Component({
  name: 'emailPwdLogin',
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    LoginLayout,
  },
})
export default class Login extends Vue  {
  @Inject('validate') private validate!: any;

  private email: string = '';
  private pwd: string = '';
  private isShowPwd: boolean = false;

  private get emailRule() {
    return {
      word: this.email,
      pattern: isEmail,
      message: '请输入正确的邮箱',
    };
  }
  private get pwdRule() {
    return {
      word: this.pwd,
      pattern: isPwd,
      message: '密码6-16位由字母或数字组成',
    };
  }
  private get canSubmit() {
    return !this.validate([this.emailRule, this.pwdRule]);
  }

  @Emit('change-state')
  private toggle(state: string) {
    return state;
  }
  private login() {
    const { email, pwd, emailRule, pwdRule } = this;
    if ( !this.canSubmit ) { return; }
    this.$emit('login', {
      login_type: LoginType.EmailPwd,
      email,
      pwd,
    });
  }
}
</script>