<template>
  <div>
    <p class="text-2xl font-bold mb-5">修改密码</p>
    <a-form-model
      :model="changeByCodeForm"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      ref="changeByCodeForm"
      :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="验证码"
        prop="code"
        ref="changePwdCode"
        :autoLink="false"
        :wrapper-col="{ span: 4, offset: 0 }"
      >
        <code-input :phone="userPhone" @getCode="getCode" />
      </a-form-model-item>
      <a-form-model-item
        label="新密码"
        prop="newPass"
        :wrapper-col="{ span: 4, offset: 0 }"
      >
        <a-input
          v-model="changeByCodeForm.newPass"
          placeholder="新密码6-20位"
          class="w-200"
          type="password"
        />
      </a-form-model-item>
      <a-form-model-item
        label="确认密码"
        prop="verifyPass"
        :wrapper-col="{ span: 4, offset: 0 }"
      >
        <a-input
          v-model="changeByCodeForm.verifyPass"
          placeholder="再次确认密码"
          class="w-200"
          type="password"
        />
      </a-form-model-item>
    </a-form-model>
    <a-button type="primary" @click="handleSubmission">提交</a-button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { FormModel } from "ant-design-vue";
import codeInput from "@/components/CodeInput/index.vue";
import UserService from "@/service/UserManagementService";
import { deleteUserMsg } from "@/utils/userMsg/userMsg";
import { Modal } from "ant-design-vue"

export default Vue.extend({
  components: { codeInput },
  props: {
    phone: {
      type: String,
      default: "",
    },
  },
  data() {
    let changeByCodeForm = {
      code: "",
      newPass: "",
      verifyPass: "",
    };
    let validatePass = (rule: any, value: string, callback: Function) => {
      if (value === "") {
        return;
      } else if (value !== changeByCodeForm.newPass) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      labelCol: { span: 10 },
      wrapperCol: { span: 10 },
      changeByCodeForm,
      rules: {
        code: [
          {
            required: true,
            len: 6,
            message: "请输入6位短信验证码",
            trigger: "blur",
          },
        ],
        newPass: [
          {
            required: true,
            min: 6,
            max: 20,
            message: "请输入6-20位密码",
            trigger: "blur",
          },
        ],
        verifyPass: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
      },
      smsCount: 60,
      smsLock: false,
      userPhone: "15011111111",
      timerId1: 0,
    };
  },
  methods: {
    isValid(): Boolean {
      let isValid = false;
      (this.$refs.changeByCodeForm as FormModel).validate((valid) => {
        if (valid) {
          isValid = true;
        }
      });
      return isValid;
    },
    getCode(code: string) {
      this.changeByCodeForm.code = code;
      (this.$refs.changePwdCode as any).onFieldBlur();
    },
    async handleSubmission() {
      const that = this 
      if (this.isValid()) {
        const ret = await UserService.getInstance().changePwd({
          new_pwd: this.changeByCodeForm.newPass,
          verify_code: this.changeByCodeForm.code,
          phone: this.userPhone,
          // phone:"",
        });
        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>
.ant-tabs {
  margin: 0 auto;
}
.w-200 {
  width: 200px;
}
</style>