<template>
  <Teleport to=".content-wrapper">
    <div class="modal-overlay" v-if="visible" @click="handleOverlayClick">
      <div class="modal-wrapper" @click.stop>
        <div class="modal-container">
          <!-- 标题区域 -->
          <div class="modal-header">
            <h2 class="modal-title">{{ title }}</h2>
            <!-- 右侧插槽 -->
            <div class="modal-header-right">
              <slot name="header-right"></slot>
            </div>
          </div>

          <!-- 内容区域 -->
          <div class="modal-body">
            <slot></slot>
          </div>
        </div>

        <!-- 关闭按钮 -->
        <button class="modal-close" @click="handleClose">
          <CloseBold class="close-symbol" />
        </button>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
// import { defineProps, defineEmits } from 'vue'
import { CloseBold } from '@element-plus/icons-vue'

interface Props {
  visible: boolean
  title: string
}

const props = defineProps<Props>()
const emit = defineEmits<{
  close: []
}>()

const handleClose = () => {
  emit('close')
}

const handleOverlayClick = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  .modal-wrapper {
    position: relative;

    .modal-container {
      width: 3320px;
      height: 1800px;
      background-color: rgba(0, 39, 41, 0.9);
      border: 1px solid #b8e8f0;
      border-radius: 8px;
      box-shadow: inset 0 0 8px rgba(184, 232, 240, 0.15);
      position: relative;

      .modal-header {
        height: 107px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: linear-gradient(to right, rgba(6, 65, 68, 0.6), rgba(255, 255, 255, 0.05));

        .modal-title {
          font-weight: 600;
          font-size: 48px;
          color: #00ffe6;
          line-height: 72px;
          letter-spacing: 2px;
          margin: 0;
          white-space: pre;
        }

        .modal-header-right {
          position: absolute;
          right: 100px;
          display: flex;
          align-items: center;
        }
      }

      .modal-body {
        padding: 40px;
        height: calc(100% - 107px);
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 12px;
        }

        &::-webkit-scrollbar-track {
          background: rgba(0, 255, 230, 0.1);
          border-radius: 6px;
        }

        &::-webkit-scrollbar-thumb {
          background: rgba(0, 255, 230, 0.5);
          border-radius: 6px;
        }

        &::-webkit-scrollbar-thumb:hover {
          background: rgba(0, 255, 230, 0.8);
        }
      }
    }

    .modal-close {
      position: absolute;
      top: -62px;
      right: -62px;
      width: 124px;
      height: 124px;
      border-radius: 50%;
      background: #004b47;
      box-shadow: inset 0px 4px 10px 0px rgba(0, 255, 230, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 10000;

      &:hover {
        background-color: #004b47e3;
        transform: scale(1.1);
      }

      .close-symbol {
        width: 60px;
        color: rgba(120, 254, 224, 0.6);
        font-weight: bold;
        line-height: 1;
      }
    }
  }
}
</style>
