<template>
	<div class="audit-report-result">
		<div class="report-container" v-if="markdown">
			<div class="report-toolbar">
				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
				<span>审核报告</span>
				<el-button size="small" round class="copy-btn" @click="copyReport">
					复制报告
				</el-button>
			</div>
			<div class="report-body">
				<cl-preview-md :content="markdown" />
			</div>
		</div>
		<div class="empty-state" v-else>
			<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" opacity="0.25"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
			<span>暂无审核报告内容</span>
		</div>
	</div>
</template>

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

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

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

const markdown = computed(() => {
	if (!props.result) return '';
	if (props.result.reportMarkdown) return props.result.reportMarkdown;
	if (props.result.kwargs?.content) {
		try {
			const inner = typeof props.result.kwargs.content === 'string'
				? JSON.parse(props.result.kwargs.content)
				: props.result.kwargs.content;
			if (inner?.reportMarkdown) return inner.reportMarkdown;
		} catch { /* ignore */ }
	}
	if (typeof props.result === 'string') return props.result;
	return '';
});

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

<style lang="scss" scoped>
.audit-report-result {
	.report-container {
		background: var(--el-bg-color);
		border: 1px solid var(--el-border-color-extra-light);
		border-radius: 14px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
	}

	.report-toolbar {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 8px 14px;
		font-size: 11px;
		font-weight: 600;
		color: var(--el-text-color-placeholder);
		text-transform: uppercase;
		letter-spacing: 0.8px;
		border-bottom: 1px solid var(--el-border-color-extra-light);
		background: var(--el-fill-color-lighter);

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

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

	.report-body {
		padding: 20px 24px;
		max-height: 70vh;
		overflow-y: auto;
		line-height: 1.85;
		font-size: 14px;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding: 60px 0;
		color: var(--el-text-color-placeholder);
		font-size: 13px;
	}
}
</style>
