<script setup lang="ts">
import { ref } from 'vue'
import CategoryTree from './modules/CategoryTree.vue'
import QuestionList from './modules/QuestionList.vue'

defineOptions({ name: 'QuestionStore' })

const currentCategory = ref<any>(null)

// Resize logic
const siderWidth = ref(450)
const minWidth = 300
const maxWidth = 800
const isDragging = ref(false)
const startX = ref(0)
const startWidth = ref(0)

function onMouseDown(e: MouseEvent) {
  isDragging.value = true
  startX.value = e.clientX
  startWidth.value = siderWidth.value

  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
  document.body.style.userSelect = 'none'
  document.body.style.cursor = 'col-resize'
}

function onMouseMove(e: MouseEvent) {
  if (!isDragging.value)
    return
  const dx = e.clientX - startX.value
  const newWidth = startWidth.value + dx

  if (newWidth >= minWidth && newWidth <= maxWidth) {
    siderWidth.value = newWidth
  }
}

function onMouseUp() {
  isDragging.value = false
  document.removeEventListener('mousemove', onMouseMove)
  document.removeEventListener('mouseup', onMouseUp)
  document.body.style.userSelect = ''
  document.body.style.cursor = ''
}
</script>

<template>
  <div class="h-full flex overflow-hidden rounded-2xl bg-white shadow-sm">
    <!-- 分类树区域 -->
    <div class="relative h-full flex-shrink-0" :style="{ width: `${siderWidth}px` }">
      <CategoryTree @update:category="val => currentCategory = val" />
      <!-- 分类树宽度调整手柄 -->
      <div
        class="absolute right-0 top-0 z-10 h-full w-1 cursor-col-resize transition-colors active:bg-primary/40 hover:bg-primary/20"
        @mousedown="onMouseDown"
      />
    </div>
    <!-- 题目列表区域 -->
    <div class="h-full flex-1 overflow-hidden">
      <QuestionList :current-category="currentCategory" />
    </div>
  </div>
</template>
