<template>
  <Teleport to="body">
    <div v-if="show" class="modal-backdrop" @click="onBackdropClick">
      <div class="modal" :style="{ width, maxHeight }" @click.stop>
        <header class="modal-header">
          <h3 class="modal-title">{{ title }}</h3>
          <button class="btn btn-ghost" @click="onClose" aria-label="关闭">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
              <path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
            </svg>
          </button>
        </header>
        <div class="modal-body">
          <slot></slot>
        </div>
        <footer v-if="$slots.footer" class="modal-footer">
          <slot name="footer"></slot>
        </footer>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
const props = defineProps({
  show: { type: Boolean, default: false },
  title: { type: String, default: '' },
  width: { type: String, default: '560px' },
  maxHeight: { type: String, default: '85vh' },
  closeOnBackdrop: { type: Boolean, default: true }
})

const emit = defineEmits(['close'])

const onBackdropClick = () => {
  if (props.closeOnBackdrop) emit('close')
}

const onClose = () => emit('close')
</script>

<style scoped>
/* 组件样式已由 components.css 提供 */
</style>
