<template>
	<div class="kanban-view">
		<div v-for="col in columns" :key="col.status" class="kanban-column">
			<div class="kanban-column__header">
				<span>{{ col.label }}</span>
				<el-tag size="small" round>{{ col.items.length }}</el-tag>
			</div>
			<draggable
				v-model="col.items"
				group="kanban"
				item-key="id"
				class="kanban-column__body"
				@end="onDragEnd"
			>
				<template #item="{ element }">
					<div class="kanban-card" @click="openTask(element)">
						<div class="kanban-card__title">{{ element.text }}</div>
						<div class="kanban-card__meta">
							<el-tag
								:type="priorityTagType(element.priority)"
								size="small"
							>
								{{ priorityLabel(element.priority) }}
							</el-tag>
							<span v-if="element.assignee" class="kanban-card__assignee">
								{{ element.assignee }}
							</span>
						</div>
						<div v-if="element.end_date" class="kanban-card__date">
							截止: {{ element.end_date }}
						</div>
					</div>
				</template>
			</draggable>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import draggable from 'vuedraggable';
import { useProjectStore } from '../../store/project';

const emit = defineEmits<{
	(e: 'open-task', taskId: number): void;
}>();

const store = useProjectStore();

type TagType = 'primary' | 'success' | 'info' | 'warning' | 'danger';

const priorityMap: Record<number, string> = { 0: 'P0 紧急', 1: 'P1 高', 2: 'P2 中', 3: 'P3 低' };
const priorityTagMap: Record<number, TagType> = { 0: 'danger', 1: 'warning', 2: 'primary', 3: 'info' };
function priorityLabel(p: number) { return priorityMap[p] || ''; }
function priorityTagType(p: number) { return priorityTagMap[p] || 'info'; }

const columns = ref([
	{ status: 0, label: '待办', items: [] as any[] },
	{ status: 1, label: '进行中', items: [] as any[] },
	{ status: 2, label: '已完成', items: [] as any[] },
	{ status: 3, label: '已关闭', items: [] as any[] },
]);

function syncFromStore() {
	const allTasks = store.tasks;
	columns.value[0].items = allTasks.filter((t: any) => t.status === 0);
	columns.value[1].items = allTasks.filter((t: any) => t.status === 1);
	columns.value[2].items = allTasks.filter((t: any) => t.status === 2);
	columns.value[3].items = allTasks.filter((t: any) => t.status === 3);
}

watch(() => store.ganttData, () => { syncFromStore(); }, { deep: true, immediate: true });

function openTask(element: any) {
	const taskId = parseInt(String(element.id).replace('t_', ''));
	emit('open-task', taskId);
}

async function onDragEnd() {
	const items: any[] = [];
	for (const col of columns.value) {
		col.items.forEach((item: any, index: number) => {
			const taskId = parseInt(String(item.id).replace('t_', ''));
			items.push({ id: taskId, status: col.status, sortOrder: index });
		});
	}
	await store.kanbanSort(items);
}
</script>

<style lang="scss" scoped>
.kanban-view {
	display: flex;
	gap: 16px;
	padding: 10px;
	overflow-x: auto;
	min-height: calc(100vh - 280px);
}

.kanban-column {
	flex: 0 0 280px;
	background: #f5f7fa;
	border-radius: 8px;
	display: flex;
	flex-direction: column;

	&__header {
		padding: 12px 16px;
		font-weight: 600;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e4e7ed;
	}

	&__body {
		flex: 1;
		padding: 8px;
		min-height: 100px;
	}
}

.kanban-card {
	background: #fff;
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 8px;
	cursor: pointer;
	border: 1px solid #e4e7ed;
	transition: box-shadow 0.2s;

	&:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	&__title {
		font-weight: 500;
		margin-bottom: 8px;
	}

	&__meta {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	&__assignee {
		color: #606266;
		font-size: 12px;
	}

	&__date {
		color: #909399;
		font-size: 12px;
		margin-top: 6px;
	}
}
</style>
