<template>
  <div>
    <div v-if="visible" class="modal-overlay">
      <div 
        class="modal-container"
        ref="modalEl"
        :style="{
          width: size.width + 'px',
          height: size.height + 'px',
          left: position.x + 'px',
          top: position.y + 'px'
        }"
      >
        <div class="modal-header" @mousedown="startDrag">
          <div class="modal-title">{{ title }}</div>
          <button class="modal-close" @click="closeModal">×</button>
        </div>
        
        <div class="modal-content">
          <slot></slot>
        </div>
        
        <slot name="footer">
          <div class="footer">
            <el-button @click="closeModal">取消</el-button>
            <el-button type="primary" @click="confirmClick">确定</el-button>
          </div>
        </slot>
        
        <!-- 调整大小的手柄 -->
        <div class="resize-handle resize-handle-n" @mousedown="(e) => startResize(e, 'n')"></div>
        <div class="resize-handle resize-handle-s" @mousedown="(e) => startResize(e, 's')"></div>
        <div class="resize-handle resize-handle-e" @mousedown="(e) => startResize(e, 'e')"></div>
        <div class="resize-handle resize-handle-w" @mousedown="(e) => startResize(e, 'w')"></div>
        <div class="resize-handle resize-handle-ne" @mousedown="(e) => startResize(e, 'ne')"></div>
        <div class="resize-handle resize-handle-nw" @mousedown="(e) => startResize(e, 'nw')"></div>
        <div class="resize-handle resize-handle-se" @mousedown="(e) => startResize(e, 'se')"></div>
        <div class="resize-handle resize-handle-sw" @mousedown="(e) => startResize(e, 'sw')"></div>
      </div>
    </div>
  </div>
    
      
</template>

<script setup>
import { ref, watch } from 'vue';


const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '弹窗'
  },
  width: {
    type: Number,
    default: 400
  },
  height: {
    type: Number,
    default: 300
  }
})

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

const visible = ref(props.modelValue);
const modalEl = ref(null);

// 位置和尺寸状态
const position = ref({ x: 0, y: 0 });
const size = ref({ width: props.width, height: props.height });

// 拖拽状态
const isDragging = ref(false);
const dragStart = ref({ x: 0, y: 0 });

// 调整大小状态
const isResizing = ref(false);
const resizeDir = ref('');
const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0, left: 0, top: 0 });

// 监听modelValue变化
watch(() => props.modelValue, (val) => {
  visible.value = val;
  if (val) {
    // 居中显示
    position.value = {
      x: (window.innerWidth - size.value.width) / 2,
      y: (window.innerHeight - size.value.height) / 2
    };
  }
});

// 开始拖拽
const startDrag = (e) => {
  isDragging.value = true;
  dragStart.value = {
    x: e.clientX - position.value.x,
    y: e.clientY - position.value.y
  };
  
  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', stopDrag);
};

// 拖拽中
const onDrag = (e) => {
  if (!isDragging.value) return;
  
  position.value = {
    x: e.clientX - dragStart.value.x,
    y: e.clientY - dragStart.value.y
  };
};

// 停止拖拽
const stopDrag = () => {
  isDragging.value = false;
  document.removeEventListener('mousemove', onDrag);
  document.removeEventListener('mouseup', stopDrag);
};

// 开始调整大小
const startResize = (e, dir) => {
  isResizing.value = true;
  resizeDir.value = dir;
  resizeStart.value = {
    x: e.clientX,
    y: e.clientY,
    width: size.value.width,
    height: size.value.height,
    left: position.value.x,
    top: position.value.y
  };
  
  document.addEventListener('mousemove', onResize);
  document.addEventListener('mouseup', stopResize);
  e.preventDefault();
};

// 调整大小中
const onResize = (e) => {
  if (!isResizing.value) return;
  
  const deltaX = e.clientX - resizeStart.value.x;
  const deltaY = e.clientY - resizeStart.value.y;
  
  let newWidth = resizeStart.value.width;
  let newHeight = resizeStart.value.height;
  let newX = position.value.x;
  let newY = position.value.y;
  
  switch (resizeDir.value) {
    case 'e':
      newWidth = Math.max(200, resizeStart.value.width + deltaX);
      break;
    case 'w':
      newWidth = Math.max(200, resizeStart.value.width - deltaX);
      newX = resizeStart.value.left + deltaX;
      break;
    case 's':
      newHeight = Math.max(150, resizeStart.value.height + deltaY);
      break;
    case 'n':
      newHeight = Math.max(150, resizeStart.value.height - deltaY);
      newY = resizeStart.value.top + deltaY;
      break;
    case 'se':
      newWidth = Math.max(200, resizeStart.value.width + deltaX);
      newHeight = Math.max(150, resizeStart.value.height + deltaY);
      break;
    case 'sw':
      newWidth = Math.max(200, resizeStart.value.width - deltaX);
      newHeight = Math.max(150, resizeStart.value.height + deltaY);
      newX = resizeStart.value.left + deltaX;
      break;
    case 'ne':
      newWidth = Math.max(200, resizeStart.value.width + deltaX);
      newHeight = Math.max(150, resizeStart.value.height - deltaY);
      newY = resizeStart.value.top + deltaY;
      break;
    case 'nw':
      newWidth = Math.max(200, resizeStart.value.width - deltaX);
      newHeight = Math.max(150, resizeStart.value.height - deltaY);
      newX = resizeStart.value.left + deltaX;
      newY = resizeStart.value.top + deltaY;
      break;
  }
  
  size.value = { width: newWidth, height: newHeight };
  position.value = { x: newX, y: newY };
};

// 停止调整大小
const stopResize = () => {
  isResizing.value = false;
  document.removeEventListener('mousemove', onResize);
  document.removeEventListener('mouseup', stopResize);
};

// 关闭弹窗
const closeModal = () => {
  visible.value = false;
  emit('update:modelValue', false);
  emit('close');
};

// 点确定
const confirmClick = () => {
  emit('confirm');
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal-container {
  background: white;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  min-width: 300px;
  min-height: 200px;
  animation: scaleIn 0.3s ease;
}

.modal-header {
  padding: 16px 20px;
  /* background: #3498db; */
  /* color: white; */
  cursor: move;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.modal-title {
  font-weight: 500;
  font-size: 18px;
}

.modal-close {
  background: none;
  border: none;
  /* color: white; */
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-content {
  padding: 0px 20px 20px 20px ;
  flex: 1;
  overflow: auto;
}

.resize-handle {
  position: absolute;
  background: transparent;
  z-index: 10;
}

.resize-handle-n {
  top: -4px;
  left: 10px;
  right: 10px;
  height: 8px;
  cursor: n-resize;
}

.resize-handle-s {
  bottom: -4px;
  left: 10px;
  right: 10px;
  height: 8px;
  cursor: s-resize;
}

.resize-handle-e {
  top: 10px;
  right: -4px;
  width: 8px;
  bottom: 10px;
  cursor: e-resize;
}

.resize-handle-w {
  top: 10px;
  left: -4px;
  width: 8px;
  bottom: 10px;
  cursor: w-resize;
}

.resize-handle-ne {
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  cursor: ne-resize;
}

.resize-handle-nw {
  top: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  cursor: nw-resize;
}

.resize-handle-se {
  bottom: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  cursor: se-resize;
}

.resize-handle-sw {
  bottom: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  cursor: sw-resize;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.9); 
  }
  to { 
    opacity: 1;
    transform: scale(1); 
  }
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}

.feature-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  width: 250px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.feature-icon {
  font-size: 40px;
  margin-bottom: 15px;
  color: #3498db;
}

.feature-title {
  font-weight: 600;
  margin-bottom: 10px;
  color: #2c3e50;
}

.feature-desc {
  color: #7f8c8d;
  font-size: 14px;
}

.debug-info {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-family: monospace;
  font-size: 14px;
}

.footer {
  display: flex;
  justify-content: end;
  align-items: center;
  margin: 10px;
}
</style>