<style>
    [id^=yt_tooltip] {
        width: 450px;
    }
</style>

<div class="row">
    <div id="floChart"></div>
</div>


<script src="lib/echarts.min.js"></script>
<script>
    var floChart = null;

    $(function () {
        initChart();
        chartHandler();
    })

    function initChart() {
        let chartDom = $("#floChart")[0];
        floChart = echarts.init(chartDom, null, { width: 'auto' });
    }

    function getSvg() {
        "/upload/floor_map/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg"
    }

    function chartHandler() {
        floChart.clear();
        $.get(`${baseImgUrl}/upload/floor_map/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, function (svg) {

            if (svg == undefined || svg == null) {
                return;
            }

            echarts.registerMap('floor_svg', { svg: svg });

            option = {
                // animationDurationUpdate: 1500,
                tooltip: {
                    formatter: function (params) {
                        if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
                            return `名稱：${params.data.device_node_full_name}<br>
                                    Guid：${params.data.device_node_guid}`
                        }
                        else {
                            return `名稱：${params.data.device_full_name}<br>
                                    Guid：${params.data.device_guid}`
                        }
                    }
                },
                toolbox: { //工具欄
                    show: false
                },
                geo: {
                    map: 'floor_svg',
                    roam: true,
                    scaleLimit: {  //限制放大縮小倍數
                        max: 32,
                        min: 2.5
                    },
                    layoutSize: '100%',
                    layoutCenter: ['50%', '50%'],
                    zoom: 2.5,
                    silent: true
                },
                series: [
                    {   //不管有無被選擇(圓點)
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        symbol: 'circle',
                        symbolSize: 10,
                        symbolOffset: [10, 10],
                        label: {
                            show: false
                        },
                        data: currentData,
                        z: 2
                    },
                    {   //未選擇的設備(icon)
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        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
                    },
                    {   //被選擇的設備(icon)
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        showEffectOn: 'render',
                        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: 'scatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        symbol: 'circle',
                        symbolSize: 10,
                        symbolOffset: [10, 10],
                        label: {
                            show: false
                        },
                        data: currentData,
                        z: 2
                    },
                    {   //編輯模式底下的設備(icon，只會有一個)
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        symbolSize: 30,
                        label: {
                            formatter: '{b}',
                            position: 'bottom',
                            show: true,
                            backgroundColor: 'orange'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold',
                                color: 'yellow'
                            }
                        },
                        data: null,
                        z: 1
                    },
                ],
            };

            floChart.setOption(option);

            floChart.getZr().on('click', function (params) {
                console.log("click", params);
                var pixelPoint = [params.offsetX, params.offsetY];
                var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
                console.log(dataPoint);

                if (floor_map_mode == "edit") {

                    temp_device_on_floor_map = [{
                        device_guid: selected_temp_device.device_guid,
                        device_full_name: selected_temp_device.device_full_name,
                        device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
                        device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
                        status: selected_temp_device.status,
                        value: dataPoint
                    }];

                   
                }


                // currentData.push([dataPoint[0], dataPoint[1], 1]);
                // floChart.setOption(option);
            });

            floChart.on('selectchanged', function (params) {
              
                console.log("selectchanged", params);
                // currentData.push([dataPoint[0], dataPoint[1], 1]);
                // floChart.setOption(option);

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

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

                
            });

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

                if (zoom <= 2.5) {
                    ResetFloorMap();
                    floChart.setOption({
                        geo: {
                            roam: 'scale'
                        },
                    });
                } else {
                    floChart.setOption({
                        geo: {
                            roam: true
                        },
                    });
                }

               
            });
        })
            .fail(function () {
                toast_warning("查無該樓層地圖")
                floChart.clear();
            });
    }
</script>