<!--
 * @Author: your name
 * @Date: 2021-06-01 16:06:10
 * @LastEditTime: 2021-06-01 17:07:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \precise_delivery_distribution_front\src\views\Password.vue
-->
<template>
  <div class="page-wrap page-wrap-account page-adplan">
    <div class="form-content">
      <a-form :model="forms" v-bind="layout" :rules="rules" ref="formRef">
        <a-form-item name="opasswd">
          <a-input
            v-model:value="forms.opasswd"
            size="large"
            placeholder="请输入原密码"
          >
          </a-input>
        </a-form-item>
        <a-form-item name="new_passwd">
          <a-input-password
            v-model:value="forms.new_passwd"
            size="large"
            type="password"
            placeholder="请输入密码"
          >
          </a-input-password>
        </a-form-item>
        <a-form-item name="new_passwd_repeat">
          <a-input-password
            v-model:value="forms.new_passwd_repeat"
            size="large"
            type="password"
            placeholder="请再次输入密码"
          >
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            block
            size="large"
            shape="round"
            :loading="loading"
            @click="changePwd"
            >修改密码</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import useFormLayout from "@/hooks/useFormLayout";
import { changePwdApi } from "@/api";
import { message } from "ant-design-vue";
import useApp from "@/hooks/useApp";
import { MutationType } from "@/store/modules/app/_type";

const ForgetPwd = defineComponent({
  setup(props, context) {
    const formLayout = useFormLayout(0);
    const formRef = ref();
    const { store, router } = useApp();

    const data = reactive({
      forms: {
        opasswd: "",
        new_passwd: "",
        new_passwd_repeat: "",
      },
      loading: false,
      layout: formLayout,
    });
    const rules = {
      opasswd: [
        { required: true, message: "请填写原始密码", trigger: "change" },
      ],
      new_passwd: [
        { required: true, message: "请填写密码", trigger: "change" },
      ],
      new_passwd_repeat: [
        { required: true, message: "请二次填写密码", trigger: "change" },
      ],
    };
    const changePwd = async () => {
      formRef.value.validate().then(() => {
        if (data.forms.new_passwd != data.forms.new_passwd_repeat) {
          message.error("2次密码必须保持一致");
          return false;
        }
        if (data.forms.new_passwd.length <= 5) {
          message.error("密码必须大于5位");
          return false;
        }
        changePwdApi(data.forms).then((res: any) => {
          if (!res.code) {
            message.success("修改成功！");
            store.commit(MutationType.setUser, {});
            router.replace("/login");
          }
        });
      });
    };
    return { ...toRefs(data), changePwd, rules, formRef };
  },
});

export default ForgetPwd;
</script>
<style lang="less" scoped>
.form-content {
  width: 600px;
}
</style>
