<template>
  <el-dialog
    v-model="visible"
    title="修改密码"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @open="modalBeforeOpen"
    width="500px"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <!-- <el-form-item prop="oldPassword" label="旧密码">
        <el-input
          v-model.trim="formData.oldPassword"
          type="password"
          placeholder="请输入旧密码"
          show-password
          clearable
        >
        </el-input>
      </el-form-item> -->
      <el-form-item prop="password" label="新密码">
        <el-input
          v-model.trim="formData.password"
          type="password"
          placeholder="请输入新密码"
          show-password
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="rePassword" label="再次密码">
        <el-input
          v-model.trim="formData.rePassword"
          type="password"
          placeholder="请再次输入新密码"
          show-password
          clearable
        >
        </el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" :disabled="loading" @click="confirm"
        >确认</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { reactive, ref, nextTick } from 'vue';
  import type { FormInstance, FormRules } from 'element-plus';
  import { password } from '@/utils/formRules';
  import useLoading from '@/hooks/loading';
  import { updatePwd } from '@/api/user';
  import { ElMessage } from 'element-plus';
  // import { getBase64 } from '@/utils/crypto';
  import useModal from '@/hooks/modal';

  defineOptions({
    name: 'ResetPwd',
  });

  /* modal */
  const { visible, open, close } = useModal();
  defineExpose({ open, close });

  const emit = defineEmits(['modified', 'cancel']);

  const defaultFormData = {
    // oldPassword: '',
    password: '',
    rePassword: '',
  };
  type FormDataType = typeof defaultFormData;

  const formRef = ref<FormInstance>();
  const formData = reactive<FormDataType>({ ...defaultFormData });
  const passwordRule: FormRules['password'] = [...password];
  const rules: FormRules = {
    // oldPassword: password,
    password: [
      ...passwordRule,
      // {
      //   validator: (value, callback) => {
      //     if (value === formData.oldPassword) {
      //       callback('新旧密码不可以相同');
      //     } else {
      //       callback();
      //     }
      //   },
      // },
    ],
    rePassword: [
      ...passwordRule,
      {
        validator: (value, callback) => {
          if (value !== formData.password) {
            callback('两次输入的密码不一致');
          } else {
            callback();
          }
        },
      },
    ],
  };

  /* confirm */
  const { loading, setLoading } = useLoading();
  async function confirm() {
    const err = await formRef.value?.validate();
    if (err) return;

    setLoading(true);
    const datas = {
      // oldPassword: formData.oldPassword,
      password: formData.password,
    };
    let res = true;
    await updatePwd(datas).catch(() => {
      res = false;
    });
    setLoading(false);
    if (!res) return;
    ElMessage.success('修改成功！');
    emit('modified', datas);
    close();
  }

  function cancel() {
    emit('cancel');
    close();
  }

  function modalBeforeOpen() {
    formRef.value?.resetFields();
    nextTick(() => {
      formRef.value?.clearValidate();
    });
  }
</script>
