<template>
	<div class="form">
		<div class="container">
			<dp :ref="setRefs('dp')">
				<template #tool>
					<div class="tools">
						<el-link
							type="primary"
							href="https://www.gaoding.com/editor/ps#/"
							target="_blank"
							>在线ps工具</el-link
						>
						<el-link
							type="primary"
							href="https://editor.ibaotu.com/complex/tempcenter"
							target="_blank"
							>图片资源库</el-link
						>
						<el-button link :icon="Position" type="primary" @click="preview"
							>小程序预览页面</el-button
						>
					</div>
				</template>
			</dp>
		</div>

		<div class="footer">
			<el-button @click="clear">清空</el-button>
			<el-button type="success" @click="save">保存页面</el-button>
			<el-button type="primary" @click="send">发布上线</el-button>
			<el-button type="info" @click="create">预览代码</el-button>
		</div>

		<cl-editor-preview title="代码预览" name="monaco" :ref="setRefs('preview')" />
		<cl-dialog width="350px" title="小程序页面预览码" v-model="options.visible">
			<div class="preview-box">
				<el-image fit="cover" style="width: 200px; height: 200px" :src="options.url" />
				<div style="padding: 6px; margin-top: 10px">
					<span>微信扫码预览该页面</span>
				</div>
			</div>
		</cl-dialog>
	</div>
</template>

<script lang="ts" setup>
import { useCool } from "/@/cool";
import { onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Position } from "@element-plus/icons-vue";
import Dp from "../components/index.vue";

const { refs, setRefs, service, route } = useCool();
// 数据选项
const options = reactive<any>({
	visible: false,
	loading: false,
	url: ""
});
// 预览页面
function preview() {
	if (options.loading) return;
	options.loading = true;
	const data = refs.dp.getData();
	service.fixtures.mould
		.getFixturesPreviewCode({ id: Number(route.query.id), form: data })
		.then((res: any) => {
			options.url = res;
			options.visible = true;
		})
		.catch((e) => {
			ElMessage.error(e.message);
		})
		.finally(() => {
			options.loading = false;
		});
}
// 保存
function save() {
	const data = refs.dp.getData();
	service.fixtures.mould
		.update({ form: data, id: Number(route.query.id) })
		.then(() => {
			ElMessage.success("保存页面成功");
		})
		.catch((e) => {
			ElMessage.success(e.message);
		});
}
// 发布
function send() {
	const data = refs.dp.getData();
	service.fixtures.mould
		.update({ data: data, form: data, id: Number(route.query.id) })
		.then(() => {
			ElMessage.success("页面发布成功");
		})
		.catch((e) => {
			ElMessage.success(e.message);
		});
}
function create() {
	refs.preview.open(refs.dp.getData());
}

function clear() {
	ElMessageBox.confirm("是否清空列表所有数据？", "提示", {
		type: "warning"
	})
		.then(() => {
			refs.dp.clear();
		})
		.catch(() => null);
}
function getPageData() {
	const id = Number(route.query.id);

	// 调用接口获取数据
	service.fixtures.mould
		.info({ id })
		.then((res: any) => {
			const form = res?.form;
			// 检查是否有有效数据
			if (!Array.isArray(form) || form.length === 0) {
				return;
			}

			// 获取 header
			const header = form.shift();
			setHeaderAndBody(header, res);

			// 查找悬浮按钮并从原数组中删除它
			const updatedData = filterOutSuspension(form);

			// 设置表单数据
			refs.dp.setFormList(updatedData);
		})
		.catch((error: any) => {
			console.error("Failed to fetch page form:", error);
			ElMessage.error("获取页面数据失败");
		});
}

// 提取设置 Header 和 Body 的函数
function setHeaderAndBody(header: any, res: any) {
	refs.dp.setBody({
		backgroundColor: res.backgroundColor,
		backgroundImage: res.backgroundImage
	});
	refs.dp.setHeader(header);
}

// 查找并删除悬浮按钮，并返回处理后的数据
function filterOutSuspension(form: any[]) {
	// 查找悬浮按钮
	const suspensionIndex = form.findIndex((f: { name: string }) => f.name === "suspension");

	// 如果找到了悬浮按钮，将它设置并从数组中删除
	if (suspensionIndex !== -1) {
		const suspension = form[suspensionIndex];
		refs.dp.setSuspension(suspension);

		// 返回删除悬浮按钮后的数组
		return form.filter((_, index) => index !== suspensionIndex);
	}

	// 如果没有找到，返回原始数据
	return form;
}

onMounted(() => {
	getPageData();
});
</script>

<style lang="scss" scoped>
.form {
	background-color: #fff;
	position: relative;
	min-width: 1300px;
	height: 100%;
	overflow: hidden;

	.container {
		height: calc(100% - 80px);
		.tools {
			display: flex;
			flex-direction: column;
		}
	}

	.footer {
		display: flex;
		justify-content: center;
		padding-top: 20px;
		height: 80px;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 1px solid #ebeef5;
		z-index: 9;
	}
}
.preview-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>
