<template>
	<div class="writting-wrapper">
		<!-- 头部区域 -->
		<div class="writting-header">
			<div class="tab-box">
				<div class="tab" :class="{ tabActive: item.active }" v-for="(item, index) in store.tabList"
					:key="index">
					{{ item.name }}
				</div>
			</div>
			<div class="edit-box"></div>
			<div class="btn-box">
				<!-- <div class="btn" @click="store.exportContent">
					<div class="icon">
						<img src="./assets/images/export-icon.png" alt="" />
					</div>
					<div class="text">导出</div>
				</div> -->
				<div class="btn" @click="store.toggleEditMode">
					<div class="icon">
						<img v-if="store.isEditMode" src="./assets/images/preview-icon.png" alt="" />
						<img v-else src="./assets/images/edit.png" alt="" />
					</div>
					<div class="text">{{ store.isEditMode ? "预览" : "编辑" }}</div>
				</div>
				<div class="btn btn1" @click="store.exportContent">
					<div class="icon">
						<img src="./assets/images/save-icon.png" alt="" />
					</div>
					<div class="text text1">保存</div>
				</div>
			</div>
		</div>

		<!-- 主体区域：子组件 -->
		<div class="writting-main">
			<!-- 左侧子组件：绑定ref -->
			<writtingleftBox ref="leftBoxRef" @generate="handleGenerate" />
			<!-- 右侧子组件：绑定ref -->
			<writtingMainBox v-show="!!store.reportContent" ref="mainBoxRef" :report-content="store.reportContent" />
			<!-- 无数据时显示占位图 -->
			<div v-show="!store.reportContent" class="main-placeholder">
				<img src="./assets/images/container-image.png" alt="无数据占位图" />
				<div class="placeholder-text">
					<div v-if="store.isGenerating">智能体写报任务执行中...</div>
					<div v-else>上传文件后点击“生成报文”开始写报...</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, nextTick } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
import writtingleftBox from "./components/WrittingLeftBox.vue";
import writtingMainBox from "./components/WrittingMainBox.vue";

// 获取路由实例（组件内读取）
const route = useRoute();
// 获取Pinia Store实例
const leftBoxRef = ref(null); // 左侧子组件ref
const mainBoxRef = ref(null); // 右侧子组件ref
const store = useWrittingAsstaintStore();

// 2. 核心：触发生成流程
const handleGenerate = async () => {
	try {
		// 先打开"执行步骤"面板，确保步骤容器被渲染
		if (!store.isShowSubmit) {
			store.isShowSubmit = true;
		}

		// 等待DOM更新（确保子组件DOM已挂载）
		await nextTick();

		// 调用Pinia的生成方法，不再传递DOM容器，由组件层自行渲染
		await store.generateReport();
	} catch (error) {
		ElMessage.error(error.message);
		console.error("生成报文失败：", error);
	}
};

// 生命周期
onMounted(async () => {
	// 组件初始化时：读取路由参数，传递给Pinia
	await store.setRouteParams(route.query);
});

onUnmounted(() => {
	// 组件卸载时清理请求
	store.cleanup();
});
</script>

<style lang="scss" scoped>
.writting-wrapper {
	width: 100%;
	height: 100%;

	.writting-header {
		height: 60px;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(234, 236, 238, 1);
		border-top: 1px solid rgba(234, 236, 238, 1);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
		display: flex;
		position: relative;

		.tab-box {
			display: flex;
			margin-left: 130px;
			margin-top: 13px;
			width: 260px;
			height: 46px;
			justify-content: space-between;

			.tab {
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 20px;
				font-weight: 400;
				line-height: 30px;
				cursor: pointer;
			}

			.tabActive {
				color: rgba(5, 95, 194, 1);
				font-family: Microsoft YaHei;
				font-size: 20px;
				font-weight: 700;
				line-height: 30px;
				border-bottom: 4px solid rgba(5, 95, 194, 1);
			}
		}

		.btn-box {
			position: absolute;
			top: 12px;
			right: 39px;
			display: flex;
			gap: 12px;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 88px;
				height: 36px;
				gap: 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 6px;
				background: rgba(255, 255, 255, 1);
				cursor: pointer;

				.icon {
					width: 16px;
					height: 16px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					width: 32px;
					height: 24px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
				}

				.text1 {
					color: #fff;
				}
			}

			.btn1 {
				background: rgba(5, 95, 194, 1);
			}
		}
	}

	.writting-main {
		display: flex;
		height: calc(100% - 60px);
		position: relative;

		.main-placeholder {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 16px;
			background: #f7f8f9;

			img {
				max-width: 100%;
				max-height: 80%;
				object-fit: contain;
				display: block;
			}

			.placeholder-text {
				color: rgba(132, 136, 142, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
			}
		}
	}

}

:deep(.el-input__wrapper) {
	background: #f7f8f9;
}

:deep(.el-input__inner::placeholder) {
	color: rgba(132, 136, 142, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

:deep(.el-input__inner) {
	color: #333;
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

:deep(.el-textarea__inner) {
	background: #f7f8f9;
}

:deep(.el-textarea__inner) {
	color: #333;
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

:deep(.el-textarea__inner::placeholder) {
	color: rgba(132, 136, 142, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}
</style>