<template>
	<div class="main-box">
		<!-- 编辑模式 -->
		<div v-if="store.isEditMode" class="edit-panel">
			<v-md-editor
				v-model="store.reportContent"
				height="calc(100% - 40px)"
				:disabled-menus="[]"
				@upload-image="handleUploadImage"
				@save="handleSave"
				left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save"
				right-toolbar="preview toc sync-scroll fullscreen"
			/>
		</div>

		<!-- 预览模式 -->
		<div v-else class="content-box" ref="contentContainerRef" v-html="renderedContent"></div>
	</div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import VMdEditor from "@kangc/v-md-editor";
import "@kangc/v-md-editor/lib/style/base-editor.css";
import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
import "@kangc/v-md-editor/lib/theme/style/vuepress.css";
import Prism from "prismjs";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
import { useMarkdownStream } from "@/hooks/useMarkdownStream";

// 子组件直接获取Pinia Store
// 1. 绑定content渲染容器的ref
const contentContainerRef = ref(null);
const store = useWrittingAsstaintStore();

// 处理按钮点击事件
const handleGlobalClick = (e) => {
	const btn = e.target.closest('.clause-ref-btn');
	if (btn) {
		const clauseId = btn.getAttribute('data-clause');
		if (clauseId) {
			store.highlightClauseId = clauseId;
			// 翻译栏一直显示，所以这里只需要确保它在视图内
		}
	}
};

onMounted(() => {
	window.addEventListener('click', handleGlobalClick);
});

onUnmounted(() => {
	window.removeEventListener('click', handleGlobalClick);
});

defineExpose({
	contentContainerRef
});

// Markdown流处理
const { renderedContent, updateContent } = useMarkdownStream();

// 初始化编辑器
VMdEditor.use(vuepressTheme, { Prism });


// 保存处理
const handleSave = (text, html) => {
	console.log("保存内容:", { markdown: text, html: html });
	store.reportContent = text;
	localStorage.setItem("markdown-content", text);
	ElMessage.success("保存成功！");
};

// 上传图片处理
const handleUploadImage = async (event, insertImage, files) => {
	ElMessage.info("图片上传功能待实现");
	// 实际项目中可调用Pinia中的上传方法
	// await store.uploadImage(files[0]);
};

// 监听Store内容变化，同步更新预览
watch(
	() => store.reportContent,
	async (newVal) => {
		await updateContent(newVal, contentContainerRef.value);
	},
	{ immediate: true }
);
</script>

<style lang="scss" scoped>
.main-box {
	flex: 1;
	height: 100%;
	background: #f7f8f9;

	.edit-panel {
		width: calc(100% - 170px);
		height: calc(100% - 40px);
		margin: 20px 50px;
	}

	.content-box {
		width: 1069px;
		height: 100%;
		overflow-y: auto;
		padding: 20px 80px;
		line-height: 1.7;
		font-size: 16px;

		box-sizing: border-box;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		background: rgba(255, 255, 255, 1);
		margin: 17px auto 0 auto;

		img {
			width: 300px;
			height: auto;
		}

		:deep(.clause-ref-btn) {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			height: 1.5em;
			min-width: 1.5em;
			padding: 0 4px;
			margin: 0 2px;
			font-size: 0.9em;
			line-height: 1;
			color: #fff;
			background-color: var(--color-main-active, #055fc2);
			border: none;
			border-radius: 4px;
			cursor: pointer;
			vertical-align: middle;
			transition: background-color 0.2s;

			&:hover {
				background-color: #044da5;
			}

			&:active {
				transform: translateY(1px);
			}
		}
	}
}
</style>