<template>
  <div class="x-login-forget">
    <h3>忘记密码</h3>
    <ElForm :size="loginVm.size" @submit.native.prevent>
      <FormItem>
        <ElInput ref="phone" v-model.trim="model.phone" placeholder="请输入手机号码" autocomplete="on"></ElInput>
      </FormItem>
      <SmsCodeInput ref="sms" :phone="model.phone" v-model="model.smsCode"
                    :sendSmsMethod="sendSmsMethod"></SmsCodeInput>
      <FormItem>
        <PasswordInput ref="password" v-model.trim="model.password" placeholder="请输入密码"></PasswordInput>
      </FormItem>
      <FormItem>
        <PasswordInput ref="confirmPassword" v-model.trim="model.confirmPassword" placeholder="请再次输入密码"></PasswordInput>
      </FormItem>
      <FormItem class="x-login-forget__login">
        <ElButton @click="handleBack" type="text">返回登录</ElButton>
      </FormItem>
      <FormItem>
        <ElButton :loading="loading" @click="handleSubmit" class="x-login-forget__submit" native-type="submit"
                  type="primary">完成
        </ElButton>
      </FormItem>
    </ElForm>
  </div>
</template>

<script>
import {
  Form as ElForm,
  FormItem,
  Input as ElInput,
  Button as ElButton,
  Notification
} from 'element-ui';
import SmsCodeInput from './SmsCodeInput';
import PasswordInput from './PasswordInput';

export default {
  components: {
    ElForm,
    FormItem,
    ElInput,
    ElButton,
    SmsCodeInput,
    PasswordInput
  },
  inject: ['loginVm'],
  data() {
    return {
      model: {
        phone: '',
        password: '',
        confirmPassword: '',
        smsCode: ''
      },
      passwordVisible: false,
      verifyId: '',
      verifyUrl: '',
      showImageCode: true,
      loading: false
    };
  },
  computed: {
    texts() {
      return this.loginVm.texts;
    }
  },
  methods: {
    handleBack() {
      this.loginVm.showForgetPassword = false;
    },
    sendSmsMethod(data) {
      return this.loginVm.sendSmsCode(data);
    },
    validateRequired(el, value, message) {
      if (value) return true;
      Notification({
        message: message,
        type: 'warning'
      });
      el && el.focus();
      return false;
    },
    validate() {
      const phone = this.validateRequired(this.$refs.phone, this.model.phone, '请输入您的手机号');
      if (!phone) return false;
      const smsCode = this.validateRequired(this.$refs.sms.$refs.input, this.model.smsCode, '请输入验证码');
      if (!smsCode) return false;
      const password = this.validateRequired(this.$refs.password.$refs.input, this.model.password, '请输入密码');
      if (!password) return false;
      const confirmPassword = this.validateRequired(this.$refs.confirmPassword.$refs.input, this.model.confirmPassword, '请再次输入密码');
      if (!confirmPassword) return false;
      if (this.model.password !== this.model.confirmPassword) {
        Notification({
          message: '两次输入的密码不一样',
          type: 'warning'
        });
        return false;
      }
      return true;
    },
    handleSubmit() {
      const {resetPasswordMethod} = this.loginVm;
      if (!this.validate() || !resetPasswordMethod) return;
      this.loading = true;
      resetPasswordMethod(this.model).then(res => {
        this.loginVm.showForgetPassword = false;
        this.loginVm.username = this.model.phone;
        Notification({
          message: '重置密码成功',
          type: 'success'
        });
      }).catch(e => {
        const msg = e.msg || e.message || '未知错误';
        Notification({
          message: msg,
          type: 'warning'
        });
      }).finally(_ => {
        this.loading = false;
      });
    }
  }
};
</script>
