<template>
    <div class="set-phone">
        <section v-if="step === '1'" style="color:#353535;text-align:left;line-height: 1.5em;">
           <div style="font-size: 20px;">已绑定手机号</div>
           <div class="title" style="font-size:25px;margin-top:5px;margin-bottom:22px;">{{userInfo.phone || userInfo.email}}</div>
           <div style="font-size:14px;color:#737582;">绑定手机号将作为您身份验证的重要方式，请谨慎操作！</div>
           <van-button block style="margin-top: 60px;" type="info" @click="step = '2'">更改手机号</van-button>
           <div style="font-size:12px;color:#999999;margin-top:17px;">变更手机号后，将自动同步新手机号为登录账号</div>
        </section>
        <code-input
          v-if="step === '2'"
          :code.sync="code"
          :codeTo="userInfo.phone || userInfo.email"
          :sendCode="sendCode"
          :validateCode="validateOldAccount"
          :next="showNewAccountInput"></code-input>
        <section v-if="step === '3'">
          <div class="title">输入新手机号</div>
          <van-field v-model="newPhone" label="" placeholder="请输入新手机号" class="margin-top30"></van-field>
          <van-button block type="info" class="margin-top30" @click="step='4'">确定</van-button>
        </section>
        <code-input
          v-if="step === '4'"
          :code.sync="code"
          :codeTo="newPhone"
          :sendCode="sendCode(newPhone)"
          :validateCode="() => {}"
          :next="setPhone"></code-input>
        <set-success
          v-if="step === '5'"
          :tip="'手机号设置成功'"></set-success>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Form, Field, Button } 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,
    SetSuccess,
    CodeInput,
  },
})
export default class SetPhone extends Vue {
  @State('userInfo') private userInfo!: any;
  @Action('getUserInfo') private getUserInfo!: () => void;
  private code: string = '';
  private randomToken: string = '';
  private newPhone: string = '';
  private step: string = '1';
  get isPhone() {
    return this.userInfo.phone;
  }
  get codeType() {
    return this.isPhone ? 0 : 1;
  }
  private sendSms(account: string = '') {
    return this.$api.user.sendSms(account || this.userInfo.phone , 1); // 1 修改密码
  }
  private sendEmail(account: string = '') {
    return this.$api.user.sendEmail(account || this.userInfo.email, 1); // 1 修改密码
  }
  private async sendCode(account: string = '') {    
    if (this.isPhone) {
      await this.sendSms(account);
    } else {
      await this.sendEmail(account);
    }
  }
  private async validateOldAccount() {
    const { userInfo: { phone, email }, code, newPhone } = this;
    const { random_token } = await this.$api.user.setPhoneCode( this.codeType, this.code, {
      phone,
      email,
    });
    this.randomToken = random_token;
  }
  private showNewAccountInput() {
    this.step = '3';
    this.code = '';
  }
  private async setPhone() {
    const {code, newPhone, randomToken } = this;
    await this.$api.user.setPhone(code, newPhone, randomToken);
    this.step = '5';
  }
}
</script>
<style scoped lang="scss">
  .set-phone {
    padding: 31px 25px;
    .title{
      font-size: 22px;
      color: #353535;
      font-weight: 500;
      text-align: left;
    }
    .margin-top30{
      margin-top: 30px;
    }
  }
</style>