<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;">已绑定{{isPhoneStr}}</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;">绑定{{isPhoneStr}}将作为您身份验证的重要方式，请谨慎操作！</div>
          <van-button block style="margin-top: 60px;" type="info" @click="step = '2';sendCode()();">更改{{isPhoneStr}}</van-button>
          <div style="font-size:12px;color:#999999;margin-top:17px;">变更{{isPhoneStr}}后，将自动同步新{{isPhoneStr}}为登录账号</div>
      </section>
      <code-input
        v-if="step === '2'"
        :code.sync="code"
        :codeTo="userInfo.phone || userInfo.email"
        @send-code="sendCode()"
        @next="showNewAccountInput"></code-input>
      <section v-if="step === '3'">
        <div class="title">输入新{{isPhoneStr}}</div>
        <van-field v-model="newPhone" label="" :placeholder="`请输入新${isPhoneStr}`" class="margin-top30"></van-field>
        <van-button block type="info" class="margin-top30" @click="inputNewPhone">确定</van-button>
      </section>
      <code-input
        v-if="step === '4'"
        :code.sync="code"
        :codeTo="newPhone"
        @send-code="sendCode(newPhone)"
        @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;
  @Getter('isPhone') private isPhone!: boolean;
  @Getter('isPhoneStr') private isPhoneStr!: string;
  @Action('getUserInfo') private getUserInfo!: () => Promise<any>;
  private code: string = '';
  private randomToken: string = '';
  private newPhone: string = '';
  private step: string = '1';
  get codeType() {
    return this.isPhone ? 0 : 1;
  }
  private sendSms(account: string = '') {
    return this.$api.user.sendSms(account || this.userInfo.phone , 3); // 1 修改密码
  }
  private sendEmail(account: string = '') {
    return this.$api.user.sendEmail(account || this.userInfo.email, 3); // 1 修改密码
  }
  private sendCode(account: string = '') {
    return async () => {
      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 async showNewAccountInput() {
    await this.validateOldAccount();
    this.step = '3';
    this.code = '';
  }
  private  inputNewPhone() {
    const { isPhone, newPhone, isPhoneStr } = this;
    if (!/1\d{10}/.test(newPhone) || !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(newPhone)) {
      this.$toast(`请输入正确的${isPhoneStr}`);
      return;
    }
    this.step = '4';
    this.sendCode(newPhone)();
  }
  private async setPhone() {
    const {code, newPhone, randomToken } = this;
    await this.$api.user.setPhone(code, newPhone, randomToken);
    await this.getUserInfo();
    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>