<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();
        /*let url = `${baseApiUrl}/upload/graph_manage/de08e7ee-9839-4403-90e5-754dec4e389b.jpg`*/
        let url = `${baseImgUrl}/upload/floor_map/2e5be49c-f8e8-4977-b5b6-db4d95ff9691.svg`

        download(url)

        //ytAjax = new YourTeam.Ajax(url, null, function (res) {
        //    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
        //                },
        //            });
        //        }


        //    });
        //}).send();
        //$.get(`${baseImgUrl}/device/GetFloorSvg/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, function (svg) {

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