<template>
  <div>
    <BasicModal
      destroyOnClose
      v-bind="$attrs"
      width="30rem"
      :height="75"
      :minHeight="75"
      @register="register"
      :title="t('visual.board.passwordText')"
      @ok="handleSuccess"
      @cancel="handleClose"
    >
      <div>
        <BasicForm @register="registerForm" />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useForm, BasicForm } from '/@/components/Form';
  import { formSchema } from './config';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { ref, unref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const emit = defineEmits(['register', 'success', 'cancel']);

  const persetData = ref<{ [key: string]: string | number }>({});

  const { createMessage } = useMessage();

  const [registerForm, { getFieldsValue, validate }] = useForm({
    labelWidth: 70,
    schemas: formSchema,

    wrapperCol: { span: 12 },
    showActionButtonGroup: false,
  });

  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ loading: true });
    persetData.value = data;
    setModalProps({ loading: false });
  });

  const handleClose = () => {
    emit('cancel');
    closeModal();
  };

  const handleSuccess = async () => {
    await validate();
    const { password: passwordField } = getFieldsValue();
    if (unref(persetData).password != passwordField) {
      createMessage.warning(t('visual.board.errPasswordText'));
      return;
    }
    emit('success', unref(persetData).value);
    closeModal();
  };
</script>
<style lang="less" scoped></style>