<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="修改密码" @ok="handleSubmit">
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { BasicModal, useModalInner } from '/@/components/Modal'
  import { BasicForm, useForm } from '/@/components/Form/index'
  import { passwordFormSchema } from './account.data'
  import { message } from 'ant-design-vue'
  import { editPassword } from '/@/api/sys/user'

  const ID = ref('')
  const emits = defineEmits(['success', 'register'])

  const [registerForm, { resetFields, validate }] = useForm({
    labelWidth: 80,
    baseColProps: { span: 24 },
    schemas: passwordFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 23,
    },
  })

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    ID.value = data.id
    resetFields()
    setModalProps({ confirmLoading: false })
  })

  async function handleSubmit() {
    try {
      const values = await validate()
      if (values.password_confirmation !== values.password) return message.error('两次密码不一致')
      setModalProps({ confirmLoading: true })
      await editPassword(ID.value, values)
      closeModal()
      emits('success')
    } finally {
      setModalProps({ confirmLoading: false })
    }
  }
</script>
