<template>
  <div class="edit-phone">
    <el-breadcrumb separator="/" class="head-nav">
      <el-breadcrumb-item :to="{ path: '/userCenter' }"
        >用户中心</el-breadcrumb-item
      >
      <el-breadcrumb-item v-if="this.$store.state.userInfos.phone"
        >修改绑定手机</el-breadcrumb-item
      >
      <el-breadcrumb-item v-else>绑定手机</el-breadcrumb-item>
    </el-breadcrumb>
    <p class="title" v-if="this.$store.state.userInfos.phone">修改绑定手机：</p>
    <p class="title" v-else>绑定手机：</p>
    <el-form
      label-position="right"
      label-width="120px"
      :model="oldPhone"
      class="form"
      v-if="!originPass"
    >
      <el-form-item
        label="原手机号"
        class="form-item"
        v-if="this.$store.state.userInfos.phone"
      >
        <span>{{ oldPhone.phone | filterPhone }}</span>
      </el-form-item>
      <el-form-item label="当前邮箱" class="form-item" v-else>
        <span>{{ oldPhone.email }}</span>
      </el-form-item>
      <el-form-item label="验证码" class="form-item">
        <el-input
          v-model="oldPhone.code"
          maxlength="6"
          placeholder="请输入验证码"
          class="code-item"
          clearable
        ></el-input>
        <code-btn @sendCode="sendCode" :Modifyphone="true"></code-btn>
      </el-form-item>
    </el-form>
    <el-form
      label-position="right"
      label-width="120px"
      :model="newPhone"
      class="form"
      v-if="originPass"
    >
      <el-form-item label="新手机号" class="form-item">
        <el-input
          v-model.number="newPhone.phone"
          placeholder="请输入新手机号"
          clearable
          maxlength="11"
          :controls="false"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" class="form-item">
        <el-input
          v-model="newPhone.code"
          placeholder="请输入验证码"
          class="code-item"
          clearable
          maxlength="6"
        ></el-input>
        <code-btn
          @sendCode="sendCode"
          :Modifyphone="true"
          :newV="String(newPhone.phone)"
          ref="child"
        ></code-btn>
      </el-form-item>
    </el-form>
    <el-button class="confirm-btn" type="primary" @click="confirm()">{{
      originPass ? "提交修改" : "下一步"
    }}</el-button>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import CodeBtn from "./VerCode.vue";
import { checkOldPhone, editPhone } from "./Api.service";
export default Vue.extend({
  components: {
    CodeBtn,
  },
  props: ["Infos"],
  data() {
    return {
      originPass: false, // 显示下个步骤
      oldPhone: {
        phone: this.$store.state.userInfos.phone,
        code: "",
        email: this.$store.state.userInfos.email,
      },
      tip: true,
      newPhone: {
        phone: "",
        code: "",
        random_token: "",
      },
    };
  },
  created() {
    if (
      !this.$store.state.userInfos.phone &&
      !this.$store.state.userInfos.email
    ) {
      this.$router.push("/userCenter");
    }
  },
  methods: {
    async sendCode() {
      this.$message({
        message: "发送成功",
        type: "success",
      });
    },
    async confirm() {
      if (!this.originPass) {
        if (this.oldPhone.code.trim() === "") {
          this.$message("验证码不可为空");
          return;
        }

        let info = {};
        if (this.$store.state.userInfos.phone) {
          info = {
            code: this.oldPhone.code,
            code_type: 0,
            phone: this.$store.state.userInfos.phone,
          };
        } else if (this.$store.state.userInfos.email) {
          info = {
            code: this.oldPhone.code,
            code_type: 1,
            email: this.$store.state.userInfos.email,
          };
        }
        const old = await checkOldPhone(info);
        if (old && old.code === 200) {
          this.$message({
            message: "验证成功",
            type: "success",
          });
          this.originPass = true;
          setTimeout(() => {
            let that: any;
            that = this.$refs.child;
            that.start();
          }, 100);
          this.newPhone.random_token = old.data.random_token;
        }
      } else {
        if (this.newPhone.phone === "") {
          this.$message("新手机号码不可为空");
          return;
        } else if (this.newPhone.code === "") {
          this.$message("验证码不可为空");
          return;
        }
        const newphone = await editPhone({
          code: this.newPhone.code,
          new_phone: String(this.newPhone.phone),
          random_token: this.newPhone.random_token,
        });
        if (newphone && newphone.code === 200) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.push("/userCenter");
        }
      }
    },
  },
});
</script>


<style scoped>
.edit-phone {
  padding: 16px;
  min-height: calc(100vh - 95px);
  min-width: 1200px;
  background: #f8fafb;
}
.head-nav {
  margin: 12px 0 40px 47px;
}
.title {
  margin-left: 47px;
  font-size: 20px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: rgba(53, 53, 53, 1);
  line-height: 40px;
}
.form {
  width: 900px;
}
.form .el-input {
  width: 610px;
}
.form-item {
  margin-bottom: 28px;
}
.code-item {
  width: 478px !important;
}
.confirm-btn {
  margin-top: 10px;
  margin-left: 50px;
}
</style>
<style>
.edit-phone .el-form-item__label {
  margin-right: 21px;
}
</style>

