<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="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" v-if="false">
						<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 }"
								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"
						>
							<el-button class="sider-upload-btn" type="primary">
								<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 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";

VMdEditor.use(vuepressTheme, {
	Prism
});

const isGenerating = ref(false);
const isShowProcess = ref(false);
const uploadFileList = ref([]);
const upload = ref();

//新上传文件替换
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(false);
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 abortController = ref(null);

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

// 流程
const scrollProcessContainer = ref(null);
const processContent = ref("");
// 报文
const scrollContainer = ref(null);
const reportContent = ref("");

const curTempTitle = ref("法案");

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

// 当前调用工具
const curAgentTool = ref("报告整体优化工具");

const getStreamChat = async (search, inputValue) => {
	if (uploadFileList.value.length > 0) {
		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 callSseWithPdf = async selectedFile => {
	abortController.value = new AbortController();

	try {
		// 构造FormData（和后端字段名保持一致）
		const formData = new FormData();
		formData.append("pdf", selectedFile);

		// 调用fetchEventSource（核心：支持POST+FormData+SSE）
		await fetchEventSource("/pdfSse/api/v1/order/pdf/extract/report/sse", {
			method: "POST", // 关键：设置POST方法
			body: formData, // 关键：传递PDF文件的FormData
			signal: abortController.value.signal, // 中断信号
			headers: {
				// 禁用默认的SSE协议头（避免和文件上传冲突）
				Accept: "text/event-stream",
				"Cache-Control": "no-cache",
				Connection: "keep-alive"
			},
			openWhenHidden: true,
			// 核心：原生onmessage回调（无需手动分割/解析）
			async onopen(res) {
				console.log("流式回答开始", res);
				isGenerating.value = true;
				isShowProcess.value = true;
			},
			async onmessage(res) {
				const { data, event } = res;
				const jsonData = JSON.parse(data);
				switch (event) {
					case "progress":
						processContent.value += `${getFormattedTime()}:${jsonData.message}\r\n`;
						updateProcess(processContent.value, scrollProcessContainer.value);
						break;
					case "result":
						callSseWithAi({
							query: writtingTitle.value, // "输出一篇报文"
							desc: descText.value,
							topic: "政令",
							result: data // 政令、智库、法案、清单
						});
					default:
						break;
				}
			},
			onerror(error) {
				ElMessage({
					message: "写报生成报错!",
					type: "warning"
				});
				abortController.value.abort();
				abortController.value = new AbortController();
				throw new Error(error);
			}
		});
	} catch (error) {
		if (error.name !== "AbortError") {
			ElMessage.error(`请求失败：${error.message}`);
			isLoading.value = false;
		}
	}
};

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");
						// 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 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())}`;
};

const writtingTitle = ref("");
const descText = ref("");
const tabList = ref([
	{
		name: "写报",
		active: true
	},
	{
		name: "收藏",
		active: false
	},
	{
		name: "问答",
		active: false
	}
]);
const tempList = ref([
	{
		title: "法案1",
		desc: "基于法案内容生成各维度的综合分析报告"
	},
	{
		title: "智库",
		desc: "基于智库内容生成各维度的综合分析报告"
	},
	{
		title: "政令",
		desc: "基于政令内容生成各维度的综合分析报告"
	},
	{
		title: "清单",
		desc: "基于清单内容生成各维度的综合分析报告"
	}
]);

const tempActiveIndex = ref(0);

const handleClickTemp = (item, index) => {
	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(() => {});

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: 21px 21px 29px 22px;
			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);

			.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: 230px;
							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;
							}
						}

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

				.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% - 100px);
				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>