<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="globalState.userInfos.phone"
        >修改绑定手机</el-breadcrumb-item
      >
      <el-breadcrumb-item v-else>绑定手机</el-breadcrumb-item>
    </el-breadcrumb>
    <p class="title" v-if="globalState.userInfos.phone">修改绑定手机：</p>
    <p class="title" v-else>绑定手机：</p>
    <syBusinessForm
      class="formlayout1"
      v-if="!originPass"
      :formList="setp1FormList"
    ></syBusinessForm>
    <syBusinessForm
      v-else
      class="formlayout1"
      :formList="setp2FormList"
    ></syBusinessForm>
  </div>
</template>
<script lang="ts">
import { checkOldPhone, editPhone } from "@/service/Api.service";
import { globalState } from "@/store/state";
import { filterPhone, syBusinessForm } from "cqk-sy-ui";
import { ElMessage, ElBreadcrumb, ElBreadcrumbItem } from "element-plus";
import { defineComponent } from "vue";
import { generateStep1FormList, generateStep2FormList } from "./config";
export default defineComponent({
  props: ["Infos"],
  components: {
    ElBreadcrumb,
    ElBreadcrumbItem,
    syBusinessForm,
  },
  data() {
    return {
      originPass: false, // 显示下个步骤
      oldPhone: {
        phone: globalState.userInfos.phone,
        code: "",
        email: globalState.userInfos.email,
      },
      tip: true,
      newPhone: {
        phone: "",
        code: "",
        random_token: "",
      },
      setp1FormList: generateStep1FormList(
        {
          phone: globalState.userInfos.phone,
          email: globalState.userInfos.email,
        },
        this.confirm
      ),
      setp2FormList: generateStep2FormList(this.confirm),
    };
  },
  created() {
    if (!globalState.userInfos.phone && !globalState.userInfos.email) {
      this.$router.push("/userCenter");
    }
  },
  methods: {
    filterPhone,
    async sendCode() {
      ElMessage({
        message: "发送成功",
        type: "success",
      });
    },
    async confirm(
      data: any,
      setError: (fieldName: string, errorMsg: string) => void
    ) {
      if (!this.originPass) {
        if (!data.code || data.code.trim() === "") {
          //   ElMessage("验证码不可为空");
          setError("验证码", "验证码不可为空");
          return;
        }
        let info = {};
        if (globalState.userInfos.phone) {
          info = {
            code: data.code,
            code_type: 0,
            phone: globalState.userInfos.phone,
          };
        } else if (globalState.userInfos.email) {
          info = {
            code: data.code,
            code_type: 1,
            email: globalState.userInfos.email,
          };
        }
        const old = await checkOldPhone(info);
        if (old && old.code === 200) {
          ElMessage({
            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 {
          old?.msg && setError("验证码", old?.msg);
        }
      } else {
        if (data.phone === "") {
          setError("新手机号", "新手机号码不可为空");
          //   ElMessage("新手机号码不可为空");
          return;
        } else if (data.code === "") {
          setError("验证码", "验证码不可为空");
          //   ElMessage("验证码不可为空");
          return;
        }
        const newphone = await editPhone({
          code: data.code,
          new_phone: String(data.phone),
          random_token: this.newPhone.random_token,
        });
        if (newphone && newphone.code === 200) {
          ElMessage({
            message: "操作成功",
            type: "success",
          });
          this.$router.push("/userCenter");
        } else {
          newphone?.msg && setError("验证码", newphone.msg);
        }
      }
    },
  },
  computed: {
    globalState() {
      return globalState;
    },
  },
});
</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>
