<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 tabList" :key="index">
					{{ item.name }}
				</div>
			</div>
			<div class="edit-box"></div>
			<div class="btn-box">
				<div class="btn" @click="exportContent">
					<div class="icon">
						<img src="./assets/images/export-icon.png" alt="" />
					</div>
					<div class="text">{{ "导出" }}</div>
				</div>
				<div class="btn" @click="handleSwitchMode">
					<div class="icon">
						<img v-if="isEditMode" src="./assets/images/preview-icon.png" alt="" />
						<img v-else src="./assets/images/edit.png" alt="" />
					</div>
					<div class="text">{{ isEditMode ? "预览" : "编辑" }}</div>
				</div>
				<div class="btn btn1">
					<div class="icon">
						<img src="./assets/images/save-icon.png" alt="" />
					</div>
					<div class="text text1">{{ "保存" }}</div>
				</div>
			</div>
		</div>
		<div class="writting-main">
			<div class="left-box">
				<div class="left-box-input">
					<div class="process-box" v-if="isShowProcess">
						<div class="back" @click="handleBack">{{ "< 返回" }}</div>
						<div class="process-main-box">
							<div class="steps-box">
								<div class="steps-header">
									<div class="icon">
										<img src="./assets/images/right-arrow.png" alt="" />
									</div>
									<div class="text">{{ "执行步骤：" }}</div>
								</div>
								<div class="steps-content" ref="scrollProcessContainer" v-html="renderedProcess"></div>
							</div>
							<div class="tool-box">
								<div class="tool-header">{{ "工具调用" }}</div>
								<div class="tool-main">当前智能体工具：{{ curAgentTool ? curAgentTool : "无" }}</div>
							</div>
						</div>
					</div>
					<div class="sider" v-else>
						<div class="sider-box">
							<div class="header">报文主题</div>
							<div class="title-box">
								<div class="title">主题名称</div>
								<el-input
									:disabled="true"
									style="width: 476px; height: 32px"
									class="title-input"
									placeholder="输入主题名称，如：大而美法案"
									v-model="writtingTitle"
								/>
							</div>
							<div class="description-box">
								<div class="title">主题描述</div>
								<el-input
									:disabled="true"
									class="description-input"
									type="textarea"
									style="width: 476px"
									:rows="8"
									placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响"
									v-model="descText"
								/>
							</div>
						</div>
						<div class="sider-box">
							<div class="header">报文模板</div>
							<div class="template-box">
								<div
									class="template"
									:class="{
										tempActive: tempActiveIndex === index,
										disableTemplate: tempActiveIndex !== index && Object.keys(route.query).length > 0
									}"
									v-for="(temp, index) in tempList"
									:key="index"
									@click="handleClickTemp(temp, index)"
								>
									<div class="header">
										<div class="title">{{ temp.title }}</div>
										<div class="icon">
											<img src="./assets/images/template-icon.png" alt="" />
										</div>
									</div>
									<div class="content">{{ temp.desc }}</div>
									<div class="active-icon" v-if="tempActiveIndex === index">
										<img src="./assets/images/active-icon.png" alt="" />
									</div>
									<div class="selected-icon" v-if="tempActiveIndex === index">
										<img src="./assets/images/selected-icon.png" alt="" />
									</div>
								</div>
							</div>
						</div>
						<div class="sider-box">
							<div class="header">加载本地文件</div>
							<el-upload
								action=""
								:auto-upload="false"
								accept=".pdf"
								limit="1"
								:on-exceed="handleExceed"
								ref="upload"
								:on-change="handleFileChange"
								:file-list="uploadFileList"
								:disabled="Object.keys(route.query).length !== 0"
							>
								<el-button
									class="sider-upload-btn"
									type="primary"
									:disabled="Object.keys(route.query).length !== 0"
								>
									<el-icon class="sider-upload-btn-text">
										<Upload />
									</el-icon>
									<span class="sider-upload-btn-text">上传文件</span>
								</el-button>
								<template #tip>
									<div class="sider-upload-btn-tip">支持扩展名：.doc .docx .pdf</div>
								</template>
							</el-upload>
						</div>
					</div>
				</div>
				<div class="submit-area">
					<div class="tips">
						<div class="tips-icon">
							<img src="./assets/images/tips-icon.png" alt="" />
						</div>
						<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
					</div>
					<div class="process-footer-box" v-if="isShowProcess">
						<div class="footer-left">
							{{ isGenerating ? "报文生成中..." : "报文已生成" }}
						</div>
						<div class="footer-right">
							<div class="icon"></div>
							<div class="text" @click="handleGenerate">{{ "停止" }}</div>
						</div>
					</div>
					<div class="submit-btn" @click="getStreamChat" v-else>
						<div class="submit-icon">
							<img src="./assets/images/ai.png" alt="" />
						</div>
						<div class="submit-text">生成报文</div>
					</div>
				</div>
			</div>
			<div class="main-box">
				<div v-if="isEditMode" class="edit-panel">
					<v-md-editor
						v-model="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="scrollContainer" v-html="renderedContent"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useMarkdownStream } from "@/hooks/useMarkdownStream";
import { useStream } from "@/hooks/useStream";
import { fetchEventSource } from "@microsoft/fetch-event-source";

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";

// 引入 Prism 相关依赖
import Prism from "prismjs";
import { ElButton, ElIcon, ElInput, ElMessage, ElUpload, genFileId } from "element-plus";

import { useRoute } from "vue-router";

import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";

// 获取 Store 实例
const writingStore = useWrittingAsstaintStore();
const route = useRoute();
const isGenerating = ref(false);
const isShowProcess = ref(true);
const uploadFileList = ref([]);
const upload = ref();
// 流程
const scrollProcessContainer = ref(null);
const processContent = ref("");
// 报文
const scrollContainer = ref(null);
const reportContent = ref("");
const curTempTitle = ref("政令");
const abortController = ref(null);
// 当前调用工具
const curAgentTool = ref("");
const writtingTitle = ref("");
const descText = ref("");
const tabList = ref([
	{
		name: "写报",
		active: true
	},
	{
		name: "收藏",
		active: false
	},
	{
		name: "问答",
		active: false
	}
]);
const tempList = ref([
	{
		title: "政令",
		desc: "基于政令内容生成各维度的综合分析报告"
	},
	{
		title: "法案",
		desc: "基于政令内容生成各维度的综合分析报告"
	},
	{
		title: "智库",
		desc: "基于智库内容生成各维度的综合分析报告"
	},
	{
		title: "清单",
		desc: "基于清单内容生成各维度的综合分析报告"
	}
]);
const tempActiveIndex = ref(0);

VMdEditor.use(vuepressTheme, {
	Prism
});

//新上传文件替换
const handleExceed = files => {
	if (upload.value) {
		upload.value.clearFiles();
		const file = files[0];
		file.uid = genFileId();
		upload.value.handleStart(file);
	}
};

const handleFileChange = (file, files) => {
	// 只保留最后选中的1个文件（覆盖原有文件）
	if (files.length > 1) {
		uploadFileList.value = [file];
	} else {
		uploadFileList.value = files;
	}
};

const handleBack = () => {
	handleGenerate();
};

const isEditMode = ref(true);
const handleSwitchMode = () => {
	isEditMode.value = !isEditMode.value;
	if (!isEditMode.value) {
		console.log(reportContent.value);
		updateContent(reportContent.value, scrollContainer.value);
	}
};

// 保存处理函数
const handleSave = (text, html) => {
	console.log("保存内容:", {
		markdown: text,
		html: html
	});

	reportContent.value = text;
	// 实际保存逻辑
	// saveToLocalStorage(text);
	ElMessage.success("保存成功！");
};

// 保存到本地存储
const saveToLocalStorage = text => {
	localStorage.setItem("markdown-content", text);
};

const { renderedContent, updateContent } = useMarkdownStream();
const { renderedProcess, updateProcess } = useStream();

// 停止生成
const handleGenerate = () => {
	isShowProcess.value = false;
	processContent.value = "";
	abortController.value.abort();
};

const getStreamChat = async (search, inputValue) => {
	if (Object.keys(route.query).length !== 0) {
		const params = {
			query: writtingTitle.value, // "输出一篇报文"
			desc: descText.value,
			topic: curTempTitle.value,
			report_id: route.query.fileId // 政令、智库、法案、清单
		};
		callSseWithAi(params);
	} else {
		if (curTempTitle.value === "政令") {
			if (uploadFileList.value.length === 0) {
				ElMessage.error("请上传政令文件");
				return;
			}
			const rawFile = uploadFileList.value[0].raw;
			if (!rawFile) {
				ElMessage.error("文件解析失败，请重新选择");
				return;
			}
			callSseWithPdf(rawFile);
		} else {
			const params = {
				query: writtingTitle.value, // "输出一篇报文"
				desc: descText.value,
				topic: curTempTitle.value // 政令、智库、法案、清单
			};
			callSseWithAi(params);
		}
	}
};

const getFormattedTime = () => {
	const now = new Date();
	// 补零函数：确保单个数字补为两位（如 1 → 01，9 → 09）
	const pad = n => n.toString().padStart(2, "0");

	return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(
		now.getMinutes()
	)}:${pad(now.getSeconds())}`;
};

// 核心SSE调用函数（修复后）
const callSseWithPdf = async selectedFile => {
	// 重置中断控制器
	if (abortController.value) {
		abortController.value.abort();
	}
	abortController.value = new AbortController();

	// 状态重置
	isGenerating.value = false;
	isShowProcess.value = false;

	try {
		const formData = new FormData();
		formData.append("pdf", selectedFile);

		await fetchEventSource("/pdfSse/api/v1/order/pdf/extract/report/sse", {
			method: "POST",
			body: formData,
			signal: abortController.value.signal,
			headers: {
				Accept: "text/event-stream",
				"Cache-Control": "no-cache"
			},
			openWhenHidden: true,
			retryDelay: 1000,
			maxRetries: 3,
			// 连接打开回调
			async onopen(response) {
				console.log("流式回答开始", response);
				// 校验响应状态
				if (response.ok && response.headers.get("content-type")?.includes("text/event-stream")) {
					isGenerating.value = true;
					isShowProcess.value = true;
				} else {
					ElMessage.warning("SSE连接格式异常，即将断开");
					abortController.value.abort();
				}
			},
			// 核心修复：消息处理回调
			async onmessage(event) {
				// 1. 严格过滤空消息（解决失焦时空消息问题）
				if (!event || !event.data || event.data.trim() === "") {
					console.debug("收到空SSE消息，忽略", event);
					return;
				}

				let jsonData = null;
				try {
					// 2. 容错处理：防止非JSON格式的消息导致解析报错
					jsonData = JSON.parse(event.data.trim());
				} catch (parseError) {
					console.warn("SSE消息JSON解析失败", parseError, event.data);
					return;
				}

				// 3. 按事件类型处理业务逻辑
				switch (event.event) {
					case "progress":
						// 校验数据完整性
						if (jsonData.message) {
							processContent.value += `${getFormattedTime()}:${jsonData.message}\r\n`;
							updateProcess(processContent.value, scrollProcessContainer.value);
						}
						break;
					case "result":
						// 确保result数据有效
						if (jsonData && Object.keys(jsonData).length) {
							await callSseWithAi({
								query: writtingTitle.value,
								desc: descText.value,
								topic: curTempTitle.value,
								result: jsonData // 传递解析后的对象而非原始字符串
							});
						}
						break;
					default:
						console.debug("未处理的SSE事件类型", event.event);
						break;
				}
			},
			// 错误处理优化
			onerror(error) {
				console.error("SSE连接错误", error);
				ElMessage.warning("写报生成报错!");
				// 只在非主动中断时重连/终止
				if (error.name !== "AbortError") {
					// 触发库的自动重连机制（返回true）
					return true;
				}
				// 主动中断时清理控制器
				abortController.value.abort();
				abortController.value = new AbortController();
			},
			// 连接关闭回调
			onclose() {
				console.log("SSE连接正常关闭");
				isGenerating.value = false;
			}
		});
	} catch (error) {
		// 全局异常捕获
		if (error.name !== "AbortError") {
			ElMessage.error(`请求失败：${error.message}`);
			console.error("SSE请求异常", error);
		}
		// 重置状态
		isGenerating.value = false;
		isShowProcess.value = false;
		// 清理控制器
		abortController.value.abort();
		abortController.value = new AbortController();
	}
};

const callSseWithAi = async params => {
	abortController.value = new AbortController();
	fetchEventSource("/sseWrite/api/v1/workflow/invoke", {
		method: "POST",
		headers: {
			"Content-Type": "application/json"
		},
		body: JSON.stringify(params),
		signal: abortController.value.signal,
		openWhenHidden: true,
		async onopen(res) {
			console.log("流式回答开始", res);
			isGenerating.value = true;
			isShowProcess.value = true;
		},
		async onmessage(res) {
			let msgData = JSON.parse(res.data);
			console.log("resss", msgData.data);
			console.log("msgData", msgData);
			let str = msgData.data;
			if (msgData.event_type === "stream_agent_out") {
				if (str !== "[DONE]") {
					reportContent.value += str;
					if (reportContent.value.includes("./out/img")) {
						// reportContent.value = reportContent.value.replaceAll("./out/img", "http://8.140.26.4:10017/out/img");
						reportContent.value = reportContent.value.replaceAll("./out/img", "http://172.19.21.9:8003/out/img");
						// console.log(111, reportContent.value);
					}
					updateContent(reportContent.value, scrollContainer.value);
				} else {
					isGenerating.value = false;
					ElMessage.success("报文生成结束");
					abortController.value.abort();
					abortController.value = new AbortController();
				}
			} else if (msgData.event_type === "workflow_complete") {
				ElMessage.success("报文生成结束");
				isGenerating.value = false;
				abortController.value.abort();
				abortController.value = new AbortController();
			} else if (msgData.event_type.toLowerCase().includes("error")) {
			} else {
				processContent.value += str;
				curAgentTool.value = msgData.tool;
				updateProcess(processContent.value, scrollProcessContainer.value);
			}
		},
		onerror(error) {
			ElMessage({
				message: "写报生成报错!",
				type: "warning"
			});
			abortController.value.abort();
			abortController.value = new AbortController();
			throw new Error(error);
		}
	}).catch(error => {
		ElMessage({
			message: "写报生成报错!",
			type: "warning"
		});
		abortController.value.abort();
		abortController.value = new AbortController();
		throw new Error(error);
	});
};

const handleClickTemp = (item, index) => {
	if (Object.keys(route.query).length !== 0) return;
	tempActiveIndex.value = index;
	curTempTitle.value = item.title;
};

// 导出
const exportContent = () => {
	const blob = new Blob([reportContent.value], { type: "text/markdown" });
	const url = URL.createObjectURL(blob);
	const a = document.createElement("a");
	a.href = url;
	a.download = `markdown-${new Date().getTime()}.md`;
	a.click();
	URL.revokeObjectURL(url);
};

onMounted(() => {
	if (route && Object.keys(route.query).length !== 0) {
		const { topic, fileId } = route.query;
		if (!topic || !fileId) return;
		curTempTitle.value = topic;
		tempActiveIndex.value = tempList.value.findIndex((item, index) => {
			return item.title === topic;
		});
	}
});

onUnmounted(() => {
	if (abortController.value) {
		abortController.value.abort();
	}
});
</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;
			}

			.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;

		.left-box {
			display: flex;
			flex-direction: column;
			width: 520px;
			padding-top: 22px;
			padding-bottom: 29px;
			box-sizing: border-box;
			border-right: 1px solid rgba(234, 236, 238, 1);
			border-top: 1px solid rgba(234, 236, 238, 1);
			background: rgba(255, 255, 255, 1);

			.left-box-input {
				overflow-y: scroll;
				overflow-x: hidden;
				scrollbar-width: none;
				padding-inline: 22px;

				.process-box {
					display: flex;
					flex-direction: column;
					gap: 20px;

					.back {
						height: 24px;
						line-height: 24px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						cursor: pointer;
					}

					.process-main-box {
						width: 476px;

						.analysis-box {
							.analysis-header {
								display: flex;

								.icon {
									margin-top: 5px;
									width: 20px;
									height: 20px;

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

								.text {
									height: 30px;
									line-height: 30px;
									font-family: Microsoft YaHei;
									color: #333;
									font-size: 20px;
									font-weight: 700;
									margin-left: 5px;
								}
							}

							.analysis-content {
								height: 90px;
								line-height: 30px;
								color: #555;
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								text-indent: 32px;
							}
						}

						.steps-box {
							.steps-header {
								display: flex;

								.icon {
									margin-top: 5px;
									width: 20px;
									height: 20px;

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

								.text {
									height: 30px;
									line-height: 30px;
									font-family: Microsoft YaHei;
									color: #333;
									font-size: 20px;
									font-weight: 700;
									margin-left: 5px;
								}
							}

							.steps-content {
								width: 100%;
								min-height: 20px;
								max-height: 480px;
								overflow-x: hidden;
								overflow-y: auto;
							}
						}

						.doing-box {
							height: 40px;
							line-height: 40px;
							color: #555;
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							margin-left: 20px;
						}

						.tool-box {
							width: 440px;
							height: 160px;
							margin: 10px auto;
							background: #f6f9fe;
							border-radius: 10px;

							.tool-header {
								height: 30px;
								line-height: 30px;
								margin-left: 20px;
								color: var(--color-main-active);
							}

							.tool-main {
								height: 110px;
								width: 400px;
								margin: 0 auto;
								background: #fff;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 40px;
							}
						}
					}
				}

				.sider {
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					gap: 23px;

					.sider-box {
						.header {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
						}

						.template-box {
							margin-top: 19px;
							height: 260px;
							display: flex;
							flex-wrap: wrap;
							gap: 16px;

							.template {
								width: 229px;
								height: 120px;
								box-sizing: border-box;
								border: 1px solid rgba(234, 236, 238, 1);
								border-radius: 4px;
								position: relative;
								cursor: pointer;

								.active-icon {
									width: 24px;
									height: 24px;
									position: absolute;
									top: 0;
									right: 0;
									z-index: 99;

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

								.selected-icon {
									width: 8px;
									height: 6px;
									position: absolute;
									top: -4px;
									right: 3px;
									z-index: 100;

									img {
										width: 8px;
										height: 6px;
									}
								}

								.header {
									display: flex;
									justify-content: space-between;
									height: 50px;

									.title {
										height: 24px;
										// color: rgba(59, 65, 75, 1);
										color: #333;
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 700;
										line-height: 24px;
										margin-left: 15px;
										margin-top: 16px;
									}

									.icon {
										margin-top: 15px;
										margin-right: 16px;
										width: 30px;
										height: 30px;
										border-radius: 15px;
										background: rgba(231, 243, 255, 1);

										img {
											width: 17px;
											height: 14px;
											margin-top: 8px;
											margin-left: 7px;
										}
									}
								}

								.content {
									margin: 0 auto;
									width: 200px;
									height: 48px;
									margin-top: 10px;
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
							}

							.disableTemplate {
								width: 230px;
								height: 120px;
								box-sizing: border-box;
								border: 1px solid #e4e7ed;
								border-radius: 4px;
								position: relative;
								cursor: not-allowed;
								background-color: #f5f7fa;

								.active-icon {
									width: 24px;
									height: 24px;
									position: absolute;
									top: 0;
									right: 0;
									z-index: 99;

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

								.selected-icon {
									width: 8px;
									height: 6px;
									position: absolute;
									top: -4px;
									right: 3px;
									z-index: 100;

									img {
										width: 8px;
										height: 6px;
									}
								}

								.header {
									display: flex;
									justify-content: space-between;
									height: 50px;

									.title {
										height: 24px;
										color: #c0c4cc;
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 700;
										line-height: 24px;
										margin-left: 15px;
										margin-top: 16px;
									}

									.icon {
										margin-top: 15px;
										margin-right: 16px;
										width: 30px;
										height: 30px;
										border-radius: 15px;
										background: #f0f2f5;
										img {
											width: 17px;
											height: 14px;
											margin-top: 8px;
											margin-left: 7px;
											opacity: 0.5;
										}
									}
								}

								.content {
									margin: 0 auto;
									width: 200px;
									height: 48px;
									margin-top: 10px;
									color: #dcdfe6;
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
							}

							.tempActive {
								border: 1px solid rgba(5, 95, 194, 1);
								background: rgba(246, 250, 255, 1);
							}
						}

						.title-box {
							margin-top: 15px;

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

							.title-input {
								margin-top: 15px;
							}
						}

						.description-box {
							margin-top: 24px;

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

							.description-input {
								margin-top: 12px;
								height: 200px;
							}
						}

						.sider-upload-btn {
							width: 476px;
							height: 36px;
							box-sizing: border-box;
							border: 1px dashed rgba(234, 236, 238, 1);
							border-radius: 6px;
							background: rgba(247, 248, 249, 1);
							margin-top: 19px;
						}

						.sider-upload-btn-text {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-style: Regular;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: left;
						}

						.sider-upload-btn-tip {
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-style: Regular;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: left;
							margin-top: 8px;
						}
					}
				}
			}

			.submit-area {
				margin-top: auto;
				width: 100%;
				min-height: 74px;
				padding-inline: 22px;

				.tips {
					height: 22px;
					display: flex;
					margin-bottom: 18px;

					.tips-icon {
						width: 14px;
						height: 16px;
						margin-top: 3px;

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

					.tips-text {
						margin-left: 8px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
					}
				}

				.process-footer-box {
					height: 36px;
					display: flex;
					position: absolute;

					.footer-left {
						width: 348px;
						height: 36px;
						border-radius: 4px;
						background: rgba(234, 236, 238, 1);
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						text-align: center;
						line-height: 36px;
					}

					.footer-right {
						margin-left: 8px;
						display: flex;
						width: 120px;
						height: 36px;
						box-sizing: border-box;
						border: 1px solid var(--color-main-active);
						border-radius: 4px;
						background: rgba(246, 250, 255, 1);
						justify-content: center;
						align-items: center;
						gap: 8px;
						cursor: pointer;

						.icon {
							width: 8px;
							height: 8px;
							border-radius: 2px;
							background: var(--color-main-active);
						}

						.text {
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
						}
					}
				}

				.submit-btn {
					width: 476px;
					height: 36px;
					border-radius: 4px;
					background: rgba(5, 95, 194, 1);
					display: flex;
					justify-content: center;
					cursor: pointer;

					&:hover {
						background: rgba(5, 95, 194, 0.8);
					}

					.submit-icon {
						/* AI-logo */
						width: 21px;
						height: 15px;
						margin-top: 10px;

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

					.submit-text {
						height: 24px;
						margin-top: 5px;
						color: rgba(255, 255, 255, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						margin-left: 8px;
					}
				}
			}
		}

		.main-box {
			flex: 1;
			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(.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>