import {getImageUrl} from "@/utils/tools";

const arrow = getImageUrl("home/map_select.png");
const mapBg = getImageUrl("home/map_bg.png");

export const optionHandle = (regionCode: string,
                             list: object[]) => {
    return {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
            trigger: 'item',
            position: function (point: any[], params: any, dom: any, rect: any, size: any) {
                let x = 0; // x坐标位置
                let y = 0; // y坐标位置
                // 当前鼠标位置
                const pointX = point[0];
                const pointY = point[1];
                // 提示框大小
                const boxWidth = size.contentSize[0];
                const boxHeight = size.contentSize[1];

                // boxWidth > pointX 说明鼠标左边放不下提示框
                if (boxWidth > pointX) {
                    x = pointX + 10;
                } else { // 左边放的下
                    x = pointX - boxWidth - 10;
                }

                // boxHeight > pointY 说明鼠标上边放不下提示框
                if (boxHeight > pointY) {
                    y = 5;
                } else { // 上边放得下
                    y = pointY - boxHeight;
                }
                return [x, y];
            },
            show: true,
            textStyle: {
                fontSize: 14,
                color: '#fff',
            },
            className: 'custom-tooltip-box',
            rich: {
                arrow: {
                    backgroundColor: {
                        image: getImageUrl("home/tool_tip_arrow.png")
                    },
                }
            },
            formatter: function (params: any) {
                let tipHtml = '';
                tipHtml = `
                    <div class="custom-tooltip-style">
                        <div class='custom-tooltip-name'> <span class="custom-tooltip-arrow"></span> ${params.name}</div>
                        <div class='custom-tooltip-style-box'>
                            <div class="ball">
                                <div class="ball-value">${params.data.satisfiedRate}<span>%</span></div>
                                <div class="ball-text">满意率</div>
                            </div>
                            <div class="custom-tooltip-style-box-text">
                                <div class="custom-tooltip-style-box-text-item">在办工单：<span>${params.data.handlingCount}</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item">已办工单：<span>${params.data.filedCount}</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item">超期工单：<span>${params.data.overTimeCount}</span> <b> 件</b></div>
                                <div class="custom-tooltip-style-box-text-item">高频热点：<span class="last">${params.data.hotspotName}</span></div>
                            </div>
                        </div>
                    </div>
                `
                return tipHtml;
            },
        },
        geo: [
            {
                layoutCenter: ['50%', '50%'],//位置
                layoutSize: '180%',//大小
                show: true,
                map: regionCode,
                roam: false,
                zoom: 0.65,
                aspectScale: 1,
                label: {
                    show: false,
                },
                itemStyle: {
                    areaColor: {
                        type: "linear",
                        x: 1200,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: "rgba(38,134,132,0.35)", // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: "rgba(38,134,132,0.75)", // 50% 处的颜色
                        },],
                        global: true, // 缺省为 false
                    },
                    borderColor: "#c0f3fb",
                    borderWidth: 1,
                    shadowColor: "#8cd3ef",
                    shadowOffsetY: 10,
                    shadowBlur: 120,
                }
            },
            {
                type: "map",
                map: regionCode,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ["50%", "54%"],
                layoutSize: "180%",
                roam: false,
                silent: true,
                itemStyle: {
                    borderWidth: 2,
                    borderColor: "rgba( 38,134,132,0.8)",
                    shadowColor: "rgba(29, 111, 165,0.8)",
                    shadowOffsetY: 10,
                    shadowBlur: 2,
                    areaColor: "rgba(5,21,35,0.2)",
                    borderType: "dashed",
                },
            },
        ],
        series: [
            {
                type: "map",
                map: regionCode, // 自定义扩展图表类型
                aspectScale: 1,
                zoom: 0.65, // 缩放
                showLegendSymbol: true,
                label: {
                    show: false,
                },
                itemStyle: {
                    areaColor: {
                        // 纹理填充
                        image: mapBg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                        repeat: 'repeat', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                        // type: "radial",
                        // x: 0.5,
                        // y: 0.5,
                        // r: 1,
                        // colorStops: [{
                        //     offset: 0,
                        //     color: "rgba(  76,107, 88,.8)", // 0% 处的颜色
                        // }, {
                        //     offset: 1,
                        //     color: "rgba( 60,255,253,.8)", // 100% 处的颜色
                        // },],
                        // global: false, // 缺省为 false
                    },
                    borderColor: "#666",
                    borderWidth: 1,

                },
                emphasis: { // 选中的样式
                    label: {
                        formatter: [
                            '{b|}',
                        ].join('\n'),

                        rich: {
                            b: {
                                backgroundColor: {
                                    image: arrow,
                                },
                                height: 60
                            },
                        }
                    },

                    itemStyle: {
                        areaColor:
                            {
                                image: mapBg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                                repeat: 'repeat', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                                // type: "linear",
                                // x: 1200,
                                // y: 1000,
                                // x2: 0,
                                // y2: 0,
                                // colorStops: [{
                                //     offset: 0,
                                //     color: "rgba(255,255,255,0.3)", // 0% 处的颜色
                                // }, {
                                //     offset: 1,
                                //     color: "rgba(255,255,255,0.4)", // 50% 处的颜色
                                // },],
                                // global: true, // 缺省为 false
                            },
                        borderColor: "#fff",
                        borderWidth: 2,

                    }
                },
                layoutCenter: ["50%", "50%"],
                layoutSize: "180%",
                data: list,
                select: {
                    disabled: true,
                }
            },
        ],
    };
}