<script setup>
import { computed, onUnmounted, watch } from 'vue'

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  /** 弹框标题 */
  title: { type: String, default: '' },
  /** 面板宽度，如 1400px / 92% / min(1400px, 96vw) */
  width: { type: String, default: '1400px' },
  /** 面板高度；不传则按内容撑开，受 maxHeight 限制 */
  height: { type: String, default: '' },
  /** 最大宽度 */
  maxWidth: { type: String, default: '96vw' },
  /** 最大高度 */
  maxHeight: { type: String, default: '92vh' },
  /** 点击遮罩关闭 */
  closeOnClickMask: { type: Boolean, default: true },
  /** Esc 关闭 */
  closeOnEsc: { type: Boolean, default: true },
  /** 是否显示右上角关闭按钮 */
  showClose: { type: Boolean, default: true }
})

const emit = defineEmits(['update:modelValue', 'open', 'close'])

const visible = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v)
})

const panelStyle = computed(() => {
  const style = {
    width: props.width,
    maxWidth: props.maxWidth,
    maxHeight: props.maxHeight
  }
  if (props.height) {
    style.height = props.height
  }
  return style
})

function close() {
  if (!visible.value) {
    return
  }
  visible.value = false
  emit('close')
}

function onMaskClick() {
  if (props.closeOnClickMask) {
    close()
  }
}

function onKeydown(e) {
  if (e.key === 'Escape' && props.closeOnEsc && visible.value) {
    close()
  }
}

watch(visible, (open) => {
  if (open) {
    window.addEventListener('keydown', onKeydown)
    emit('open')
  } else {
    window.removeEventListener('keydown', onKeydown)
  }
})

onUnmounted(() => {
  window.removeEventListener('keydown', onKeydown)
})

defineExpose({ close })
</script>

<template>
  <Teleport to="body">
    <div v-if="visible" class="screen-modal-mask" @click.self="onMaskClick">
      <div
        class="screen-modal"
        role="dialog"
        aria-modal="true"
        :aria-label="title || '弹框'"
        :style="panelStyle"
      >
        <button
          v-if="showClose"
          type="button"
          class="screen-modal__close"
          aria-label="关闭"
          @click="close"
        >
          ×
        </button>
        <div v-if="title || $slots.title" class="screen-modal__title">
          <slot name="title">{{ title }}</slot>
        </div>
        <div class="screen-modal__body">
          <slot />
        </div>
        <div v-if="$slots.footer" class="screen-modal__footer">
          <slot name="footer" />
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.screen-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(2, 18, 15, 0.72);
  backdrop-filter: blur(2px);
}

.screen-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid rgba(69, 240, 184, 0.45);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(4, 48, 40, 0.96) 0%, rgba(3, 28, 24, 0.98) 100%);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(50, 230, 170, 0.12);
}

.screen-modal::before,
.screen-modal::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(69, 240, 184, 0.85);
  border-style: solid;
  pointer-events: none;
  z-index: 1;
}

.screen-modal::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.screen-modal::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.screen-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(61, 217, 176, 0.28);
  border-radius: 4px;
  font-size: 22px;
  line-height: 1;
  color: #a8d4c8;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.screen-modal__close:hover {
  color: #e8eef5;
  background: rgba(69, 240, 184, 0.15);
  border-color: rgba(69, 240, 184, 0.55);
}

.screen-modal__title {
  flex-shrink: 0;
  padding: 16px 52px 14px 22px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(61, 217, 176, 0.22);
  background: linear-gradient(90deg, rgba(69, 240, 184, 0.1) 0%, transparent 55%);
}

.screen-modal__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 18px;
  overflow: hidden;
}

.screen-modal__footer {
  flex-shrink: 0;
  padding: 0 20px 16px;
}
</style>
