<template>
	<div class="workflow-list-panel">
		<div class="panel-header">
			<el-tabs v-model="activeTab" class="workflow-tabs">
				<el-tab-pane label="我的工作流" name="user"></el-tab-pane>
				<el-tab-pane label="模板工作流" name="template"></el-tab-pane>
			</el-tabs>
		</div>
		<div class="workflow-list-content" v-loading="loading">
			<el-empty v-if="currentList.length === 0" description="暂无工作流" :image-size="60" />
			<div v-else class="workflow-items">
				<div
					v-for="workflow in currentList"
					:key="workflow.id"
					class="workflow-item"
					:class="{ active: currentEditingId === workflow.id }"
					@click="emit('edit', workflow)"
				>
					<div class="workflow-item-content">
						<div class="workflow-item-name">{{ workflow.flowName || workflow.flowTemplateName || '未命名工作流' }}</div>
						<div class="workflow-item-desc">{{ workflow.description || '暂无描述' }}</div>
					</div>
					<div class="workflow-item-actions">
						<el-button type="primary" link size="small" @click.stop="emit('edit', workflow)">编辑</el-button>
						<el-button type="danger" link size="small" @click.stop="emit('delete', workflow)">删除</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { WorkflowItem } from '/@/api/settings/creation';

const props = defineProps<{
	userWorkflowList: WorkflowItem[];
	templateWorkflowList: WorkflowItem[];
	currentEditingId: string | null;
	loading: boolean;
}>();

const emit = defineEmits<{
	(e: 'edit', workflow: WorkflowItem): void;
	(e: 'delete', workflow: WorkflowItem): void;
	(e: 'create'): void;
}>();

const activeTab = ref<'user' | 'template'>('user');

const currentList = computed(() => {
	return activeTab.value === 'user' ? props.userWorkflowList : props.templateWorkflowList;
});
</script>

<style scoped lang="scss">
.workflow-list-panel {
	background: #ffffff;
	border-radius: 10px;
	padding: 16px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	border: 1px solid #e6eaf0;

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;

	:deep(.el-button) {
		border-radius: 6px;
		font-weight: 500;
		font-size: 12px;
		padding: 6px 12px;
	}
}

.workflow-tabs {
	flex: 1;

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

	:deep(.el-tabs__nav-wrap::after) {
		display: none;
	}

	:deep(.el-tabs__item) {
		font-size: 14px;
		font-weight: 600;
		color: #64748b;
		padding: 0 16px;
		height: 36px;
		line-height: 36px;

		&.is-active {
			color: #3b82f6;
		}
	}

	:deep(.el-tabs__active-bar) {
		background-color: #3b82f6;
	}
}

.workflow-list-content {
	flex: 1;
	overflow-y: auto;

	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-track {
		background: rgba(102, 126, 234, 0.05);
		border-radius: 10px;
	}

	&::-webkit-scrollbar-thumb {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 10px;
	}
}

.workflow-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.workflow-item {
	padding: 12px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	background: #fff;

	&:hover {
		border-color: #c5d2e6;
		box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
	}

	&.active {
		border-color: #3b82f6;
		background: #eff6ff;
	}
}

.workflow-item-content {
	margin-bottom: 8px;
}

.workflow-item-name {
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.workflow-item-desc {
	font-size: 12px;
	color: #64748b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.workflow-item-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;

	:deep(.el-button) {
		border-radius: 6px;
		font-weight: 500;
		font-size: 12px;
		padding: 4px 8px;
	}
}
}
</style>
