$(function () {
    alert("HI");
    floorguid = localStorage.getItem('floorguid');
    chartDom = document.getElementById("floor_map");
    myChart = echarts.init(chartDom, null, { width: 'auto', });
    console.log(floorguid);

    $.ajax({
        url: '/upload/meter_source_1_3.json',
        type: 'GET',
        dataType: 'json',
        cache: false,
        success: function (code, statut) {
            console.log(code.reverse());

            var filter3Floor = code.filter(function (i, n) {
                return i.floor === 3;
            });

            currentData = filter3Floor[0].meter;
            currentData = $.map(currentData, function (item) {
                item.seleted = false;
                return item;
            });

            console.log('currentData', currentData);

            //#region 平面圖設定
            $.get(`/upload/floor_map/${floorguid}.svg`, function (svg) {
                echarts.registerMap('floor_svg', { svg: svg });

                option = {
                    // animationDurationUpdate: 1500,
                    tooltip: {
                        formatter: function (params) {
                            return `名稱：${params.data.name}<br>
                                    Guid：${params.data.guid}`
                        }
                    },
                    toolbox: { //工具欄
                        show: false
                    },
                    geo: {
                        map: 'floor_svg',
                        roam: true,
                        scaleLimit: {  //限制放大縮小倍數
                            max: 8,
                            min: 1.5
                        },
                        layoutSize: '100%',
                        layoutCenter: ['50%', '50%'],
                        zoom: 1.5,
                        silent: true
                    },
                    series: [
                        {
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            symbol: 'circle',
                            symbolSize: 10,
                            symbolOffset: [10, 10],
                            label: {
                                show: false
                            },
                            data: null,
                            z: 2
                        },
                        {   //放未選擇的
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            showEffectOn: 'emphasis', //hover 才會顯示漣漪
                            symbol: "image://data:image/jpeg;base64,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",
                            symbolSize: 30,
                            label: {
                                formatter: '{b}',
                                position: 'bottom',
                                show: true,
                                backgroundColor: 'orange'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                    color: 'yellow'
                                }
                            },
                            selectedMode: 'single',
                            data: null,
                            z: 1
                        },
                        {   //放選擇的
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            showEffectOn: 'render',
                            symbol: "image://data:image/jpeg;base64,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",
                            symbolSize: 30,
                            label: {
                                formatter: '{b}',
                                position: 'bottom',
                                show: true,
                                backgroundColor: 'orange'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                    color: 'yellow'
                                }
                            },
                            selectedMode: 'single',
                            data: null,
                            z: 1
                        }
                    ],
                };

                myChart.setOption(option);
                resetData();

                myChart.getZr().on('click', function (params) {
                    console.log("click", params);
                    var pixelPoint = [params.offsetX, params.offsetY];
                    var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
                    console.log(dataPoint);
                    // currentData.push([dataPoint[0], dataPoint[1], 1]);
                    // myChart.setOption(option);
                });

                //myChart.on('selectchanged', function (params) {
                //    var pixelPoint = [params.offsetX, params.offsetY];
                //    var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
                //    console.log("selectchanged", params);
                //    // currentData.push([dataPoint[0], dataPoint[1], 1]);
                //    // myChart.setOption(option);

                //    currentData = $.map(currentData, function (item) {
                //        item.seleted = false;
                //        return item;
                //    });

                //    if (params.selected.length > 0) {
                //        currentData[params.selected[0].seriesIndex - 1].seleted = true;
                //    }

                //    resetData();
                //});

                // myChart.getZr().on('mousewheel', function (params) {
                //     console.log(params)
                // })
                myChart.on('georoam', function (params) {
                    var zoom = myChart.getOption().geo[0].zoom;
                    console.log(zoom)

                    if (zoom <= 2) {
                        myChart.setOption({
                            geo: {
                                roam: 'scale'
                            },
                            series: [{
                                symbolOffset: [0, 0],
                            }, {
                                data: [],
                            }]
                        });
                    } else {
                        myChart.setOption({
                            geo: {
                                roam: true
                            },
                        });
                    }
                    resetData();
                });
            });
            //#endregion

            //#region 重設平面圖設備資料
            function resetData() {
                const scatter_symbol_convertData = function (data) {
                    var res = [];

                    res = $.map(data, function (item) {
                        delete item.symbol;
                        switch (item.status) {
                            case 0:
                                // item.push({ 'itemStyle': { 'color': '#ccc' } });
                                item.itemStyle = { 'color': '#ccc' };
                                break;
                            case 1:
                                // item.push({ 'itemStyle': { 'color': 'green' } });
                                item.itemStyle = { 'color': 'green' };
                                break;
                            case 2:
                                // item.push({ 'itemStyle': { 'color': 'red' } });
                                item.itemStyle = { 'color': 'red' };
                                break;
                        }
                        return item;
                    });

                    return res;
                }

                const effectScatter_unselect_convertData = function (data) {
                    var res = [];

                    res = data.filter(function (item, index) {
                        return item.seleted == false;
                    });

                    return res;
                }

                const effectScatter_selected_convertData = function (data) {
                    var res = [];

                    res = data.filter(function (item, index) {
                        return item.seleted == true;
                    });

                    return res;
                }

                var zoom = myChart.getOption().geo[0].zoom;
                console.log("resetData", currentData);

                if (zoom <= 2) {
                    myChart.setOption({
                        series: [{
                            symbolOffset: [0, 0],
                            data: scatter_symbol_convertData(currentData)
                        }, {
                            data: []
                        }, {
                            data: []
                        }]
                    });
                } else {
                    myChart.setOption({
                        series: [{
                            symbolOffset: [10, 10],
                            data: scatter_symbol_convertData(currentData)
                        }, {
                            data: effectScatter_unselect_convertData(currentData),
                        }, {
                            data: effectScatter_selected_convertData(currentData),
                        }]
                    });
                }
            }
            //#endregion
        }
    });
    
});