<template>
  <div>
    <p class="text-2xl font-bold mb-5">换绑手机</p>
    <a-form-model
      :model="changeSecurityPhoneForm"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      ref="changeSecurityPhoneForm"
      :rules="rules"
    >
      <a-form-model-item
        label="原手机号码"
        :wrapper-col="{ span: 1, offset: 0 }"
      >
        <span>{{ userPhone }}</span>
      </a-form-model-item>
      <a-form-model-item
        label="账号密码"
        :wrapper-col="{ span: 4, offset: 0 }"
        prop="pwd"
      >
        <a-input v-model="changeSecurityPhoneForm.pwd" type="password" />
      </a-form-model-item>
      <a-form-model-item
        label="新手机号码"
        prop="newPhoneNumber"
        :wrapper-col="{ span: 4, offset: 0 }"
      >
        <a-input v-model="changeSecurityPhoneForm.newPhoneNumber" />
      </a-form-model-item>
      <a-form-model-item
        label="验证码"
        :wrapper-col="{ span: 4, offset: 0 }"
        prop="codeToConfirmChange"
        ref="changePhoneCode2"
        :autoLink="false"
      >
        <code-input
          :phone="changeSecurityPhoneForm.newPhoneNumber"
          @getCode="getCode"
        />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 1, offset: 10 }">
        <a-button type="primary" @click="handleSubmission">提交</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import CodeInput from "@/components/CodeInput/index.vue";
import { FormModel, Modal } from "ant-design-vue";
import { phoneValid } from "./const";
import UserService from "@/service/UserManagementService";
import { deleteUserMsg } from "@/utils/userMsg/userMsg";
export default Vue.extend({
  components: { CodeInput },
  props: {
    phone: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      labelCol: { span: 10 },
      wrapperCol: { span: 10 },
      userPhone: "1234567890",
      changeSecurityPhoneForm: {
        pwd: "",
        newPhoneNumber: "",
        codeToConfirmChange: "",
      },
      rules: {
        pwd: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur",
          },
        ],
        newPhoneNumber: [
          {
            required: true,
            pattern: phoneValid,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        codeToConfirmChange: [
          {
            required: true,
            len: 6,
            message: "请输入6位短信验证码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getCode(code: string) {
      this.changeSecurityPhoneForm.codeToConfirmChange = code;
      (this.$refs.changePhoneCode2 as any).onFieldBlur();
    },
    isValid() {
      let result;
      (this.$refs.changeSecurityPhoneForm as FormModel).validate((valid) => {
        if (valid) {
          result = true;
        } else {
          result = false;
        }
      });
      return result;
    },
    async handleSubmission() {
      const that = this;
      if (this.isValid()) {
        const ret = await UserService.getInstance().changePhone({
          phone: this.changeSecurityPhoneForm.newPhoneNumber,
          pwd: this.changeSecurityPhoneForm.pwd,
          verify_code: this.changeSecurityPhoneForm.codeToConfirmChange,
        });
        if (ret.code == 200) {
          deleteUserMsg();
          Modal.info({
            title: "手机号修改成功",
            content: "请重新登陆",
            onOk() {
              that.$router.push({ name: "login" });
            },
          });
        } else {
          Modal.error({
            title: "手机号修改失败",
            content: ret.msg,
            onOk() {},
          });
        }
        console.log(ret);
      } else return;
    },
  },
});
</script>

<style scoped>
</style>