<template>
  <div id="container" ref="container">
    <div id="left-panel" :>
      左侧面板
    </div>
    <div id="splitter" @mousedown="startDrag">
      ||
    </div>
    <div id="right-panel">
      右侧面板
    </div>
  </div>
</template>

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

const container = ref(null);
const leftWidth = ref(200); // 设置左侧面板的初始宽度

function startDrag(event) {
  const startX = event.clientX;
  const startWidth = leftWidth.value;

  function onMouseMove(e) {
    const currentX = e.clientX;
    leftWidth.value = startWidth + (currentX - startX);

    // Optional: Limit the width so it doesn't go too small or too large
    if (leftWidth.value < 100) leftWidth.value = 100;
    if (leftWidth.value > container.value.offsetWidth - 100) {
      leftWidth.value = container.value.offsetWidth - 100;
    }
  }

  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
}
</script>

<style>
#container {
  display: flex;
  height: 100%;
}

#left-panel {
  background-color: #ddd;
  height: 100%;
  overflow: auto;
}

#splitter {
  background-color: #888;
  width: 5px;
  cursor: col-resize;
  user-select: none; /* Prevent text selection while dragging */
}

#right-panel {
  background-color: #bbb;
  flex-grow: 1;
  height: 100%;
  overflow: auto;
}
</style>