<template>
  <my-dialog
    :visible="visible"
    @close="emit('update:visible', false)"
    :header="'修改用户密码'"
    :width="500"
    :closeOnOverlayClick="false"
  >
    <t-form ref="formRef" :data="formData" labelWidth="80px" :rules="rules">
      <t-form-item label="新密码" name="newPassword">
        <t-input
          v-model="formData.newPassword"
          type="password"
          clearable
        ></t-input>
      </t-form-item>
    </t-form>
    <template #foot>
      <t-button theme="default" @click="emit('update:visible', false)"
        >取消</t-button
      >
      <t-button theme="primary" @click="save">保存</t-button>
    </template>
  </my-dialog>
</template>
<script setup name="AddUserDialog">
import useClearDialog from '@/hooks/useClearDialog';
import { ref } from 'vue';
import { updateUserPassword } from '@/api/user';
import { getBase64 } from '@/utils/crypto';
const emit = defineEmits(['update:visible', 'success']);
const formRef = ref(null);
const props = defineProps({
  visible: Boolean,
  curRow: Object,
});
const { formData } = useClearDialog(
  {
    newPassword: '',
  },
  props,
  formRef
);
const rules = {
  newPassword: [
    {
      required: true,
      message: '请填写该用户的新密码',
      type: 'error',
      trigger: 'blur',
    },
  ],
};
const updateHandler = () => {
  updateUserPassword({
    newPassword: getBase64(formData.newPassword),
    id: props.curRow.id,
  }).then(() => {
    emit('success');
  });
};
const save = () => {
  formRef.value.validate().then(async (result) => {
    if (result === true) {
      updateHandler();
    }
  });
};
</script>
