<template>
  <div class="set-passwd">
    <section v-if="step == '1'">
        <div class="title">设置密码</div>
        <van-field :value="userInfo.phone || userInfo.email" label="" readonly :placeholder="`请输入你的${isPhoneStr}`" class="margin-top30"></van-field>
        <van-button block style="margin-top: 60px;" type="info" @click="step = '2'">获取验证码</van-button>
    </section>
    <code-input v-if="step == '2'" :code.sync="code" :codeTo="userInfo.phone || userInfo.email" @send-code="sendCode" @next="showPassWordInputHandler"></code-input>
      <section v-if="step == '3'">
        <div class="title">输入密码</div>
        <van-field v-model="pwd" label="" placeholder="请输入6~16位密码" class="margin-top30"></van-field>
        <van-button block type="info" class="margin-top30" @click="setPwd">确定</van-button>
      </section>
    <transition name="van-slide-up">
      <set-success v-if="step == '4'"></set-success>
    </transition>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio, PasswordInput, NumberKeyboard } from 'vant';
import { State, Getter, Action, Mutation } from 'vuex-class';
import { Route } from 'vue-router';
import SetSuccess from './components/SetSuccess.vue';
import CodeInput from './components/CodeInput.vue';
@Component({
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Image.name]: Image,
    [Cell.name]: Cell,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [PasswordInput.name]: PasswordInput,
    [NumberKeyboard.name]: NumberKeyboard,
    SetSuccess,
    CodeInput,
  },
})
export default class SetPasswd extends Vue {
  @State('userInfo') private userInfo!: any;
  @Getter('isPhone') private isPhone!: boolean;
  @Getter('isPhoneStr') private isPhoneStr!: string;
  @Action('getUserInfo') private getUserInfo!: () => void;
  private code: string = '';
  private pwd: string = '';
  private step: string = '1';
  get codeType() {
    return this.isPhone ? 0 : 1;
  }
  private sendSms() {
    return this.$api.user.sendSms(this.userInfo.phone , 1); // 1 修改密码
  }
  private sendEmail() {
    return this.$api.user.sendEmail(this.userInfo.email, 1); // 1 修改密码
  }
  private async sendCode() {
    if (this.isPhone) {
      await this.sendSms();
    } else {
      await this.sendEmail();
    }
  }
  private validateCode() {
    const { phone, email} = this.userInfo;
    return this.$api.user.setPwdCode( this.codeType, this.code, {
      phone,
      email,
    });
  }
  private async showPassWordInputHandler() {
    await this.validateCode();
    this.step = '3';
  }
  private async setPwd() {
    const { userInfo: { phone, email }, pwd, code } = this;
    if (!/[0-9a-z]{6,16}/i.test(pwd) ) {
      this.$toast('密码需由6至16位数字或字母');
      return;
    }
    const account: string = phone || email;
    await this.$api.user.setPwd(this.codeType, pwd, code, { phone, email });
    this.step = '4';
  }
}
</script>
<style scoped lang="scss">
  .set-passwd {
    padding: 31px 25px;
    .title{
      font-size: 22px;
      color: #353535;
      font-weight: 500;
      text-align: left;
    }
    .margin-top30{
      margin-top: 30px;
    }
  }
</style>