<template>
  <div>
    <template v-if="userPhone">
      <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: 3, offset: 0 }"
          prop="pwd"
        >
          <a-input
            v-model="changeSecurityPhoneForm.pwd"
            type="password"
            class="w-200"
          />
        </a-form-model-item>
        <a-form-model-item
          label="新手机号码"
          prop="newPhoneNumber"
          :wrapper-col="{ span: 3, offset: 0 }"
        >
          <a-input
            v-model="changeSecurityPhoneForm.newPhoneNumber"
            class="w-200"
          />
        </a-form-model-item>
        <a-form-model-item
          label="验证码"
          :wrapper-col="{ span: 3, 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>
    </template>
    <!-- 首次登陆需绑定手机 -->
    <template v-else>
      <p class="text-2xl font-bold mb-5">绑定手机</p>
      <a-form-model
        :model="confrimPhoneForm"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        ref="confirmPhoneForm"
        :rules="rule1"
      >
        <a-form-model-item
          label="手机号码"
          :wrapper-col="{ span: 3, offset: 0 }"
          prop="phone"
        >
          <a-input class="w-200" v-model="confrimPhoneForm.phone" />
        </a-form-model-item>
        <a-form-model-item
          label="账号密码"
          :wrapper-col="{ span: 3, offset: 0 }"
          prop="pwd"
        >
          <a-input
            v-model="confrimPhoneForm.pwd"
            class="w-200"
            type="password"
          />
        </a-form-model-item>
        <a-form-model-item
          label="验证码"
          :wrapper-col="{ span: 3, offset: 0 }"
          prop="verify_code"
          ref="changePhoneCode2"
          :autoLink="false"
        >
          <code-input :phone="confrimPhoneForm.phone" @getCode="getCode" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 1, offset: 11 }">
          <a-button type="primary" @click="handleSubmission">提交</a-button>
        </a-form-model-item>
      </a-form-model>
    </template>
  </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, getUserMsg, setUserMsg } from "@/utils/userMsg/userMsg";
import RouterUtil from "@/utils/router";
export default Vue.extend({
  components: { CodeInput },
  props: {
    phone: {
      type: String,
      default: "",
    },
  },
  mounted() {
    if(!this.userPhone){
      Modal.info({
        title: "安全设置",
        content: "首次登陆，请先绑定手机号！",
      });
    }
  },
  data() {
    const userPhone = getUserMsg()?.phone;
    return {
      labelCol: { span: 10 },
      wrapperCol: { span: 10 },
      userPhone,
      changeSecurityPhoneForm: {
        pwd: "",
        newPhoneNumber: "",
        codeToConfirmChange: "",
      },
      confrimPhoneForm: {
        phone: "",
        pwd: "",
        verify_code: "",
      },
      rule1: {
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            pattern: phoneValid,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        verify_code: [
          {
            required: true,
            len: 6,
            message: "请输入6位短信验证码",
            trigger: "blur",
          },
        ],
      },
      rules: {
        pwd: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur",
          },
        ],
        newPhoneNumber: [
          {
            required: true,
            pattern: phoneValid,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        codeToConfirmChange: [
          {
            required: true,
            len: 6,
            message: "请输入6位短信验证码",
            trigger: "blur",
          },
        ],
      },
      show: true,
    };
  },
  methods: {
    getCode(code: string) {
      if (this.userPhone) {
        this.changeSecurityPhoneForm.codeToConfirmChange = code;
      } else {
        this.confrimPhoneForm.verify_code = code;
      }
      (this.$refs.changePhoneCode2 as any).onFieldBlur();
    },
    isValid() {
      let result;
      let form;
      if (this.userPhone) {
        form = this.$refs.changeSecurityPhoneForm as FormModel;
      } else {
        form = this.$refs.confirmPhoneForm as FormModel;
      }
      form.validate((valid) => {
        if (valid) {
          result = true;
        } else {
          result = false;
        }
      });
      return result;
    },
    async handleSubmission() {
      const that = this;
      if (this.isValid()) {
        //换绑手机
        if (this.userPhone) {
          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() {
                const role = getUserMsg()?.newRole
                window.localStorage.clear()
                RouterUtil.getInstance().gotoLogin(role)
              },
            });
          } else {
            Modal.error({
              title: "手机号修改失败",
              content: ret.msg,
              onOk() {},
            });
          }
        } else {
          // 绑定手机
          const ret = await UserService.getInstance().adminAddPhone({
            phone: this.confrimPhoneForm.phone,
            pwd: this.confrimPhoneForm.pwd,
            verify_code: this.confrimPhoneForm.verify_code,
          });
          if (ret.code == 200) {
            Modal.info({
              title: "安全设置",
              content: "手机号绑定成功",
            });
            // 设置localstroage
            this.userPhone = this.confrimPhoneForm.phone;
            const { ...iUserMsg } = getUserMsg();
            setUserMsg({
              token: iUserMsg.token,
              newRole: iUserMsg.newRole,
              level: iUserMsg.level,
              phone: this.userPhone,
              userType: iUserMsg.userType,
            });
          } else {
            Modal.error({
              title: "手机号修改失败",
              content: ret.msg,
              onOk() {},
            });
          }
        }
      } else return;
    },
  },
});
</script>

<style scoped>
.w-200 {
  width: 200px;
}
</style>