<template>
  <div class="p-3 overflow-auto grid gap-3" :style="gridStyle">
    <div v-for="(col, colIndex) in columns" :key="colIndex" class="flex flex-col gap-3 min-w-[320px]">
      <StageColumn v-for="sid in col" :key="sid" :stage-id="sid" :query="query" :category="category" />
    </div>
  </div>
  <div v-if="!columns.length || !columns[0]?.length" class="text-center text-slate-400 py-10">
    暂无阶段。点击左侧“添加阶段”创建。
  </div>
  <div class="px-3 pb-3">
    <button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="addColumn">添加列</button>
  </div>
  <div class="px-3 pb-3">
    <button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="addStage">添加阶段</button>
  </div>
  
</template>

<script setup lang="ts">
import { useBoardStore } from '~/stores/board'
import StageColumn from './StageColumn.vue'

const store = useBoardStore()
const props = defineProps<{ query: string; category: string | '' }>()
const columns = computed(() => store.board.layout?.columns || [])

const gridStyle = computed(() => ({
  gridAutoFlow: 'column',
  gridAutoRows: '1fr'
}))

function addColumn() {
  if (!store.board.layout.columns) store.board.layout.columns = []
  store.board.layout.columns.push([])
  store.log('column-add', { count: store.board.layout.columns.length })
}
function addStage() {
  const title = prompt('阶段名称？')
  if (!title) return
  const colIndex = store.board.layout.columns.length ? 0 : 0
  store.addStage(title.trim(), colIndex)
}
</script>

