<template>
    <!-- 图片上传组件 -->
    <el-upload
        :id="uuid"
        action="#"
        :multiple="true"
        :show-file-list="false"
        :http-request="handleHttpUpload"
        :before-upload="handleBeforeUpload"
        class="editor-img-uploader"
        accept=".jpeg,.jpg,.png,.gif"
    >
        <i ref="uploadRef" class="Plus editor-img-uploader"></i>
    </el-upload>

    <!-- 视频上传组件 -->
    <input
        type="file"
        accept="video/*"
        name="file"
        ref="uploadFileVideo"
        id="uploadFileVideo"
        @change="handleVideoUpload"
        style="width: 0; height: 0; cursor: pointer; opacity: 0"
    />

    <!-- 主富文本编辑器 -->
    <div class="editor">
        <QuillEditor
            id="mainEditor"
            ref="myQuillEditor"
            v-model:content="editorContent"
            contentType="html"
            @update:content="onContentChange"
            :options="options"
        />
    </div>

    <!-- 标签页配置弹窗 -->
    <div>
        <el-dialog
            v-model="outerVisible"
            title="标签页配置"
            style="width: 1200px; height: 900px"
            close-on-click-modal
            close-on-press-escape
            :before-close="handleBeforeClose"
        >
            <el-tabs
                v-model="activeName"
                type="card"
                class="demo-tabs"
                editable
                @edit="handleTabsEdit"
                @tab-change="handleTabChange"
            >
                <!-- 标签页：标题支持编辑 -->
                <el-tab-pane
                    :label="item.title"
                    :name="item.key"
                    v-for="(item, index) in tabsData"
                    :key="item.key"
                    @keydown.delete.stop
                    @keydown.backspace.stop
                >
                    <template #label>
                        <div class="tab-title-edit">
                            <!-- 文字显示状态 -->
                            <span v-if="!item.isEditing" @click="startEditTitle(index)" class="title-text">
                                {{ item.title }}
                            </span>
                            <!-- 输入框编辑状态 -->
                            <el-input
                                @click.stop
                                @keydown.delete.stop
                                @keydown.backspace.stop
                                v-else
                                v-model="item.title"
                                max-length=""
                                :ref="el => (editInputRefs[index] = el)"
                                size="small"
                                class="title-input"
                                @blur="finishEditTitle(index)"
                            />
                        </div>
                    </template>

                    <!-- 标签页编辑器内容 -->
                    <QuillEditor
                        :id="`tabEditor_${item.key}`"
                        :ref="
                            el => {
                                if (el) tabEditors[index] = el;
                            }
                        "
                        v-model:content="item.content"
                        contentType="html"
                        :options="options1"
                    />
                </el-tab-pane>
            </el-tabs>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleQX">取消</el-button>
                    <el-button type="primary" @click="handleQR"> 确认 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Editor">
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
import { generateUUID } from "@/utils";
// import { h } from "@/utils/url";
import { routerObj } from "./utils.js";
import { titleConfig } from "./titleConfig.js";
import { uploadVideo, uploadImg } from "@/api/modules/upload";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import { useMsg } from "@/hooks/useMsg";
// 字体配置
let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = [
    "12px",
    "14px",
    "16px",
    "18px",
    "20px",
    "22px",
    "24px",
    "26px",
    "28px",
    "30px",
    "32px",
    "34px",
    "36px",
    "38px",
    "40px",
    "42px"
];
Quill.register(fontSizeStyle, true);

// 自定义Blot
import ImageBlot from "./quill-image";
import Video from "./quill-video";
import TabsBlot from "./quill-tabs";
import DynamicDivBlot from "./quill-detail-div";
Quill.register(Video);
Quill.register(ImageBlot);
Quill.register(TabsBlot);
Quill.register(DynamicDivBlot);
// 基础变量
const { proxy } = getCurrentInstance();
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
const uuid = ref("id-" + generateUUID());
const $router = useRouter();
const routerValueName = $router.currentRoute.value.name;
const routerName = ref(routerObj[routerValueName]);
const uploadFileVideo = ref(null);
const outerVisible = ref(false);
const imageList = ref([]);
const imageListDb = ref([]);
const activeName = ref(null); // 跟踪当前激活的标签页key
const activeEditor = ref("main"); // 跟踪当前活跃编辑器：main/tab-索引

// 标签页数据（新增key作为唯一标识，isEditing控制编辑状态）
const tabsData = ref([]);
// 标签页编辑器ref数组
const tabEditors = ref([]);
// 标题编辑输入框的ref
const editInputRefs = ref([]);
const currentEditingTabsRef = ref(null);
// Props
const props = defineProps({
    content: { type: String, default: "" },
    readOnly: { type: Boolean, default: false },
    fileSizeLimit: { type: Number, default: 5 }
});

// 主编辑器内容双向绑定
const editorContent = computed({
    get: () => {
        if (!props.content) return "";
        return props.content;
    },
    set: val => {
        emit("update:content", val);
    }
});
const myQuillEditor = ref(null); // 主编辑器ref

// 主编辑器配置（保持不变）
const options = reactive({
    theme: "snow",
    debug: "warn",
    strict: false,
    modules: {
        toolbar: {
            container: [
                ["bold", "italic", "underline", "strike"],
                ["blockquote", "code-block"],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ indent: "-1" }, { indent: "+1" }],
                [{ size: fontSizeStyle.whitelist }],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [{ color: [] }, { background: [] }],
                [{ align: [] }],
                ["clean"],
                ["link", "image", "video", "tabs"]
            ],
            handlers: {
                image: function (value) {
                    if (value) {
                        activeEditor.value = "main";
                        proxy.$refs.uploadRef.click();
                    } else Quill.format("customImage", true);
                },
                video: function (value) {
                    if (value) {
                        activeEditor.value = "main";
                        document.querySelector("#uploadFileVideo")?.click();
                    } else Quill.format("customVideo", true);
                },
                tabs: function (value) {
                    outerVisible.value = value;
                }
            }
        }
    },

    placeholder: "请输入内容...",
    readOnly: props.readOnly
});

// 标签页编辑器配置（保持不变）
const options1 = reactive({
    theme: "snow",
    debug: "warn",
    strict: false,
    modules: {
        toolbar: {
            container: [
                ["bold", "italic", "underline", "strike"],
                ["blockquote", "code-block"],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ indent: "-1" }, { indent: "+1" }],
                [{ size: fontSizeStyle.whitelist }],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [{ color: [] }, { background: [] }],
                [{ align: [] }],
                ["clean"],
                ["link", "image", "video"]
            ],
            handlers: {
                image: function (value) {
                    if (value) {
                        const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
                        activeEditor.value = `tab-${currentIndex}`;
                        proxy.$refs.uploadRef.click();
                    } else Quill.format("customImage", true);
                },
                video: function (value) {
                    if (value) {
                        const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
                        activeEditor.value = `tab-${currentIndex}`;
                        document.querySelector("#uploadFileVideo")?.click();
                    } else Quill.format("customVideo", true);
                }
            }
        }
    },
    placeholder: "请输入内容...",
    readOnly: props.readOnly
});

// 上传前校验（保持不变）
const handleBeforeUpload = file => {
    const fileType = file.type;
    file.customUid = generateUUID();

    const validTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg", "image/bmp", "image/webp"];
    if (!validTypes.includes(fileType)) {
        ElNotification({ title: "格式错误", message: "仅支持图片格式", type: "warning" });
        imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
        return false;
    }

    const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
    if (!isLt) {
        ElNotification({ title: "大小超限", message: `不能超过 ${props.fileSizeLimit} MB`, type: "warning" });
        imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
        return false;
    }
    imageListDb.value.push({
        ...file,
        order: imageListDb.value.length
    });

    imageListDb.value = [...imageListDb.value].sort((a, b) => a.order - b.order);

    console.log(imageListDb.value, "=================value==================");
    return true;
};

const handleHttpUpload = async options => {
    let formData = new FormData();
    formData.append("image", options.file);

    try {
        const result = await uploadImg(formData, routerName.value, options.file.customUid);
        if (result?.data?.code === 0) {
            const { data } = result.data;
            const { imgId } = result;

            const fileItem = imageListDb.value.find(item => item.customUid === imgId);
            console.log(fileItem, "=fileItem=");
            if (fileItem) {
                fileItem.serverImgId = imgId;
                fileItem.path = data.path;
                // 记录完成时间，用于排序
                fileItem.completeTime = Date.now();
            }

            const allFilesUploaded = imageListDb.value.every(item => item.path);
            console.log(allFilesUploaded, "=allFilesUploaded=");

            if (allFilesUploaded) {
                let rawQuillEditor = "";
                let quill = "";
                if (activeEditor.value === "main") {
                    rawQuillEditor = toRaw(myQuillEditor.value);
                    quill = rawQuillEditor.getQuill();
                } else {
                    const tabIndex = parseInt(activeEditor.value.split("-")[1]);
                    rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
                    quill = rawQuillEditor.getQuill();
                }
                // 获取当前光标位置
                const selection = quill.getSelection();
                const insertPosition = selection ? selection.index : quill.getLength();

                // 关键修改：按照原始上传顺序排序
                // 假设imageListDb中的顺序就是上传顺序
                // 或者如果有order属性，可以按照order排序
                const sortedImages = [...imageListDb.value];

                // 按顺序插入图片
                sortedImages.forEach((item, index) => {
                    quill.insertEmbed(insertPosition + index, "customImage", {
                        url: "https://dev.ow.f2b211.com" + item.path,
                        id: item.serverImgId || generateUUID()
                    });
                });

                // 最终光标定位到最后一张图片后面
                const finalPosition = insertPosition + sortedImages.length;
                quill.setSelection(finalPosition);

                imageList.value = [];
                imageListDb.value = [];
            }
        }
    } catch (error) {
        console.error("图片上传失败:", error);
        imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
        imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
    }
};

// // 图片上传（保持不变）
// const handleHttpUpload = async options => {
//     let formData = new FormData();
//     formData.append("image", options.file);
//     imageList.value.push(options.file);

//     try {
//         const result = await uploadImg(formData, routerName.value, options.file.customUid);
//         if (result?.data?.code === 0) {
//             const { data } = result.data;
//             const { imgId } = result;

//             const fileItem = imageListDb.value.find(item => item.customUid === imgId);
//             if (fileItem) {
//                 fileItem.serverImgId = imgId;
//                 fileItem.path = data.path;
//             }

//             const allFilesUploaded = imageListDb.value.every(item => item.path);
//             if (allFilesUploaded) {
//                 let rawQuillEditor = "";
//                 let quill = "";
//                 if (activeEditor.value === "main") {
//                     rawQuillEditor = toRaw(myQuillEditor.value);
//                     quill = rawQuillEditor.getQuill();
//                 } else {
//                     const tabIndex = parseInt(activeEditor.value.split("-")[1]);
//                     rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
//                     quill = rawQuillEditor.getQuill();
//                 }

//                 imageListDb.value.forEach(item => {
//                     const length = quill.getLength() - 1;
//                     quill.insertEmbed(length, "customImage", {
//                         url: item.path,
//                         id: item.serverImgId || generateUUID()
//                     });
//                     quill.setSelection(length + 1);
//                 });

//                 const finalLength = quill.getLength();
//                 quill.setSelection(finalLength);

//                 imageList.value = [];
//                 imageListDb.value = [];
//             }
//         }
//     } catch (error) {
//         console.error("图片上传失败:", error);
//         imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
//         imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
//     }
// };

// // // 图片上传（修改插入位置逻辑）
// const handleHttpUpload = async options => {
//     let formData = new FormData();
//     formData.append("image", options.file);
//     // imageList.value.push(options.file);

//     try {
//         const result = await uploadImg(formData, routerName.value, options.file.customUid);
//         if (result?.data?.code === 0) {
//             const { data } = result.data;
//             const { imgId } = result;
//             // imageListDb.value.forEach(item => {
//             //     if (item.customUid === imgId) {
//             //         item.serverImgId = imgId;
//             //         item.path = data.path;
//             //         console.log(item.path, "================>");
//             //     }
//             // });
//             const fileItem = imageListDb.value.find(item => item.customUid === imgId);
//             console.log(fileItem, "=fileItem=");
//             if (fileItem) {
//                 fileItem.serverImgId = imgId;
//                 fileItem.path = data.path;
//             }
//             const allFilesUploaded = imageListDb.value.every(item => item.path);
//             console.log(allFilesUploaded, "=allFilesUploaded=");
//             if (allFilesUploaded) {
//                 let rawQuillEditor = "";
//                 let quill = "";
//                 if (activeEditor.value === "main") {
//                     rawQuillEditor = toRaw(myQuillEditor.value);
//                     quill = rawQuillEditor.getQuill();
//                 } else {
//                     const tabIndex = parseInt(activeEditor.value.split("-")[1]);
//                     rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
//                     quill = rawQuillEditor.getQuill();
//                 }

//                 // 关键修改：获取当前光标位置（选区起始索引）
//                 const selection = quill.getSelection();
//                 // 如果没有选区（光标未激活），默认插入到末尾
//                 const insertPosition = selection ? selection.index : quill.getLength();
//                 console.log(imageListDb, "=imageListDb=");
//                 imageListDb?.value?.forEach(item => {
//                     // 使用光标位置插入图片
//                     setTimeout(() => {
//                         quill.insertEmbed(insertPosition, "customImage", {
//                             url: "https://dev.ow.f2b211.com" + item.path,
//                             id: item.serverImgId || generateUUID()
//                         });
//                     }, 100);

//                     // 插入后光标后移一位（避免多张图片重叠插入）
//                     quill.setSelection(insertPosition + 1);
//                 });

//                 // 最终光标定位到最后一张图片后面
//                 const finalPosition = insertPosition + imageListDb.value.length;
//                 quill.setSelection(finalPosition);

//                 imageList.value = [];
//                 imageListDb.value = [];
//             }
//         }
//     } catch (error) {
//         console.error("图片上传失败:", error);
//         imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
//         imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
//     }
// };

// 视频上传（保持不变）
// const handleVideoUpload = async evt => {
//     if (evt.target.files.length === 0) return;
//     const formData = new FormData();
//     formData.append("video", evt.target.files[0]);
//     try {
//         let rawQuillEditor = "";
//         let quill = "";
//         if (activeEditor.value === "main") {
//             rawQuillEditor = toRaw(myQuillEditor.value);
//             quill = rawQuillEditor.getQuill();
//         } else {
//             const tabIndex = parseInt(activeEditor.value.split("-")[1]);
//             rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
//             quill = rawQuillEditor.getQuill();
//         }
//         let length = quill.selection.savedRange.index;
//         const { data } = await uploadVideo(formData);
//         quill.insertEmbed(length, "customVideo", {
//             url: data.path,
//             id: generateUUID()
//         });
//         uploadFileVideo.value.value = "";
//     } catch (error) {
//         console.log(error);
//     }
// };
// 在<script setup>中替换handleVideoUpload方法
const handleVideoUpload = async evt => {
    if (evt.target.files.length === 0) return;
    const file = evt.target.files[0];

    // 1. 校验视频文件
    const maxSize = 150 * 1024 * 1024;
    if (file.size > maxSize) {
        ElNotification({
            title: "文件过大",
            message: `视频大小不能超过 ${150}MB`,
            type: "warning"
        });
        evt.target.value = "";
        return;
    }

    // 2. 生成视频本地URL（用于生成封面，不上传）
    const localVideoUrl = URL.createObjectURL(file);

    try {
        // 4. 并行处理：上传视频 + 生成并上传封面
        // 4.1 上传视频到视频服务器
        const videoFormData = new FormData();
        videoFormData.append("video", file);
        const videoRes = await uploadVideo(videoFormData); // 视频上传接口

        // 校验视频上传结果（根据你的接口返回格式调整）
        if (videoRes?.code !== 0) {
            throw new Error(`视频上传失败: ${videoRes?.message || "未知错误"}`);
        }
        const videoUrl = videoRes.data.path; // 服务器返回的视频URL
        console.log(localVideoUrl, "=localVideoUrl=");
        // 4.2 生成封面图并上传到图片服务器
        const frameBlob = await Video.captureVideoFrame(localVideoUrl);
        console.log(frameBlob, "============frameBlob===========");
        let coverUrl = "";
        if (!frameBlob) return;

        // 复用图片上传接口（与图片上传逻辑一致）
        const coverFormData = new FormData();
        const coverUid = generateUUID(); // 生成唯一ID
        // formData.append("image", options.file);
        coverFormData.append("image", frameBlob, `cover-${coverUid}.jpg`);
        console.log(coverFormData, "=coverFormData=");
        // 调用图片上传接口（和普通图片上传用同一个接口）
        const coverRes = await uploadImg(coverFormData, routerName.value, coverUid);

        // 校验封面上传结果
        if (coverRes?.data?.code === 0) {
            coverUrl = coverRes.data.data.path; // 服务器返回的封面URL
        } else {
            console.warn("封面上传失败，使用默认封面");
        }

        // 5. 将带封面的视频插入编辑器
        insertVideoToEditor(videoUrl, coverUrl);

        // 6. 上传成功提示
        // loading.close();
        // ElNotification({
        //     title: "上传成功",
        //     message: "视频已添加到编辑器",
        //     type: "success"
        // });
    } catch (error) {
        console.log(error, "==============");
    } finally {
        console.log("======12323232========");
        // 清理资源
        URL.revokeObjectURL(localVideoUrl); // 释放本地视频URL
        evt.target.value = ""; // 重置文件输入框
    }
};

// 辅助方法：插入视频到编辑器
const insertVideoToEditor = (videoUrl, coverUrl) => {
    // 获取当前活跃的编辑器（主编辑器或标签页编辑器）
    let quill;
    if (activeEditor.value === "main") {
        quill = toRaw(myQuillEditor.value)?.getQuill();
    } else {
        const tabIndex = parseInt(activeEditor.value.split("-")[1]);
        quill = toRaw(tabEditors.value[tabIndex])?.getQuill();
    }

    if (quill) {
        const range = quill.getSelection() || { index: 0 };
        // 插入自定义视频组件，携带服务器返回的视频URL和封面URL
        quill.insertEmbed(range.index, "customVideo", {
            url: videoUrl,
            poster: coverUrl // 这里使用图片服务器返回的封面URL
        });
        quill.setSelection(range.index + 1); // 移动光标到视频后
    }
};
// 标签页切换事件（基于key切换）
const handleTabChange = key => {
    const tabIndex = tabsData.value.findIndex(item => item.key === key);
    activeName.value = key;
    activeEditor.value = `tab-${tabIndex}`;
};

// 标签页增删事件
const handleTabsEdit = (targetKey, action) => {
    if (action === "add") {
        if (tabsData.value.length > 5) {
            return useMsg("error", "标签页已达上限 !");
        }
        // 新增标签页：生成唯一key，默认标题，初始不处于编辑状态
        const newKey = `tab_${generateUUID()}`;
        const newIndex = tabsData.value.length;
        tabsData.value.push({
            key: newKey,
            title: `标签${newIndex + 1}`,
            content: "",
            isEditing: false // 新增时默认不编辑
        });
        nextTick(() => {
            activeName.value = newKey;
            activeEditor.value = `tab-${newIndex}`;
            // 新增后自动进入编辑状态
            setTimeout(() => {
                startEditTitle(newIndex);
            }, 100);
        });
    } else if (action === "remove") {
        // 删除标签页
        const index = tabsData.value.findIndex(item => item.key === targetKey);
        tabsData.value.splice(index, 1);
        tabEditors.value.splice(index, 1);
        editInputRefs.value.splice(index, 1);

        // 调整活跃编辑器索引
        if (activeEditor.value.startsWith("tab-")) {
            const currentTabIndex = parseInt(activeEditor.value.split("-")[1]);
            if (currentTabIndex > index) {
                activeEditor.value = `tab-${currentTabIndex - 1}`;
            } else if (currentTabIndex === index) {
                // 若删除当前活跃标签，切换到第一个或主编辑器
                activeEditor.value = tabsData.value.length > 0 ? "tab-0" : "main";
                activeName.value = tabsData.value.length > 0 ? tabsData.value[0].key : null;
            }
        }
    }
};

// 开始编辑标签页标题
const startEditTitle = index => {
    const tab = tabsData.value[index];
    if (!tab) return;
    // 记录原始标题（用于取消编辑时恢复）
    tab.originalTitle = tab.title;
    tab.isEditing = true;
    // 延迟获取焦点，确保输入框已渲染
    nextTick(() => {
        editInputRefs.value[index]?.focus();
    });
};

// 完成编辑（失去焦点或回车）
const finishEditTitle = index => {
    const tab = tabsData.value[index];
    if (!tab) return;
    // 校验标题（不能为空）
    if (!tab.title.trim()) {
        tab.title = tab.originalTitle || `标签${index + 1}`;
        ElNotification({ title: "提示", message: "标签标题不能为空", type: "info" });
    }
    tab.isEditing = false;
    // 更新activeName（如果当前编辑的是活跃标签）
    if (tab.key === activeName.value) {
        activeName.value = tab.key; // 触发重绘
    }
};

// 其他方法（保持不变）
const onContentChange = content => {
    emit("handleRichTextContentChange", content);
    emit("update:content", content);
};
const setTabsInfo = () => {
    outerVisible.value = false;
    //清空
    tabsData.value = [];
    activeName.value = null;
    activeEditor.value = "main";
};
//弹窗关闭前的钩子
const handleBeforeClose = () => {
    setTabsInfo();
};
// 确认按钮点击事件（修改后）
const handleQR = () => {
    const quill = toRaw(myQuillEditor.value)?.getQuill();
    if (!quill) return;
    if (!tabsData.value.length) {
        return useMsg("error", "标签页内容为空 !");
    }
    const range = quill.getSelection(true);

    // 判断是否是编辑已有标签页（通过 currentEditingTabsRef 是否有值）
    if (currentEditingTabsRef.value) {
        // 1. 编辑模式：更新原有标签页组件
        const blot = currentEditingTabsRef.value;
        // 更新 blot 的数据（触发 DOM 更新）
        blot.updateContents(tabsData.value); // 需要在 TabsBlot 中添加 updateContents 方法
        // 清除编辑状态标记
        currentEditingTabsRef.value = null;
    } else {
        // 2. 新增模式：插入新的标签页组件
        quill.insertEmbed(range.index, "tabs", tabsData.value);
        // 关键：在标签页前方插入一个空段落（确保顶部有空间）
        // quill.insertText(range.index, "\n"); // 插入换行
        quill.setSelection(range.index + 1);
        quill.insertText(range.index, "\n"); // 插入换行
    }
    // 关闭弹窗并清空临时数据
    setTabsInfo();
};
//取消
const handleQX = () => {
    setTabsInfo();
};
const initTitle = () => {
    const editor = document.querySelector(".ql-editor");
    if (editor) editor.dataset.placeholder = "";
    titleConfig.value.forEach(item => {
        const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
        if (tip) tip.setAttribute("title", item.title);
    });
};
// 定义 loadTabsDataToEditor 函数
const loadTabsDataToEditor = tabs => {
    // 清空现有数据
    tabsData.value = [];
    // 转换原始标签数据为编辑所需格式（添加key和编辑状态）
    tabs.forEach((tab, index) => {
        tabsData.value.push({
            key: `tab_${generateUUID()}`, // 生成唯一key
            title: tab.title || `标签${index + 1}`, // 避免空标题
            content: tab.content || "", // 标签页内容
            isEditing: false // 编辑状态标记
        });
    });
    // 激活第一个标签页（如果有数据）
    nextTick(() => {
        if (tabsData.value.length > 0) {
            activeName.value = tabsData.value[0].key;
            activeEditor.value = "tab-0";
        }
    });
};

// const cleanEmptyTags = container => {
//     if (!container) return;

//     // 获取所有 <p> 标签
//     const pTags = container.querySelectorAll("p");

//     // 只清理真正的空标签（不含任何内容，包括<br>）
//     Array.from(pTags).forEach(pTag => {
//         // 判断标准：
//         // 1. 完全没有子节点
//         // 2. 或innerHTML为空字符串
//         const isCompletelyEmpty = pTag.childNodes.length === 0 || pTag.innerHTML.trim() === "";

//         if (isCompletelyEmpty) {
//             // 特殊处理：保留首尾空标签，避免编辑器异常
//             const isFirstOrLast = pTag === container.firstElementChild || pTag === container.lastElementChild;

//             if (isFirstOrLast) {
//                 pTag.innerHTML = ""; // 清空内容
//             } else {
//                 pTag.remove(); // 移除中间的纯空标签
//             }
//         }
//     });
// };
// // 触发清理的函数（针对所有编辑器）
// const handleCleanEmptyTags = () => {
//     // 处理主编辑器
//     const mainEditor = document.querySelector("#mainEditor .ql-editor");
//     console.log(mainEditor, "=mainEditor=");
//     if (mainEditor) cleanEmptyTags(mainEditor);
// };

onMounted(() => {
    initTitle();
    // 监听编辑按钮点击事件
    const editorEl = document.querySelector(".ql-editor");
    if (editorEl) {
        editorEl.addEventListener("edit-tabs", e => {
            const tabsData = TabsBlot.value(e.detail.blot.domNode);
            if (tabsData.length > 0) {
                // 保存当前编辑的标签页引用
                currentEditingTabsRef.value = e.detail.blot;
                // 加载数据到弹窗
                loadTabsDataToEditor(tabsData);
                // 显示弹窗
                outerVisible.value = true;
            }
        });
    }
    // 等待编辑器首次渲染完成
    // setTimeout(handleCleanEmptyTags, 300);
});
// 监听内容变化，重新清理空标签
// watch(editorContent, () => {
//     nextTick(() => {
//         setTimeout(handleCleanEmptyTags, 100); // 延迟确保 Quill 已重新渲染
//     });
// });
defineExpose({
    clearEditor: () => {
        const quill = toRaw(myQuillEditor.value)?.getQuill();
        if (quill) {
            quill.setText("");
            editorContent.value = "";
        }
    }
});
</script>

<style lang="scss">
@import "./index.scss";

// 增加编辑器内容区交互性确保删除可用
.ql-editor {
    min-height: 600px; // 确保空编辑器也有点击区域
    cursor: text !important;
    user-select: text !important;
}

// /* 标签页样式 */
.quill-tabs {
    margin: 15px 0;
    overflow: hidden;
    border-radius: 4px;
}

// /* 用伪元素添加图标（可替换为自己的图标） */
.ql-tabs::before {
    font-size: 16px;
    content: "T"; /* 用 emoji 或字体图标 */
}
.title-input {
    width: 100px;
    margin: -2px 0; /* 与标签对齐 */
}

/* 详情样式 */
.o_detail_all {
    overflow: hidden;
    text-align: center;
    background-color: #ffffff;
}
.o_detail_title {
    margin-top: 2vw;
    margin-bottom: 1.25vw;
    overflow: hidden;
    font-size: 2.25em;
    font-weight: 600;
    line-height: 1.2em;
    color: #101010;
    text-align: center;
    background-color: #ffffff;
}
.o_detail_small {
    margin-bottom: 0.7vw;
    font-size: 1.5em;
    color: #333333;
}
.o_detail_text {
    width: 80%;
    margin-right: auto;
    margin-bottom: 0.7vw;
    margin-left: auto;
    font-size: 1.125em;
    line-height: 1.5em;
    color: #737373;
}
.products_des {
    width: 100%;
    margin-bottom: 50px;
}
.products_des img {
    width: 100%;
}
.de_t_n {
    font-size: 1.5em;
    color: #333333;
}
.detail_title {
    padding: 2% 0;
    text-align: center;
}
.detail_title p {
    line-height: 2em;
}
.detail_con_a {
    margin: auto;
    overflow: hidden;
}
.lj_detail_text,
.lj_detail_texts {
    font-size: 0.875em;
}
.lj_detail_text p {
    padding: 0.5% 0;
    line-height: 1.6em;
}

/* seo-pro */
.seo-pro h3 {
    margin: 2% 0 1%;
    font-size: 1.5em;
    font-weight: 400;
    line-height: 1.2;
    color: #333333;
    text-align: center;
}
.seo-pro p {
    margin: 0 0 11px;
    text-align: center;
}
.seo-pro a {
    color: #333333;
    text-decoration: none;
}
.sa_blue,
.sa_blue a,
.seo-pro a:hover {
    color: #009fdf;
}
</style>
