var _url = $("#_url").val();
function filter() {

    $('.dropdown-toggle-data').on("click", function (event) {
        event.preventDefault();
        $(".group-data").toggleClass("open");
    });

    $('.dropdown-toggle-data').on("keydown", function (e) {
        if (e.which == 13 || e.which == 32) {
            e.preventDefault();
            $(".group-data").toggleClass("open");
        }
    });

    $(".datepicker").datepicker({
        language: $("#_lan").val(),
        autoclose: true,
        dateFormat: $("#_formatDate").val()
    });

    $('#filter-period a').on('click', function (event) {
        event.preventDefault();
        var period = $(this).data('val');
        $("input[name=date_dashboard_period]").val(period);
        $('#form-filter').submit();
    });

    // Period interval datepicker close on selected
    $('input[name=date_dashboard_period_ini]').on('change', function () {
        $(this).datepicker('hide');
    });

    $('input[name=date_dashboard_period_end]').on('change', function () {
        $(this).datepicker('hide');
    });

    $('.dropdown-period').click(function (event) {
        event.stopPropagation();
    });


}

function loadCharts() {
    // Initialize the echarts instance based on the prepared dom
    var myChart = echarts.init(document.getElementById('chartConversionTypes'));

    // $.get('data.json').done(function(data) {
    $.getJSON( _url + "module_imobles/dashboard/graphData", function( data ) {

        // Array completo
        var data1 = data.data;
        // Monto array sem o Total
        var data2 = data.data.map(arr => arr.slice(0, -1));

        var dataSeries = [];
        // Montando as Series pra cada Tipo de Conversão
        var count = 0;
        data1.forEach(function(key, value){
            if(count > 0){
                s = {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    datasetIndex: 1,
                    emphasis: { focus: 'series' }
                };
                dataSeries.push(s);
            }
            count++;
        });

        // Montando a série do gŕafico de torta
        s = {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '28%'],
            datasetIndex: 0,
            emphasis: {
                focus: 'self'
            },
            label: {
                formatter: '{b}: {@Total} ({d}%)'
            },
            encode: {
                itemName: 'Tipo de Conversão',
                value: 'Total',
                tooltip: 'Total'
            }
        };

        dataSeries.push(s);

        var option = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: [
                {
                  // Dataset com total para o gráfico de torta
                  source: data1
                },
                {
                  // Dataset sem o total para o gráfico de linhas
                  source: data2
                }
              ],


            xAxis: {
                type: 'category'
            },
            yAxis: {
                gridIndex: 0
            },
            grid: {
                top: '55%'
            },
            series: dataSeries,
        };

        myChart.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });

        myChart.on('globalout', function (event) {
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@Total} ({d}%)'
                    },
                    encode: {
                        value: 'Total',
                        tooltip: 'Total'
                    }
                }
            });
        });
    
        // Display the chart using the configuration items and data just specified.
        myChart.setOption(option);

    });
}

$(function () {
    filter();
    loadCharts();

});