<template>
  <div class="grid grid-cols-[20px_1fr_auto] items-center gap-2 p-2 rounded-lg bg-card border border-border shadow" draggable="true" data-task :data-id="taskId" @dragstart="onDragStart">
    <div class="opacity-70 select-none cursor-grab">⋮⋮</div>
    <div>
      <div class="font-semibold">{{ task?.title || '(无标题)' }}</div>
      <div class="text-xs text-slate-400">步骤: {{ stat }}</div>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-[11px] px-2 py-0.5 rounded-full border border-black/30 whitespace-nowrap" :style="chipStyle">{{ categoryTitle }}</span>
      <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="openModal">编辑</button>
    </div>
  </div>
  <TaskModal v-if="open" :task-id="taskId" @close="open=false" />
</template>

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

const store = useBoardStore()
const props = defineProps<{ taskId: string }>()
const task = computed(() => store.taskById(props.taskId))
const category = computed(() => store.categoryById(task.value?.category as string))
const categoryTitle = computed(() => category.value?.title || '未分类')
const chipStyle = computed(() => ({ background: `#${(category.value?.color||'888888')}33`, borderColor: `#${(category.value?.color||'888888')}` }))
const stat = computed(() => {
  const steps = task.value?.steps || []
  const done = steps.filter(s => s.done).length
  return `${done}/${steps.length}`
})
const open = ref(false)
function openModal(){ open.value = true }
function onDragStart(e: DragEvent) {
  e.dataTransfer?.setData('text/task', props.taskId)
  e.dataTransfer!.effectAllowed = 'move'
  emit('dragging', true)
}
const emit = defineEmits<{ (e:'dragging', v:boolean): void }>()
</script>
