<script setup lang="ts">
import type { MjModalProps } from '.'

import obj from '#/utils/obj'

defineOptions({
  name: 'MjModal',
})

// 属性
const props = defineProps<{
  modelValue: boolean
  options: MjModalProps
}>()

const emit = defineEmits(['update:modelValue', 'confirm'])
const value = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
})

const defaultModal = {
  showMaximize: true,
  resize: true,
  destroyOnClose: true,
} as MjModalProps
const modal = computed(() => {
  const cfg = { ...defaultModal } as MjModalProps
  if (props.options.height && props.options.height !== 'auto') {
    cfg.showMinimize = true
  }
  obj.cover(cfg, props.options)
  return cfg
})
</script>

<template>
  <vxe-modal v-model="value" v-bind="modal" @confirm="emit('confirm')">
    <slot></slot>
  </vxe-modal>
</template>
