<template>
	<div class="project-detail" v-loading="loading">
		<!-- 顶部项目信息栏 -->
		<div class="project-detail__header">
			<el-page-header @back="goBack">
				<template #content>
					<div class="project-detail__info">
						<span
							class="project-detail__color"
							:style="{ backgroundColor: project?.color || '#409EFF' }"
						/>
						<span class="project-detail__name">{{ project?.name }}</span>
						<el-tag :type="statusTagType(project?.status)" size="small">
							{{ statusLabel(project?.status) }}
						</el-tag>
					</div>
				</template>
				<template #extra>
					<div class="project-detail__extra">
						<span v-if="project?.ownerName" class="project-detail__owner">
							负责人: {{ project.ownerName }}
						</span>
						<el-progress
							:percentage="project?.progress || 0"
							:stroke-width="8"
							style="width: 150px"
						/>
						<el-button size="small" @click="phaseManagerVisible = true">
							阶段管理
						</el-button>
					</div>
				</template>
			</el-page-header>
		</div>

		<!-- Tab 视图切换 -->
		<el-tabs v-model="activeTab" class="project-detail__tabs">
			<el-tab-pane label="甘特图" name="gantt" lazy>
				<gantt-view @open-task="openTaskDrawer" />
			</el-tab-pane>
			<el-tab-pane label="日历" name="calendar" lazy>
				<calendar-view @open-task="openTaskDrawer" />
			</el-tab-pane>
			<el-tab-pane label="列表" name="table" lazy>
				<table-view @open-task="openTaskDrawer" />
			</el-tab-pane>
			<el-tab-pane label="看板" name="kanban" lazy>
				<kanban-view @open-task="openTaskDrawer" />
			</el-tab-pane>
		</el-tabs>

		<!-- 任务详情抽屉 -->
		<task-drawer
			v-model="taskDrawerVisible"
			:task-id="currentTaskId"
			:project-id="projectId"
			@saved="store.refresh()"
			@open-task="openTaskDrawer"
		/>

		<!-- 阶段管理弹窗 -->
		<phase-manager
			v-model="phaseManagerVisible"
			:project-id="projectId"
			@saved="store.refresh()"
		/>
	</div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useProjectStore } from '../store/project';
import GanttView from './components/gantt.vue';
import CalendarView from './components/calendar.vue';
import TableView from './components/table.vue';
import KanbanView from './components/kanban.vue';
import TaskDrawer from './components/task-drawer.vue';
import PhaseManager from './components/phase-manager.vue';

const route = useRoute();
const router = useRouter();
const store = useProjectStore();

const projectId = computed(() => Number(route.query.id));
const project = computed(() => store.currentProject);
const loading = ref(true);
const activeTab = ref('gantt');
const taskDrawerVisible = ref(false);
const phaseManagerVisible = ref(false);
const currentTaskId = ref<number | null>(null);

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

const statusMap: Record<number, string> = { 0: '未开始', 1: '进行中', 2: '已完成', 3: '已归档' };
const statusTagMap: Record<number, TagType> = { 0: 'info', 1: 'primary', 2: 'success', 3: 'warning' };

function statusLabel(s?: number) { return s !== undefined ? statusMap[s] || '未知' : ''; }
function statusTagType(s?: number) { return s !== undefined ? statusTagMap[s] || 'info' : 'info'; }

function openTaskDrawer(taskId: number) {
	currentTaskId.value = taskId;
	taskDrawerVisible.value = true;
}

function goBack() {
	router.push('/project/list');
}

onMounted(async () => {
	loading.value = true;
	await store.loadProject(projectId.value);
	await store.loadGanttData(projectId.value);
	loading.value = false;
});

onUnmounted(() => {
	store.reset();
});
</script>

<style lang="scss" scoped>
.project-detail {
	padding: 20px;

	&__header {
		margin-bottom: 16px;
	}

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

	&__color {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		display: inline-block;
	}

	&__name {
		font-size: 18px;
		font-weight: 600;
	}

	&__extra {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	&__owner {
		color: #606266;
		font-size: 14px;
	}

	&__tabs {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 200px);

		:deep(.el-tabs__header) {
			flex-shrink: 0;
		}

		:deep(.el-tabs__content) {
			flex: 1;
			overflow: hidden;
		}

		:deep(.el-tab-pane) {
			height: 100%;
			overflow: hidden;
		}
	}
}
</style>
