<template>
  <div class="design-content-layout-wrap">
    <div class="pane left-pane" :style="{ width: paneWidths.left + 'px' }">
      <slot name="left"></slot>
    </div>

    <div class="resizer vertical-resizer" @mousedown="startResize('horizontal', $event)">
      <!-- <div class="resizer-handle"></div> -->
    </div>

    <div class="pane right-pane">
      <div class="pane top-pane" :style="{ height: paneHeights.top + 'px' }">
        <slot name="top"></slot>
      </div>

      <div class="resizer horizontal-resizer" @mousedown="startResize('vertical', $event)">
        <!-- <div class="resizer-handle"></div> -->
      </div>

      <div class="pane bottom-pane">
        <slot name="bottom"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 定义面板尺寸的响应式变量
const paneWidths = ref({
  left: 880 + 64,
  right: 716 // 1600 - 600 - 8 (分隔条宽度)
})

const paneHeights = ref({
  top: 400,
  bottom: 396 // 800 - 400 - 8 (分隔条高度)
})

// 拖拽状态变量
const resizing = ref(false)
const resizingDirection = ref('')
const startPosition = ref({ x: 0, y: 0 })
const initialSizes = ref({
  left: 0,
  right: 0,
  top: 0,
  bottom: 0
})

// 开始拖拽
const startResize = (direction, event) => {
  resizing.value = true
  resizingDirection.value = direction

  // 记录初始位置
  startPosition.value = {
    x: event.clientX,
    y: event.clientY
  }

  // 记录初始尺寸
  initialSizes.value = {
    left: paneWidths.value.left,
    right: paneWidths.value.right,
    top: paneHeights.value.top,
    bottom: paneHeights.value.bottom
  }

  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
}

// 处理拖拽
const handleResize = (event) => {
  if (!resizing.value) return

  if (resizingDirection.value === 'horizontal') {
    // 处理左右拖拽
    const deltaX = event.clientX - startPosition.value.x
    const newLeft = initialSizes.value.left + deltaX
    const newRight = initialSizes.value.right - deltaX

    // 限制最小宽度
    const minWidth = 100
    if (newLeft >= minWidth && newRight >= minWidth) {
      paneWidths.value.left = newLeft
      paneWidths.value.right = newRight
    }
  } else {
    // 处理上下拖拽
    const deltaY = event.clientY - startPosition.value.y
    const newTop = initialSizes.value.top + deltaY
    const newBottom = initialSizes.value.bottom - deltaY

    // 限制最小高度
    const minHeight = 100
    if (newTop >= minHeight && newBottom >= minHeight) {
      paneHeights.value.top = newTop
      paneHeights.value.bottom = newBottom
    }
  }
}

// 停止拖拽
const stopResize = () => {
  resizing.value = false
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
}

// 添加全局样式，防止拖拽时选中文本
onMounted(() => {
  document.addEventListener('mousemove', (e) => {
    if (resizing.value) {
      e.preventDefault()
    }
  })
})

// 清理事件监听
onUnmounted(() => {
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
})
</script>

<style scoped>
.design-content-layout-wrap {
  display: flex;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  border: 1px solid #444;
}

.pane {
  overflow: auto;
  box-sizing: border-box;
  position: relative;
}

.pane-content {
  padding: 20px;
  color: #d4d4d4;
  height: calc(100% - 52px);
  overflow-y: auto;
}

.left-pane {
  background: #242529;
}

.right-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.top-pane {
  min-height: 100px;
  background: #151515;
}

.bottom-pane {
  min-height: 100px;
  background: #474747;
  display: flex;
  flex: 1;
}

.resizer {
  background: #333;
  position: relative;
  transition: background-color 0.2s;
  z-index: 1;
}

.resizer:hover {
  background: var(--ds-color-primary);
}

.resizer:active {
  background: var(--ds-color-primary);
}

.vertical-resizer {
  width: 2px;
  cursor: col-resize;
}

.horizontal-resizer {
  height: 2px;
  cursor: row-resize;
  width: 100%;
}

/* .resizer-handle {
  position: absolute;
  background: red;
  border-radius: 4px;
  transition: all 0.2s;
} */

/* .vertical-resizer .resizer-handle {
  width: 2px;
  height: 40px;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
}

.horizontal-resizer .resizer-handle {
  height: 4px;
  width: 40px;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
} */

/* .resizer:hover .resizer-handle {
  background: #fff;
} */
</style>
