<script setup lang="ts" generic="T extends Record<string, any>">
import { computed, provide } from 'vue';

import { useViewVisible } from '@/hooks/view-visible';
import { t } from '@/i18n';
import { CLOSE_MODAL_GUIDANCE, FINISH_MODAL_GUIDANCE, IS_USED_IN_MODAL_GUIDANCE } from '@/constants/inject-key';

interface Props {
  title?: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  finish: [];
}>();

const { visible, showView, hideView } = useViewVisible();

const modalTitle = computed(() => {
  return props.title ?? t('common.add');
});

const finish = () => {
  emit('finish');
};

provide(IS_USED_IN_MODAL_GUIDANCE, true);
provide(CLOSE_MODAL_GUIDANCE, hideView);
provide(FINISH_MODAL_GUIDANCE, finish);

defineExpose({
  showView,
  hideView,
});
</script>

<template>
  <AModal
    v-model:open="visible"
    wrap-class-name="modal-guidance-modal"
    :title="modalTitle"
    :width="1140"
    centered
    :footer="null"
    :mask-closable="false"
    destroy-on-close
  >
    <slot></slot>
  </AModal>
</template>

<style lang="scss">
.modal-guidance-modal {
  .ant-modal-content {
    height: 638px;
  }

  .ant-modal-body {
    height: calc(100% - 40px);
  }
}
</style>
