<template>
  <login-layout>
    <template #header>
      <span @click="toggle('email-login')">邮箱登录</span>
    </template>
    <template #form-title>
      <div>密码登录</div>
    </template>
    <template>
      <phone-input v-model="phone"></phone-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('phone-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 { isPhone , isPwd } from '@/const/pattern';
import { LoginType } from '@/const/enum';
import LoginLayout from '@/layout/LoginLayout.vue';

@Component({
  name: 'phonePwdLogin',
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    LoginLayout,
  },
})
export default class Login extends Vue {

  @Inject('validate') private validate!: any;

  private phone: string = '';
  private pwd: string = '';

  private get phoneRule() {
    return {
      word: this.phone,
      pattern: isPhone,
      message: '请输入正确的手机号',
    };
  }
  private get pwdRule() {
    return {
      word: this.pwd,
      pattern: isPwd,
      message: '密码6-16位由字母或数字组成',
    };
  }
  private get canSubmit() {
    return !this.validate([this.phoneRule, this.pwdRule]);
  }

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