import { useEffect, useMemo, useRef, memo } from "react";
import * as echarts from "echarts";
// import 'echarts-gl';
// import { useQueryClient } from "@tanstack/react-query";
import type { EChartsType } from "echarts";
import worldGeoJson from "@/assets/echarts-map/json/world.json";
import { geoCoordMap, countryNameMap, countryCodeMap } from "@/data";
import { getUrl } from "@/lib/utils";
import { CONST_TOOLTIP_TYPE } from "..";
const planePathImg =
    "image://data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMTAyIiB2aWV3Qm94PSIwIDAgNjcgMTAyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9mXzYxMTdfMjEyNDA3KSI+CjxwYXRoIGQ9Ik0zNC4yMTA5IDkxLjE4ODZMNTMuNjU3OCA0MC45NThDNTQuOTM4IDM3LjY1MTMgNTUuNzk4MyAzNC4xNTkyIDU1LjM1NjMgMzAuNjQxQzU0LjQzNTcgMjMuMzEyOCA1MC40Njg0IDExLjAyMDggMzQuMjExMiAxMS4wMjA4QzE5LjE5MDMgMTEuMDIwOCAxMy45MTEgMjEuNTE0NiAxMi4wNTU0IDI4Ljg5MTJDMTAuOTAxIDMzLjQ4MDYgMTEuOTkyNiAzOC4yMTg2IDEzLjgyMzEgNDIuNTgyN0wzNC4yMTA5IDkxLjE4ODZaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfNjExN18yMTI0MDcpIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl82MTE3XzIxMjQwNyIgeD0iMC44OTE3NDQiIHk9IjAuMzMxOTkiIHdpZHRoPSI2NS4yNzA3IiBoZWlnaHQ9IjEwMS41NDUiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNS4zNDQ0MSIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzYxMTdfMjEyNDA3Ii8+CjwvZmlsdGVyPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNjExN18yMTI0MDciIHgxPSIzNS4yODI2IiB5MT0iMTAuODU2NCIgeDI9IjM1LjI4MjYiIHkyPSI4Ni44NTY0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiMwMEYyRkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMTUwMEZGIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==";
interface LinesItemType {
    name: string;
    country_code: string;
    value: number[];
}
type LinesDataType = [LinesItemType, LinesItemType];
type LinesType = [string, LinesDataType[]];
// 创建单个国家的涟漪效果
const createCountryRipple = (countryCode: string) => {
    const coords = geoCoordMap[countryCode];
    if (!coords) return null;
    return {
        name: countryCodeMap[countryCode] ?? "",
        value: coords,
        country_code: countryCode,
    };
};
export const WorldGeo = memo(
    ({
        screenData,
        selectedApp,
        tooltipType,
        tooltipClosed,
        setTooltipClosed,
    }: {
        screenData: any;
        selectedApp: any;
        tooltipType: string;
        tooltipClosed: boolean;
        setTooltipClosed: (value: boolean) => void;
    }) => {
        // const queryClient = useQueryClient()
        const customTooltipRef = useRef<HTMLDivElement | null>(null);
        const proxyGeoRef = useRef<EChartsType | null>(null);
        const preMainToData = useRef<{ country_code: string }[]>([]);
        const mainToData = useMemo(() => {
            // 使用新的数据结构
            const proxiesList =
                selectedApp && selectedApp?.jumpList
                    ? [selectedApp.jumpList]
                    : screenData?.proxy_info?.proxies ?? [];
            // 初始化数据数组 - 不再包含 startCountry
            const data: any = [];
            // 遍历代理列表
            proxiesList.forEach((proxyItem: any) => {
                // 检查是否有数据数组
                if (proxyItem.data && Array.isArray(proxyItem.data)) {
                    // 遍历数据数组中的每个项目
                    proxyItem.data.forEach((item: any) => {
                        // 如果有 ingress_country_code，则添加一对起点和终点
                        if (item.ingress_country_code) {
                            // 添加起点（country_code）
                            data.push({
                                country_code: item.country_code,
                                type: "start",
                                isLine: proxyItem.isLine, // 保存连线标志
                            });
                            // 添加终点（ingress_country_code）
                            data.push({
                                country_code: item.ingress_country_code,
                                type: "end",
                                isLine: proxyItem.isLine, // 保存连线标志
                            });
                        } else {
                            // 如果没有 ingress_country_code，只添加 country_code
                            data.push({
                                country_code: item.country_code,
                                isLine: proxyItem.isLine, // 保存连线标志
                            });
                        }
                    });
                }
            });
            return data;
        }, [screenData, selectedApp]);
        // 创建自定义提示框DOM元素
        const createCustomTooltip = () => {
            // 如果已经存在自定义提示框，则移除它
            if (document.getElementById("custom-fixed-tooltip")) {
                document.getElementById("custom-fixed-tooltip")?.remove();
            }
            // 创建自定义提示框
            const tooltip = document.createElement("div");
            tooltip.id = "custom-fixed-tooltip";
            tooltip.style.position = "fixed";
            tooltip.style.zIndex = "1000";
            tooltip.style.pointerEvents = "auto";
            tooltip.style.backgroundColor = "transparent";
            // 设置提示框内容
            const currentTooltipType =
                CONST_TOOLTIP_TYPE[
                    tooltipType as keyof typeof CONST_TOOLTIP_TYPE
                ] || CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION;
            tooltip.innerHTML = `
               <div class="tooltip-content">
                <img class="line-img" src="${getUrl(
                    "svg/anti-forensics-forwarding/Line.svg"
                )}" alt="" />
            <div class="fill"></div>
                <div class="tip-box">
                    <div>
                        <div class="label" style="color: white; font-weight: bold;">${
                            currentTooltipType.title
                        }</div>
                        <img class="close-icon" src="${getUrl(
                            "svg/Xwhite.svg"
                        )}" alt="" 
                             style="cursor: pointer; " />
                    </div>
                    
                    <img class="${
                        CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type ===
                        currentTooltipType.type
                            ? "encryption-img"
                            : "traffic-obfuscation-img"
                    }" src="${getUrl(
                CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type ===
                    currentTooltipType.type
                    ? "image/nested-encryption.png"
                    : "image/traffic-obfuscation.png"
            )}" alt="" />
                    
                </div>
               </div>
            `;
            // 添加到DOM
            document.body.appendChild(tooltip);
            customTooltipRef.current = tooltip;
            // 添加关闭按钮事件
            const closeButton = tooltip.querySelector(".close-icon");
            if (closeButton) {
                closeButton.addEventListener("click", () => {
                    setTooltipClosed(false);
                    tooltip.remove();
                    customTooltipRef.current = null;
                });
            }
            // 定位提示框
            positionCustomTooltip();
        };
        // 定位自定义提示框 - 优化版本
        const positionCustomTooltip = () => {
            if (!customTooltipRef.current || !proxyGeoRef.current) return;
            // 找到US点
            const coords = geoCoordMap["CA"];
            if (!coords) return;
            try {
                // 将地理坐标转换为屏幕坐标
                const screenCoord = proxyGeoRef.current.convertToPixel(
                    "geo",
                    coords
                );
                if (
                    screenCoord &&
                    Array.isArray(screenCoord) &&
                    screenCoord.length === 2
                ) {
                    // 设置提示框位置
                    // customTooltipRef.current.style.left = `${
                    //     screenCoord[0] + screenCoord[0] / 2 + 18
                    // }px`;
                    // customTooltipRef.current.style.top = `${
                    //     screenCoord[1] - screenCoord[1] / 2 + 7
                    // }px`;
                    // 设置提示框位置
                    customTooltipRef.current.style.left = `${
                        screenCoord[0] + 232 + 7
                    }px`;
                    customTooltipRef.current.style.top = `${
                        screenCoord[1] + 40 - 190
                    }px`;
                }
            } catch (error) {
                console.error("Error positioning tooltip:", error);
            }
        };
        // 主线每个节点tip竖线的经纬度
        const mianLineData = (data: typeof mainToData) => {
            return (
                data
                    .map((item: any) => {
                        const countryCode = item.country_code.toUpperCase();
                        const coords = geoCoordMap[countryCode] as
                            | [number, number]
                            | undefined;
                        if (!coords) return null;
                        return {
                            name: countryCodeMap[countryCode],
                            coords: [coords, [coords[0], coords[1] + 4]],
                            value: countryCode,
                        };
                    })
                    .filter((v: any) => !!v) ?? []
            );
        };
        const getLineItem = (
            preCode: string,
            nextCode: string
        ): [LinesItemType, LinesItemType] => {
            return [
                {
                    name: countryCodeMap[preCode] ?? "",
                    value: geoCoordMap[preCode] ?? [],
                    country_code: preCode,
                },
                {
                    name: countryCodeMap[nextCode] ?? "",
                    value: geoCoordMap[nextCode] ?? [],
                    country_code: nextCode,
                },
            ];
        };
        const getLine = () => {
            // 实现数据处理
            const solidData: LinesType[] = [["main", []]]; // 使用"main"替代startCountry.country_code
            // 收集需要显示涟漪效果的所有点（包括连线和不连线的）
            const ripplePoints: any[] = [];
            // 处理主路径数据
            for (let i = 0; i < mainToData.length; i++) {
                // 如果是最后一个元素，则跳过（因为没有下一个元素作为终点）
                if (i === mainToData.length - 1) continue;
                const currentItem = mainToData[i];
                const nextItem = mainToData[i + 1];
                // 获取当前国家代码
                const countryCode = currentItem.country_code.toUpperCase();
                // 如果当前项是起点，下一项是终点
                if (currentItem.type === "start" && nextItem.type === "end") {
                    const startCode = countryCode;
                    const endCode = nextItem.country_code.toUpperCase();
                    // 无论是否连线，都添加点的涟漪效果
                    const startPoint = createCountryRipple(startCode);
                    const endPoint = createCountryRipple(endCode);
                    if (startPoint) ripplePoints.push(startPoint);
                    if (endPoint) ripplePoints.push(endPoint);
                    // 检查是否应该绘制连线
                    if (currentItem.isLine !== false) {
                        solidData[0]?.[1].push(getLineItem(startCode, endCode));
                    }
                    // 跳过下一项，因为已经处理了
                    i++;
                }
                // 常规情况：当前项到下一项
                else {
                    const nextCountryCode = nextItem.country_code.toUpperCase();
                    // 无论是否连线，都添加点的涟漪效果
                    const currentPoint = createCountryRipple(countryCode);
                    const nextPoint = createCountryRipple(nextCountryCode);
                    if (currentPoint) ripplePoints.push(currentPoint);
                    if (nextPoint) ripplePoints.push(nextPoint);
                    // 检查是否应该绘制连线
                    if (currentItem.isLine !== false) {
                        solidData[0]?.[1].push(
                            getLineItem(countryCode, nextCountryCode)
                        );
                    }
                }
            }
            // 虚线数据处理（保持原有逻辑）
            const pathList =
                screenData?.path_list?.filter(
                    (v: any) => v.name !== screenData?.proxy_info?.name
                ) ?? [];
            const otherLineList = pathList.map(() => {});
            return {
                solidData,
                otherLineList,
                ripplePoints,
            };
        };
        // 获取连线经纬度数据
        const convertData = (data: LinesDataType[]) => {
            const res = [];
            for (let index = 0; index < data.length; index++) {
                const dataIndex = data[index];
                const fromCoord =
                    geoCoordMap[dataIndex?.[0]?.country_code ?? ""];
                const toCoord = geoCoordMap[dataIndex?.[1]?.country_code ?? ""];
                if (fromCoord && toCoord) {
                    res.push([fromCoord, toCoord]);
                }
            }
            return res;
        };
        // 创建双层点效果 - 大点
        const createDualLayerPoint = (
            lastExit: LinesItemType,
            isMainPath: boolean = true
        ) => {
            // 创建数据数组，用于两个散点图层
            const pointData = lastExit
                ? [lastExit].map((v) => {
                      return {
                          name: v.name,
                          value: v.value,
                          datas: {
                              country_code: v.country_code,
                          },
                      };
                  })
                : [];
            // 根据是否是主路径设置不同的大小和颜色
            const outerSize = isMainPath ? 8 : 4;
            const innerSize = isMainPath ? 4 : 2;
            // Use selectedApp.color if available, otherwise default to blue
            const outerColor = selectedApp?.color || "#0ea5e9"; // Use selectedApp.color with fallback
            const innerColor = "#FFFFFF"; // 白色内层
            return [
                {
                    // 外层蓝色点，带涟漪效果
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    zlevel: 3,
                    color: outerColor,
                    symbol: "circle",
                    symbolSize: outerSize,
                    rippleEffect: {
                        period: 8, // 动画时间，值越小速度越快
                        brushType: "stroke", // 波纹绘制方式 stroke
                        scale: 6, // 波纹圆环最大限制，值越大波纹越大
                        brushWidth: 2,
                    },
                    label: {
                        show: false,
                    },
                    tooltip: {
                        show: false,
                        trigger: "item",
                        showContent: true,
                        alwaysShowContent: true,
                        formatter: (params: any) => {
                            // const countryCode = params.data.datas.country_code;
                            // const countryName = params.data.name;
                            // 创建自定义HTML提示框
                            return `
                     <div class="tip-box">
                     <img class="close-icon" src="${getUrl(
                         "svg/Xwhite.svg"
                     )}" alt="" />
                        <div class="label">嵌套加密</div>
                        <img class="encryption-img" width="100%" src="${getUrl(
                            "image/nested-encryption.png"
                        )}" alt="" />
                    </div>
                    `;
                        },
                        backgroundColor: "transparent",
                        borderWidth: 0,
                    },
                    data: pointData,
                } as echarts.SeriesOption,
                {
                    // 内层白色点，不带涟漪效果
                    type: "scatter", // 使用普通scatter，不带特效
                    coordinateSystem: "geo",
                    zlevel: 4, // 确保在蓝色点上方
                    color: innerColor,
                    symbol: "circle",
                    symbolSize: innerSize,
                    label: {
                        show: false,
                    },
                    data: pointData,
                } as echarts.SeriesOption,
            ];
        };
        // 创建路径点的双层效果
        const createPathPoints = (
            dataItems: LinesDataType[],
            isMainPath: boolean = true
        ) => {
            // 创建数据数组
            const pointData = dataItems.map((dataItem: LinesDataType) => {
                return {
                    name: dataItem[0].name,
                    value: geoCoordMap[dataItem[0].country_code],
                    datas: {
                        country_code: dataItem[0].country_code,
                    },
                };
            });
            // 根据是否是主路径设置不同的大小和颜色
            const outerSize = isMainPath ? 8 : 4;
            const innerSize = isMainPath ? 4 : 2;
            // Use selectedApp.color if available, otherwise default to blue
            const outerColor = selectedApp?.color || "#0ea5e9"; // Use selectedApp.color with fallback
            const innerColor = "#FFFFFF"; // 白色内层
            return [
                {
                    // 外层蓝色点，带涟漪效果
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    zlevel: 3,
                    color: outerColor,
                    symbol: "circle",
                    symbolSize: outerSize,
                    rippleEffect: {
                        period: 8, // 动画时间，值越小速度越快
                        brushType: "stroke", // 波纹绘制方式 stroke
                        scale: 6, // 波纹圆环最大限制，值越大波纹越大
                        brushWidth: 2,
                    },
                    label: {
                        show: false,
                    },
                    tooltip: {
                        show: false,
                        trigger: "item",
                        formatter: (params: any) => {
                            // const countryCode = params.data.datas.country_code;
                            // const countryName = params.data.name;
                            // 创建自定义HTML提示框
                            return `
                         <div class="tip-box">
                         <img class="close-icon" src="${getUrl(
                             "svg/Xwhite.svg"
                         )}" alt="" />
                            <div class="label">嵌套加密</div>
                            <img class="encryption-img" width="100%" src="${getUrl(
                                "image/nested-encryption.png"
                            )}" alt="" />
                        </div>
                        `;
                        },
                        backgroundColor: "transparent",
                        borderWidth: 0,
                    },
                    data: pointData,
                } as echarts.SeriesOption,
                {
                    // 内层白色点，不带涟漪效果
                    type: "scatter", // 使用普通scatter，不带特效
                    coordinateSystem: "geo",
                    zlevel: 4, // 确保在蓝色点上方
                    color: innerColor,
                    symbol: "circle",
                    symbolSize: innerSize,
                    label: {
                        show: false,
                    },
                    data: pointData,
                } as echarts.SeriesOption,
            ];
        };
        // 创建带自定义提示框的涟漪点
        const createRipplePointsWithTooltip = (ripplePoints: any) => {
            // Use selectedApp.color if available, otherwise default to blue
            const outerColor = selectedApp?.color || "#0ea5e9"; // Use selectedApp.color with fallback

            return {
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 3,
                color: outerColor,
                symbol: "circle",
                symbolSize: 8,
                rippleEffect: {
                    period: 8,
                    brushType: "stroke",
                    scale: 6,
                    brushWidth: 2,
                },
                label: {
                    show: false,
                    formatter: (params: any) => {
                        return `{${params.data.datas.country_code}|}`;
                    },
                },
                // 添加提示框配置
                tooltip: {
                    show: false,
                    trigger: "item",
                    formatter: (params: any) => {
                        // const countryCode = params.data.datas.country_code;
                        // const countryName = params.data.name;
                        // 创建自定义HTML提示框
                        return `
                     <div class="tip-box">
                        <img class="close-icon" src="${getUrl(
                            "svg/Xwhite.svg"
                        )}" alt="" />
                            <div class="label">嵌套加密</div>
                            <img class="encryption-img" width="100%" src="${getUrl(
                                "image/nested-encryption.png"
                            )}" alt="" />
                    </div>
                    `;
                    },
                    backgroundColor: "transparent",
                    borderWidth: 0,
                },
                data: ripplePoints.map((point: any) => ({
                    name: point.name,
                    value: point.value,
                    datas: {
                        country_code: point.country_code,
                    },
                })),
            } as echarts.SeriesOption;
        };
        // 连线 series
        const getLianData = (series: echarts.SeriesOption[]) => {
            const { solidData, otherLineList, ripplePoints } = getLine();
            console.log(solidData, "solidData");
            console.log(otherLineList, "otherLineList");
            console.log(ripplePoints, "ripplePoints");
            // 如果有需要显示涟漪效果的点，添加它们
            if (ripplePoints.length > 0) {
                // 添加带自定义提示框的外层蓝色点
                series.push(createRipplePointsWithTooltip(ripplePoints));
                // 添加内层白色点，不带涟漪效果
                series.push({
                    type: "scatter", // 使用普通scatter，不带特效
                    coordinateSystem: "geo",
                    zlevel: 4, // 确保在蓝色点上方
                    color: "#FFFFFF", // 白色内层
                    symbol: "circle",
                    symbolSize: 4,
                    label: {
                        show: false,
                    },
                    data: ripplePoints.map((point) => ({
                        name: point.name,
                        value: point.value,
                        datas: {
                            country_code: point.country_code,
                        },
                    })),
                } as echarts.SeriesOption);
            }
            solidData.forEach((item) => {
                // 如果没有连线数据，则跳过
                if (item[1].length === 0) {
                    return;
                }
                const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
                // 添加飞行线
                series.push({
                    name: item[0], // todo ！ 需要在飞线中间添加label
                    type: "lines",
                    zlevel: 1,
                    label: {
                        show: false,
                        position: "middle",
                        formatter: (params: any) => {
                            
                            // 使用自定义样式的文本
                            return (
                                "{text|SS签名}"
                            );
                        },
                        rich: {
                            text: {
                                color: "#FFB27A", // 字体颜色为 #FFB27A
                                fontSize: 18, // 字体大小为 18px
                                padding: [10,10,10,10], // padding 上下为 4，左右为 8
                                backgroundColor: "#8B3700", // 背景颜色为 #8B3700
                                borderRadius: 4, // 可选：添加圆角效果
                            },
                        },
                        // 不需要额外的背景色，因为已经在 rich 中设置了
                        backgroundColor: "transparent",
                        padding: [0, 0, 0, 0],
                    },
                    // 飞行线特效
                    effect: {
                        show: true, // 是否显示
                        period: 4, // 特效动画时间
                        trailLength: 0.7, // 特效尾迹长度。取从 0 到 1 的值，数值越大尾迹越长
                        symbol: planePathImg, // 特效图形标记
                        symbolSize: [10, 20],
                    },
                    // 线条样式
                    lineStyle: {
                        curveness: -0.4, // 飞线弧度
                        type: "solid", // 飞线类型
                        color: selectedApp?.color || "#0ea5e9", // Use selectedApp.color with fallback
                        width: 1.5, // 飞线宽度
                        opacity: 0.1,
                    },
                    data: convertData(
                        item[1]
                    ) as echarts.LinesSeriesOption["data"],
                });
                // 添加路径点的双层效果
                const pathPoints = createPathPoints(item[1], true);
                series.push(...pathPoints);
                // 添加出口节点的双层效果
                if (lastExit) {
                    const exitNodes = createDualLayerPoint(lastExit, true);
                    series.push(...exitNodes);
                }
            });
            otherLineList.forEach((line: any) => {
                line.forEach((item: any) => {
                    const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
                    // 添加虚线
                    series.push({
                        name: item[0],
                        type: "lines",
                        zlevel: 1,
                        label: {
                            show: false,
                        },
                        // 线条样式
                        lineStyle: {
                            curveness: -0.4, // 飞线弧度
                            type: [5, 5], // 飞线类型
                            color: "#F0FFA2", // 飞线颜色
                            width: 0.5, // 飞线宽度
                            opacity: 0.6,
                        },
                        data: convertData(
                            item[1]
                        ) as echarts.LinesSeriesOption["data"],
                    });
                    // 添加路径点的双层效果（次要路径）
                    const pathPoints = createPathPoints(item[1], false);
                    series.push(...pathPoints);
                    // 添加出口节点的双层效果（次要路径）
                    if (lastExit) {
                        const exitNodes = createDualLayerPoint(lastExit, false);
                        series.push(...exitNodes);
                    }
                });
            });
            return true;
        };
        // 主线tip series
        const getMianLineTipData = (series: echarts.SeriesOption[] = []) => {
            const rich = Object.keys(countryCodeMap).reduce((object, code) => {
                object[code] = {
                    color: "transparent",
                    height: 20,
                    width: 20,
                    align: "left",
                    backgroundColor: {
                        image: getUrl(
                            `image/res/flag/${code.toUpperCase()}.png`
                        ), // 动态生成国旗图标
                    },
                };
                return object;
            }, {} as { [key: string]: { [key: string]: number | string | unknown } });
            series.push(
                // 柱状体的主干
                {
                    name: "solidTip",
                    type: "lines",
                    zlevel: 5,
                    effect: {
                        show: false,
                        symbolSize: 5, // 图标大小
                    },
                    lineStyle: {
                        width: 2, // 尾迹线条宽度
                        color: "#F0FFA2",
                        opacity: 1, // 尾迹线条透明度
                        curveness: 0, // 尾迹线条曲直度
                    },
                    label: {
                        show: true,
                        position: "end",
                        color: "#fff",
                        formatter: (parameters) => {
                            return `{left|} {gap1|}{${parameters.value}|}{gap2|}{name|${parameters.name}}{gap3|}{right|}`;
                        },
                        rich: {
                            left: {
                                color: "transparent",
                                height: 35,
                                width: 8,
                                align: "center",
                                backgroundColor: {
                                    image: `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI1OCIgdmlld0JveD0iMCAwIDExIDU4IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTExIDU2LjA4ODRIMVY0Ni4wODg0IiBzdHJva2U9IiNGRkZERDMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0xIDExVjFIMTEiIHN0cm9rZT0iI0ZGRkREMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPHBhdGggZD0iTTguNzI5NDkgMTlWMzkiIHN0cm9rZT0iI0ZGRkREMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPC9zdmc+`, // 动态生成国旗图标
                                },
                            },
                            gap1: {
                                height: 35,
                                width: 8,
                            },
                            ...rich,
                            gap2: {
                                height: 35,
                                width: 6,
                            },
                            name: {
                                color: "#fff",
                                align: "center",
                                lineHeight: 35,
                                fontSize: 14,
                                padding: [2, 0, 0, 0],
                            },
                            gap3: {
                                height: 35,
                                width: 8,
                            },
                            right: {
                                color: "transparent",
                                height: 35,
                                width: 8,
                                align: "center",
                                backgroundColor: {
                                    image: `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSI1OCIgdmlld0JveD0iMCAwIDE0IDU4IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTEyLjczMDIgNDYuMDQzOVY1Ni4wNDM5SDIuNzMwMjIiIHN0cm9rZT0iI0ZGRkREMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPHBhdGggZD0iTTIuNzMwMjIgMS4wNDM5NUgxMi43MzAyVjExLjA0MzkiIHN0cm9rZT0iI0ZGRkREMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPHBhdGggZD0iTTEgMTkuMDQzOVYzOS4wNDM5IiBzdHJva2U9IiNGRkZERDMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+Cjwvc3ZnPg==`, // 动态生成国旗图标
                                },
                            },
                        },
                        backgroundColor: "#080A00",
                    },
                    silent: true,
                    data: mianLineData(mainToData),
                }
            );
        };
        const isCN = (code: string) => {
            return ["HK", "MO", "TW", "CN"].includes(code.toUpperCase());
        };
        const getRegions = () => {
            const codeList: string[] = [];
            const regionsData = mainToData;
            regionsData.forEach((item: any) =>
                codeList.push(
                    isCN(item.country_code)
                        ? "CN"
                        : item.country_code.toUpperCase()
                )
            );
            const regions = codeList.map((item) => {
                return {
                    name: countryCodeMap[item], // 中国
                    itemStyle: {
                        color: "#172554",
                        areaColor: "#172554",
                        borderColor: "#0ea5e9", // 边框颜色
                        borderWidth: 1.2, // 边框宽度
                        borderType: "solid", // 修改为实线边框
                    },
                };
            });
            return regions;
        };
        const getOption = () => {
            const series: echarts.SeriesOption[] = [];
            getLianData(series);
            // getMianLineTipData(series);// 添加主线tip 暂时隐藏
            const regions = getRegions();
            const option = {
                backgroundColor: "transparent",
                // 全局提示框配置
                tooltip: {
                    show: true,
                    trigger: "item",
                    enterable: true,
                    confine: true, // 保持提示框在图表范围内
                    appendToBody: true, // 将提示框附加到body以获得更好的定位
                    // position: function(pos:any, params, dom, rect, size) {
                    position: function (pos: any) {
                        // 自定义定位逻辑（如果需要）
                        return [pos[0] + 10, pos[1] - 50]; // 从光标偏移
                    },
                },
                // 底图样式
                geo: {
                    map: "world", // 地图类型
                    roam: true, // 是否开启缩放
                    zoom: 1, // 初始缩放大小
                    // center: [11.3316626, 19.5845024], // 地图中心点
                    layoutCenter: ["50%", "50%"], //地图位置
                    scaleLimit: {
                        // 缩放等级
                        min: 1,
                        max: 3,
                    },
                    label: {
                        show: false,
                    },
                    nameMap: countryNameMap, // 自定义地区的名称映射
                    // 三维地理坐标系样式
                    itemStyle: {
                        areaColor: "#020617", // 修改为要求的填充颜色
                        borderColor: "#cbd5e1", // 修改为要求的边框颜色
                        borderWidth: 1, // 边框宽度
                        borderType: "dashed", // 修改为点线边框
                    },
                    emphasis: {
                        itemStyle: {
                            areaColor: "#172554", // 修改为鼠标悬停时的填充颜色
                            borderColor: "#0ea5e9", // 修改为鼠标悬停时的边框颜色
                            borderWidth: 1.2, // 修改为鼠标悬停时的边框宽度
                            borderType: "solid", // 修改为实线边框
                        },
                        label: false,
                    },
                    tooltip: {
                        show: true,
                        trigger: "item",
                        triggerOn: "click", // 提示框触发的条件
                        enterable: true, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
                        backgroundColor: "rgba(0,0,0,0.8)",
                        borderColor: "rgba(0,0,0,0.2)",
                        textStyle: {
                            color: "#fff",
                        },
                        formatter: (parameters: {
                            name: string;
                            data:
                                | {
                                      name: string;
                                      datas: { tradingCountry: string };
                                  }
                                | undefined;
                        }) => {
                            if (parameters.data?.name)
                                return parameters.data.name;
                            return parameters.name;
                        },
                    },
                    regions,
                },
                series: series,
            };
            return option;
        };
        const handleResize = () => {
            proxyGeoRef.current?.resize();
        };
        useEffect(() => {
            preMainToData.current?.some(
                (item, index) =>
                    item.country_code !== mainToData[index]?.country_code
            ) && proxyGeoRef.current?.clear();
            preMainToData.current = mainToData;
            const option = getOption();
            proxyGeoRef.current?.setOption(option);
        }, [screenData, mainToData]);
        useEffect(() => {
            const chartDom = document.getElementById("screenGeo");
            proxyGeoRef.current = echarts.init(chartDom);
            echarts.registerMap(
                "world",
                worldGeoJson as unknown as Parameters<
                    typeof echarts.registerMap
                >[1]
            );
            const option = getOption();
            option && proxyGeoRef.current?.setOption(option);
            // 页面resize时触发
            window.addEventListener("resize", handleResize);
            return () => {
                window.removeEventListener("resize", handleResize);
                proxyGeoRef.current?.dispose();
                proxyGeoRef.current = null;
            };
        }, []);
        useEffect(() => {
            if (tooltipClosed) {
                createCustomTooltip();
            }
        }, [tooltipClosed, tooltipType]);
        return (
            <div className="flex-1 h-full flex flex-col">
                <div id="screenGeo" className="flex-1"></div>
            </div>
        );
    }
);