<template>
	<el-drawer
		v-model="visible"
		:title="drawerTitle"
		direction="rtl"
		size="72%"
		:destroy-on-close="true"
		class="skill-result-drawer"
	>
		<template #header>
			<div class="drawer-header">
				<div class="drawer-header__icon" :class="statusClass">
					<el-icon v-if="execution?.status === 'done'" :size="16"><Check /></el-icon>
					<el-icon v-else :size="16"><CloseBold /></el-icon>
				</div>
				<div class="drawer-header__info">
					<div class="drawer-header__title">{{ execution?.label || execution?.name || '执行结果' }}</div>
					<div class="drawer-header__sub">Skill 执行结果详情</div>
				</div>
			</div>
		</template>

		<div class="skill-result-viewer" v-if="execution">
			<doc-parser-result
				v-if="execution.name === 'doc_parser'"
				:result="parsedResult"
				:task-id="taskId"
			/>
			<id-card-result
				v-else-if="execution.name === 'id_card_ocr'"
				:result="parsedResult"
			/>
			<audit-report-result
				v-else-if="execution.name === 'audit_report'"
				:result="parsedResult"
			/>
			<generic-result
				v-else
				:result="parsedResult"
				:skill-name="execution.label || execution.name"
			/>
		</div>

		<el-empty v-else description="暂无执行结果" />
	</el-drawer>
</template>

<script lang="ts" setup>
defineOptions({ name: 'skill-result-viewer' });

import { computed } from 'vue';
import { Check, CloseBold } from '@element-plus/icons-vue';
import DocParserResult from './skill-results/doc-parser-result.vue';
import IdCardResult from './skill-results/id-card-result.vue';
import AuditReportResult from './skill-results/audit-report-result.vue';
import GenericResult from './skill-results/generic-result.vue';

const props = defineProps<{
	execution: any;
}>();

const visible = defineModel<boolean>('visible', { default: false });

const drawerTitle = computed(() => {
	if (!props.execution) return '执行结果';
	return `${props.execution.label || props.execution.name} - 执行结果`;
});

const statusClass = computed(() => {
	return props.execution?.status === 'done' ? 'is-success' : 'is-error';
});

const parsedResult = computed(() => {
	const result = props.execution?.result;
	if (!result) return null;

	// 解析 JSON 字符串
	let obj = result;
	if (typeof obj === 'string') {
		try { obj = JSON.parse(obj); } catch { return result; }
	}

	// 处理 LangChain ToolMessage 序列化格式:
	// { id: ["langchain_core","messages","ToolMessage"], lc: 1, type: "constructor", kwargs: { content: "..." } }
	if (obj?.type === 'constructor' && obj?.kwargs?.content) {
		const content = obj.kwargs.content;
		if (typeof content === 'string') {
			try { return JSON.parse(content); } catch { return content; }
		}
		return content;
	}

	return obj;
});

const taskId = computed(() => {
	const obj = parsedResult.value;
	if (!obj || typeof obj !== 'object') return '';
	return obj.taskId || '';
});
</script>

<style lang="scss" scoped>
.skill-result-drawer {
	:deep(.el-drawer__header) {
		margin-bottom: 0;
		padding: 14px 20px;
		border-bottom: 1px solid var(--el-border-color-extra-light);
		background: var(--el-fill-color-lighter);
	}
	:deep(.el-drawer__body) {
		padding: 20px;
		overflow-y: auto;
		background: var(--el-bg-color-page);
	}
	:deep(.el-drawer__close-btn) {
		top: 18px;
	}
}

.drawer-header {
	display: flex;
	align-items: center;
	gap: 12px;

	&__icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		&.is-success {
			background: rgba(82, 196, 26, 0.1);
			color: #52c41a;
		}
		&.is-error {
			background: rgba(245, 108, 108, 0.1);
			color: #f56c6c;
		}
	}

	&__info {
		min-width: 0;
	}

	&__title {
		font-size: 15px;
		font-weight: 600;
		color: var(--el-text-color-primary);
		line-height: 1.3;
	}

	&__sub {
		font-size: 12px;
		color: var(--el-text-color-placeholder);
		margin-top: 1px;
	}
}

.skill-result-viewer {
	min-height: 200px;
}
</style>
