import Mock from "mockjs";

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: '../../assets/img/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>${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: true,
                    color: '#ccc',
                },
                itemStyle: {
                    areaColor: {
                        type: "linear",
                        x: 1200,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                        },],
                        global: true, // 缺省为 false
                    },
                    borderColor: "#c0f3fb",
                    borderWidth: 1,
                    shadowColor: "#8cd3ef",
                    shadowOffsetY: 10,
                    shadowBlur: 120,
                },
            },
            {
                type: "map",
                map: regionCode,
                zlevel: -1,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ["50%", "51%"],
                layoutSize: "180%",
                roam: false,
                silent: true,
                itemStyle: {
                    borderWidth: 1,
                    // borderColor:"rgba(17, 149, 216,0.6)",
                    borderColor: "rgba(58,149,253,0.8)",
                    shadowColor: "rgba(172, 122, 255,0.5)",
                    shadowOffsetY: 5,
                    shadowBlur: 15,
                    areaColor: "rgba(5,21,35,0.1)",
                },
            },
            {
                type: "map",
                map: regionCode,
                zlevel: -2,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ["50%", "52%"],
                layoutSize: "180%",
                roam: false,
                silent: true,
                itemStyle: {
                    borderWidth: 1,
                    // borderColor: "rgba(57, 132, 188,0.4)",
                    borderColor: "rgba(58,149,253,0.6)",
                    shadowColor: "rgba(65, 214, 255,1)",
                    shadowOffsetY: 5,
                    shadowBlur: 15,
                    areaColor: "transparent",
                },
            },
            {
                type: "map",
                map: regionCode,
                zlevel: -3,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ["50%", "53%"],
                layoutSize: "180%",
                roam: false,
                silent: true,
                itemStyle: {
                    borderWidth: 1,
                    // borderColor: "rgba(11, 43, 97,0.8)",
                    borderColor: "rgba(58,149,253,0.4)",
                    shadowColor: "rgba(58,149,253,1)",
                    shadowOffsetY: 15,
                    shadowBlur: 10,
                    areaColor: "transparent",
                },
            },
            {
                type: "map",
                map: regionCode,
                zlevel: -4,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ["50%", "54%"],
                layoutSize: "180%",
                roam: false,
                silent: true,
                itemStyle: {
                    borderWidth: 5,
                    // borderColor: "rgba(11, 43, 97,0.8)",
                    borderColor: "rgba(5,9,57,0.8)",
                    shadowColor: "rgba(29, 111, 165,0.8)",
                    shadowOffsetY: 15,
                    shadowBlur: 10,
                    areaColor: "rgba(5,21,35,0.1)",
                },
            },
        ],
        series: [
            {

                name: "广西市数据",
                type: "map",
                map: regionCode, // 自定义扩展图表类型
                aspectScale: 1,
                zoom: 0.65, // 缩放
                showLegendSymbol: true,
                label: {
                    show: true,
                    color: '#ccc'
                },
                itemStyle: {
                    areaColor: {
                        type: "linear",
                        x: 1200,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                        },],
                        global: true, // 缺省为 false
                    },
                    borderColor: "#fff",
                    borderWidth: 0.2,

                },
                emphasis: {
                    itemStyle: {
                        show: false,
                        color: "#fff",
                        areaColor: "rgba(0,254,233,0.6)",
                    }
                },
                layoutCenter: ["50%", "50%"],
                layoutSize: "180%",
                markPoint: {
                    symbol: "none",
                },
                data: list,
            },
        ],
    };
}

export const regionCodes: any = [
    {
        name: '翠屏区',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '南溪区',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '江安县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '长宁县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '高县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '筠连县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '珙县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '兴文县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '屏山县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '叙州区',
        value: Mock.mock('@integer(0, 1000)'),
    }
]