<template>
	<div class="generic-result">
		<div class="result-header">
			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
			<span>{{ skillName }} 执行结果</span>
			<el-button
				v-if="formatted !== '无数据'"
				size="small"
				round
				class="copy-btn"
				@click="copyText"
			>
				复制
			</el-button>
		</div>
		<div class="result-body">
			<pre class="json-block">{{ formatted }}</pre>
		</div>
	</div>
</template>

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

import { computed } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps<{
	result: any;
	skillName: string;
}>();

const formatted = computed(() => {
	if (!props.result) return '无数据';
	if (typeof props.result === 'string') return props.result;
	return JSON.stringify(props.result, null, 2);
});

function copyText() {
	navigator.clipboard.writeText(formatted.value).then(() => {
		ElMessage({ message: '已复制', type: 'success', duration: 1500 });
	}).catch(() => {
		ElMessage.error('复制失败');
	});
}
</script>

<style lang="scss" scoped>
.generic-result {
	.result-header {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		font-weight: 600;
		color: var(--el-text-color-secondary);
		margin-bottom: 12px;

		svg { opacity: 0.5; flex-shrink: 0; }

		.copy-btn {
			margin-left: auto;
			font-size: 12px;
			height: 26px;
			padding: 4px 12px;
		}
	}

	.json-block {
		background: var(--el-bg-color);
		border: 1px solid var(--el-border-color-extra-light);
		border-radius: 10px;
		padding: 18px 20px;
		font-size: 12.5px;
		line-height: 1.65;
		overflow-x: auto;
		max-height: 65vh;
		overflow-y: auto;
		white-space: pre-wrap;
		word-break: break-all;
		margin: 0;
		font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
		color: var(--el-text-color-regular);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
	}
}
</style>
