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

    <!-- 图片顺序调整弹窗 -->
    <el-dialog v-model="showImageSortDialog" title="调整图片顺序" width="800px" :before-close="handleImageDialogClose">
        <div class="image-sort-container">
            <draggable
                v-model="sortedImageList"
                :animation="200"
                class="image-grid"
                ghost-class="ghost"
                item-key="customUid"
                @update:modelValue="updateSortOrder"
            >
                <template #item="{ element: img }">
                    <div class="image-item">
                        <div class="image-preview-container">
                            <div class="image-order-badge">{{ img.sortOrder + 1 }}</div>
                            <img :src="img.tempUrl" :alt="`图片 ${img.sortOrder + 1}`" class="preview-img" />
                            <div style="display: flex; justify-content: flex-end; padding: 6px">
                                <el-button size="small" type="default" @click.stop="removeImage(img.customUid)">删除</el-button>
                            </div>
                        </div>
                        <div class="image-info">
                            <span class="image-name">{{ img.name }}</span>
                        </div>
                    </div>
                </template>
            </draggable>

            <div v-if="sortedImageList.length === 0" class="empty-state">暂无图片，请先上传</div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showImageSortDialog = false">取消</el-button>
                <el-button type="primary" @click="confirmInsertImages" :disabled="sortedImageList.length === 0">
                    确认插入
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup name="Editor">
// import { Delete } from "@element-plus/icons-vue";
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 { 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";
import draggable from "vuedraggable";

// 字体配置
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);
const activeEditor = ref("main");

// 标签页数据
const tabsData = ref([]);
const tabEditors = ref([]);
const editInputRefs = ref([]);
const currentEditingTabsRef = ref(null);

// 图片排序相关变量
const showImageSortDialog = ref(false);
const sortedImageList = ref([]);
const uploadingCount = ref(0);

// 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);

// 主编辑器配置
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";
                        sortedImageList.value = [];
                        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}`;
                        sortedImageList.value = [];
                        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" });
        return false;
    }

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

    // 生成临时URL用于预览
    const tempUrl = URL.createObjectURL(file);
    imageListDb.value.push({
        ...file,
        tempUrl,
        sortOrder: imageListDb.value.length, // 初始化排序索引
        serverImgId: "",
        path: ""
    });

    uploadingCount.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 === options.file.customUid);
            if (fileItem) {
                fileItem.serverImgId = imgId;
                fileItem.path = data.path;
            }

            uploadingCount.value--;

            // 所有图片上传完成后显示排序弹窗
            if (uploadingCount.value === 0) {
                sortedImageList.value = [...imageListDb.value];
                updateSortOrder(); // 确保排序索引正确
                nextTick(() => {
                    showImageSortDialog.value = true;
                });
            }
        }
    } catch (error) {
        console.error("图片上传失败:", error);
        const failUid = options.file.customUid;
        imageListDb.value = imageListDb.value.filter(item => item.customUid !== failUid);
        uploadingCount.value = Math.max(0, uploadingCount.value - 1);

        ElNotification({
            title: "上传失败",
            message: `图片 ${options.file.name} 上传失败`,
            type: "error"
        });
    }
};

// 更新排序索引
const updateSortOrder = () => {
    sortedImageList.value.forEach((item, index) => {
        item.sortOrder = index;
    });
};

// 从排序列表移除图片
const removeImage = customUid => {
    // 释放临时URL
    const removedImg = sortedImageList.value.find(img => img.customUid === customUid);
    if (removedImg?.tempUrl) {
        URL.revokeObjectURL(removedImg.tempUrl);
    }

    // 从列表中移除
    sortedImageList.value = sortedImageList.value.filter(img => img.customUid !== customUid);

    // 重新计算排序索引
    updateSortOrder();
};

// 确认插入图片到编辑器
const confirmInsertImages = () => {
    let quill;
    if (activeEditor.value === "main") {
        const rawQuillEditor = toRaw(myQuillEditor.value);
        quill = rawQuillEditor.getQuill();
    } else {
        const tabIndex = parseInt(activeEditor.value.split("-")[1]);
        const rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
        quill = rawQuillEditor.getQuill();
    }

    if (!quill) {
        ElNotification({ title: "错误", message: "编辑器未加载完成", type: "error" });
        return;
    }

    // 获取光标位置
    const range = quill.getSelection() || { index: 0 };
    let currentInsertIndex = range.index;

    // 按排序索引升序插入
    const sortedByOrder = [...sortedImageList.value].sort((a, b) => a.sortOrder - b.sortOrder);
    //
    sortedByOrder.forEach(item => {
        quill.insertEmbed(currentInsertIndex, "customImage", {
            url: item.path,
            id: item.serverImgId || generateUUID()
        });
        currentInsertIndex++;
    });

    // 调整光标位置
    quill.setSelection(currentInsertIndex);

    // 清理资源
    sortedImageList.value.forEach(img => {
        if (img.tempUrl) {
            URL.revokeObjectURL(img.tempUrl);
        }
    });

    // 关闭弹窗并重置
    showImageSortDialog.value = false;
    imageList.value = [];
    imageListDb.value = [];
    sortedImageList.value = [];
};

// 关闭图片排序弹窗时清理资源
const handleImageDialogClose = () => {
    // 释放所有临时URL
    sortedImageList.value.forEach(img => {
        if (img.tempUrl) {
            URL.revokeObjectURL(img.tempUrl);
        }
    });

    // 重置状态
    showImageSortDialog.value = false;
    imageList.value = [];
    imageListDb.value = [];
    sortedImageList.value = [];
};

// 视频上传
const handleVideoUpload = async evt => {
    if (evt.target.files.length === 0) return;
    const file = evt.target.files[0];

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

    // 生成视频本地URL
    const localVideoUrl = URL.createObjectURL(file);

    try {
        // 上传视频
        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;

        // 生成封面图并上传
        const frameBlob = await Video.captureVideoFrame(localVideoUrl);
        let coverUrl = "";
        if (frameBlob) {
            const coverFormData = new FormData();
            const coverUid = generateUUID();
            coverFormData.append("image", frameBlob, `cover-${coverUid}.jpg`);
            const coverRes = await uploadImg(coverFormData, routerName.value, coverUid);

            if (coverRes?.data?.code === 0) {
                coverUrl = coverRes.data.data.path;
            }
        }

        // 插入视频到编辑器
        insertVideoToEditor(videoUrl, coverUrl);
    } catch (error) {
        console.log(error);
    } finally {
        URL.revokeObjectURL(localVideoUrl);
        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 };
        quill.insertEmbed(range.index, "customVideo", {
            url: videoUrl,
            poster: coverUrl
        });
        quill.setSelection(range.index + 1);
    }
};

// 标签页切换事件
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", "标签页已达上限 !");
        }
        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;
    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);

    if (currentEditingTabsRef.value) {
        currentEditingTabsRef.value.updateContents(tabsData.value);
        currentEditingTabsRef.value = null;
    } else {
        quill.insertEmbed(range.index, "tabs", tabsData.value);
        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);
    });
};
const loadTabsDataToEditor = tabs => {
    tabsData.value = [];
    tabs.forEach((tab, index) => {
        tabsData.value.push({
            key: `tab_${generateUUID()}`,
            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";
        }
    });
};

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;
            }
        });
    }
});

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

// 图片排序弹窗样式
.image-sort-container {
    margin-top: 15px;
}
.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px;
}
.image-item {
    width: 150px;
    padding: 8px;
    cursor: move;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
    &:hover {
        box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
    }
}

// 图片预览容器
.image-preview-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}
.preview-img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
}

// 排序序号徽章
.image-order-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 12px;
    color: white;
    background: rgb(0 0 0 / 50%);
    border-radius: 50%;
}

// 圆形删除按钮
// .circle-delete-btn {
//     position: absolute;
//     top: -8px;
//     right: -8px;
//     z-index: 500;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     width: 28px;
//     height: 28px;
//     padding: 0;
//     margin: 0;
//     color: white;
//     background-color: #ff4d4f;
//     border: none;
//     border-radius: 50%;
//     box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
//     transition: all 0.2s;
//     &:hover {
//         color: white;
//         background-color: #d93025;
//         transform: scale(1.1);
//     }
//     .el-icon {
//         font-size: 14px;
//     }
// }
.image-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
}
.image-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.empty-state {
    padding: 30px 0;
    font-size: 14px;
    color: #666666;
    text-align: center;
}
.ghost {
    background-color: #e9ecef;
    opacity: 0.5;
}

// 标签页样式
.quill-tabs {
    margin: 15px 0;
    overflow: hidden;
    border-radius: 4px;
}
.ql-tabs::before {
    font-size: 16px;
    content: "T";
}
.title-input {
    width: 100px;
    margin: -2px 0;
}

// 图片样式
.ql-editor .quill-image {
    max-width: 100%;
    height: auto;
    margin: 5px 0;
    &:focus {
        outline: 2px solid #4285f4;
        outline-offset: 2px;
    }
}

// 详情样式
.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>
