<template>
	<el-dialog v-model="visible" title="阶段管理" width="820px">
		<div style="margin-bottom: 12px">
			<el-button type="primary" size="small" @click="addPhase">添加阶段</el-button>
		</div>
		<el-table :data="phases" size="small">
			<el-table-column prop="name" label="阶段名称" min-width="140">
				<template #default="{ row }">
					<el-input v-if="row.editing" v-model="row.name" size="small" />
					<span v-else>{{ row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="分类" width="100">
				<template #default="{ row }">
					<el-input v-if="row.editing" v-model="row.type" size="small" />
					<span v-else>{{ row.type || '-' }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="startDate" label="开始时间" width="150" align="center">
				<template #default="{ row }">
					<el-date-picker
						v-if="row.editing"
						v-model="row.startDate"
						type="date"
						size="small"
						value-format="YYYY-MM-DD"
						placeholder="开始"
						style="width: 130px"
					/>
					<span v-else>{{ row.startDate || '-' }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="endDate" label="结束时间" width="150" align="center">
				<template #default="{ row }">
					<el-date-picker
						v-if="row.editing"
						v-model="row.endDate"
						type="date"
						size="small"
						value-format="YYYY-MM-DD"
						placeholder="结束"
						style="width: 130px"
					/>
					<span v-else>{{ row.endDate || '-' }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="sortOrder" label="排序" width="80" align="center">
				<template #default="{ row }">
					<el-input-number v-if="row.editing" v-model="row.sortOrder" size="small" :min="0" controls-position="right" style="width: 60px" />
					<span v-else>{{ row.sortOrder }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="140" align="center">
				<template #default="{ row }">
					<template v-if="row.editing">
						<el-button link type="primary" size="small" @click="savePhase(row)">保存</el-button>
						<el-button link size="small" @click="cancelEdit(row)">取消</el-button>
					</template>
					<template v-else>
						<el-button link type="primary" size="small" @click="row.editing = true">编辑</el-button>
						<el-button link type="danger" size="small" @click="deletePhase(row)">删除</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue';
import { useCool } from '/@/cool';
import { ElMessage, ElMessageBox } from 'element-plus';

const props = defineProps<{
	modelValue: boolean;
	projectId: number;
}>();

const emit = defineEmits<{
	(e: 'update:modelValue', v: boolean): void;
	(e: 'saved'): void;
}>();

const { service } = useCool();

const visible = computed({
	get: () => props.modelValue,
	set: (v) => emit('update:modelValue', v),
});
const phases = ref<any[]>([]);

watch(() => props.modelValue, (v) => {
	if (v) loadPhases();
});

async function loadPhases() {
	const res = await service.project.phase.list({ projectId: props.projectId });
	phases.value = (res || []).map((p: any) => ({ ...p, editing: false }));
}

function addPhase() {
	phases.value.push({
		id: undefined,
		projectId: props.projectId,
		name: '',
		type: '',
		startDate: null,
		endDate: null,
		sortOrder: phases.value.length,
		editing: true,
	});
}

async function savePhase(row: any) {
	if (!row.name) { ElMessage.warning('请输入阶段名称'); return; }
	if (row.id) {
		await service.project.phase.update(row);
	} else {
		await service.project.phase.add(row);
	}
	ElMessage.success('保存成功');
	row.editing = false;
	emit('saved');
	await loadPhases();
}

function cancelEdit(row: any) {
	if (!row.id) {
		phases.value = phases.value.filter(p => p !== row);
	} else {
		row.editing = false;
		loadPhases();
	}
}

async function deletePhase(row: any) {
	await ElMessageBox.confirm(`确定删除阶段「${row.name}」？`, '提示', { type: 'warning' });
	await service.project.phase.delete({ ids: [row.id] });
	ElMessage.success('删除成功');
	emit('saved');
	await loadPhases();
}
</script>
