<template>
	<div style="width: 100%;    display: flex;justify-content: center;align-items: stretch;">
        <!-- 右侧子组件：绑定ref -->
		<writtingMainBox  v-show="!!store.reportContent" :report-content="store.reportContent" />

		<div v-if="!store.reportContent" class="main-placeholder">
			<img src="../assets/images/container-image.png" alt="无数据占位图" />
			<div class="placeholder-text">
				<div>智能体写报任务执行中...</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
import writtingMainBox from "./WrittingMainBox.vue";
const store = useWrittingAsstaintStore();

const mainBoxRef = ref(null); // 右侧子组件ref


</script>

<style lang="scss" scoped>
		.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;
			}
		}
</style>