let _list;
let _totList;
let ixrNm;
let istlLctn;
let unit;
let strtDt;
let endDt;
let searchBtn;
let closeBtn;
let _multiChart;
let _pieChart;
const _pageName = '교통량 통계';
const dateTime  = 'yyyy-MM-dd HH:mm';
const dateHour  = 'yyyy-MM-dd HH시';
const time      = 'HH:mm';
const hour      = 'HH시';
const date      = 'yyyy-MM-dd';
const month     = 'yyyy-MM';
let strtDtVal   = new Date();
let endDtVal    = new Date();
strtDtVal.setHours("00");
strtDtVal.setMinutes("00");
strtDtVal.setSeconds("00");
endDtVal.setHours("23");
endDtVal.setMinutes("59");
endDtVal.setSeconds("59");
let searchStart = firstSettingTime;
let searchEnd   = endSettingTime;

const categories = ['A', 'B', 'C', 'D', 'E', 'F', 'FF'];
const pieSeries = [
    {
        name :'교통량 통계 조회 (합계)',
        data  : [
            {
                id    : 'go_tfvl',
                name  : '직진',
                color : 'coral',
                y     : 0,
            },
            {
                id   : 'left_tfvl',
                name : '좌회전',
                color : 'rgb(124, 181, 236)',
                y     : 0,
            },
            {
                id   : 'rght_tfvl',
                name : '우회전',
                color : 'rgb(144, 237, 125)',
                y     : 0,
            }
        ]
    },
]
const multiSeries = [
    {
        name: '직진',
        type : 'column',
        data: [],
        color : 'coral',
    }, 
    {
        name: '좌회전',
        type : 'column',
        data: [],
        color : 'rgb(124, 181, 236)',
    }, 
    {
        name: '우회전',
        type : 'column',
        data: [],
        color : 'rgb(144, 237, 125)',
    },
    {
        name: '서비스수준 ( LOS )',
        type : 'line',
        yAxis: 1,
        data: [],
        color : 'red',
    }
]

const unitData = [
    {
        unit : '15m',
        desc : '15분 통계',
    },
    {
        unit : '30m',
        desc : '30분 통계',
    },
    {
        unit : 'hh',
        desc : '시간 통계(1시간)',
    },
    {
        unit : 'dd',
        desc : '일 통계(1일)',
    },
    {
        unit : 'mn',
        desc : '월 통계(1개월)',
    },
];
$(()=>{
    _list = $('.list').width('100%').height('100%').dxDataGrid({
        dataSource : null,
        allowColumnReordering   : true,
        showColumnLines         : true,
        showBorders             : true,
        allowColumnResizing     : true,
        rowAlternationEnabled   : true,
        columnAutoWidth         : true,
        focusedRowEnabled       : true,
        noDataText              : '표출할 정보가 없습니다.',
        headerFilter: {
            visible: true,
        },
        keyExpr : ['ixr_nm', 'clct_dt'],
        paging: {
            enabled: false,
            pageSize: 1000,
        },
        scrolling: {
            mode: 'standard',
        },
        export:{
            enabled : true,
            texts   : {
                exportAll:"엑셀 파일",
            },
        },
        onExporting(e){
            gridExcellExporting(e, _pageName);
        },
        columns:  [
            {
                dataField : "ixr_nm",
                caption   : '교차로명',
                alignment : 'center',
            },
            {
                dataField : "clct_dt",
                caption   : '수집일시',
                alignment : 'center',
            },
            {
                caption   : '교통량(대)',
                alignment : "center",
                columns : [
                    {
                        dataField : "go_tfvl",
                        caption   : '직진',
                        alignment : 'center',
                    },
                    {
                        dataField : "left_tfvl",
                        caption   : '좌회전',
                        alignment : 'center',
                    },
                    {
                        dataField : "rght_tfvl",
                        caption   : '우회전',
                        alignment : 'center',
                    },
                    {
                        dataField : "tot_tfvl",
                        caption   : '총교통량',
                        alignment : "center",
                    },
                ],
            },
            {
                dataField : "dely_hh",
                caption   : '지체시간(초/대)',
                alignment : "center",
            },
            {
                dataField : "srvc_lvl",
                caption   : 'LOS',
                alignment : "center",
                lookup    : {
                    dataSource : [
                        {
                            los : 0,
                            desc : 'A',
                        },
                        {
                            los : 1,
                            desc : 'B',
                        },
                        {
                            los : 2,
                            desc : 'C',
                        },
                        {
                            los : 3,
                            desc : 'D',
                        },
                        {
                            los : 4,
                            desc : 'E',
                        },
                        {
                            los : 5,
                            desc : 'F',
                        },
                        {
                            los : 6,
                            desc : 'FF',
                        },
                    ],
                    displayExpr : 'desc',
                    valueExpr   : 'los',
                }
            },
        ],
    }).dxDataGrid('instance');
    _totList = $('.tot-list').width('100%').height('100%').dxDataGrid({
        dataSource : [],
        allowColumnReordering   : true,
        showColumnLines         : true,
        showBorders             : true,
        allowColumnResizing     : true,
        rowAlternationEnabled   : true,
        columnAutoWidth         : true,
        noDataText              : '표출할 정보가 없습니다.',
        scrolling: {
            mode: 'standard',
        },
        columns:  [
            {
                dataField : "go_tfvl",
                caption   : '직진',
                alignment : 'center',
            },
            {
                dataField : "left_tfvl",
                caption   : '좌회전',
                alignment : 'center',
            },
            {
                dataField : "rght_tfvl",
                caption   : '우회전',
                alignment : 'center',
            },
            {
                dataField : "tot_tfvl",
                caption   : '총교통량',
                alignment : "center",
            },
        ],
    }).dxDataGrid('instance');

    ixrNm     = new dxSelect($(".ixr_nm"), 'outlined', 200, 30, 'ixr_nm', 'ixr_id', false, 'ixr_id', '교차로명');
    istlLctn  = new dxSelect($(".istl_lctn"), 'outlined', 300, 30, 'istl_lctn', 'cmra_id', false, 'cmra_id', '설치위치');
    unit      = new dxSelect($(".unit"), 'outlined', 150, 30, 'desc', 'unit', false, 'unit', '단위');
    strtDt    = new dxDate($(".strt-dt"), 'yyyy-MM-dd', '조회기간 시작일', 110, 30, 'date', null, '', null);
    strtTime  = new dxDate($(".strt-time"), 'HH:mm', '조회기간 시각', 80, 30, 'time', 5, '', null);
    endDt     = new dxDate($(".end-dt"),  'yyyy-MM-dd', '조회기간 종료일', 110, 30, 'date', null, '', null);
    endTime   = new dxDate($(".end-time"),  'HH:mm', '조회기간 시각', 80, 30, 'time', 5, '', null);
    unit.setDataSource(unitData);
    unit.setValue('15m');
    unit.onItemClick(unitClick);
    strtDt.setValue(strtDtVal);
    strtTime.setValue(strtDtVal);
    endDt.setValue(endDtVal);
    endTime.setValue(endDtVal);
    ixrNm.onItemClick((e)=>ixrNmClick(e.itemData.ixr_id));
    searchBtn = new dxBtn($(".search-btn"),'조회', 'refresh', 'outlined', 80, 30, false, true); 
    closeBtn  =  new dxBtn($(".close-btn"), '닫기', 'close', 'outlined', 80, 30, false, true);
    closeBtn.onClick(()=>window.close());
    searchBtn.onClick(searchBtnClick);


    _multiChart = Highcharts.chart('multi-chart', {
        chart: {
            type: 'column',
            backgroundColor: {
                classNmae: 'dx-theme-background-color dx-theme-border-color',
            },
        },
        title: {
            text  : '교통량 통계 조회',
            style : {
                color: $('.dx-theme-material-typography').css('color'),
            },
        },
        xAxis: {
            categories: [],
            labels: {
                style: {
                  color:  $('.dx-theme-material-typography').css('color')
                }
            },
        },
        yAxis: [{
            ticks : 5,
            labels: {
                style: {
                color:  $('.dx-theme-material-typography').css('color')
                }
            },
            title: {
                text: '교통량(대)',
                style: {
                color:  $('.dx-theme-material-typography').css('color')
                }
            }
        },
        { // Secondary yAxis
            min : 0, 
            max : 6,
            title: {
                text: '서비스수준(LOS)',
                style: {
                color:  $('.dx-theme-material-typography').css('color'),
                }
            },
            labels: {
                style: {
                color:  $('.dx-theme-material-typography').css('color'),
                },
            },
            categories : categories,
            opposite: true,
        }],
        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },
        legend: {
            align: 'center',
            verticalAlign: 'bottom',
            itemStyle:{
                color: $('.dx-theme-material-typography').css('color'),
            },
            backgroundColor: {
                className : 'dx-nav-item dx-theme-border-color',
            }
        },
        series : multiSeries,
        tooltip: {
            formatter: function () {
                let name = this.series.name;
                let dt = name.substring(0,name.indexOf('('));
                if (this.series.name.indexOf('( LOS )') > -1) {
                    let rank = this.series.yAxis.categories[this.y];
                    if (this.y >= 0){
                        return '<b>교통량 통계 조회</b><br>'
                            + '일시 : <b>' 
                            + this.x 
                            + '</b><br>'
                            + '서비스수준(LOS) : <b>' 
                            + rank
                            + '</b>';
                    }
                }
                else  {
                    return '<b>교통량 통계 조회</b><br>'
                        + '일시 : <b>'
                        + this.x 
                        + '</b><br>'
                        + '교통량 : <b>'
                        + this.y
                        + ' 대</b>';
                }
            }
        },
        exporting : {
            enabled : false,
        },
        credits : {
            enabled : false
        },
    });
  
    _pieChart = Highcharts.chart('pie-chart', {
        chart: {
            type: 'pie',
            marginLeft: 20,
            marginTop : 20,
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: {
                classNmae: 'dx-theme-background-color dx-theme-border-color',
            },
        },
        title: {
            text  : '교통량 통계 조회 (합계)',
            y     : 35,
            style : {
                color: $('.dx-theme-material-typography').css('color'),
            },
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                size: '70%',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b><br>{point.y} 대',
                    distance: -50,
                    filter: {
                      property: 'percentage',
                      operator: '>',
                      value: 4
                    },
                    color: $('.dx-theme-material-typography').css('color'),
                },
                showInLegend: true
            }
        },
        tooltip : {
            pointFormat: '{series.name}: <b>{point.y}대</b>'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            floating: false,
            y: 0,
            borderWidth: 1,
            itemStyle:{
                color: $('.dx-theme-material-typography').css('color'),
            },
            backgroundColor: {
                className : 'dx-nav-item dx-theme-border-color',
            },
            shadow: true,
        },
        exporting : {
            enabled : false,
        },
        credits : {
            enabled : false
        },
        series : pieSeries,
    });
    window.$chartArr = [_multiChart, _pieChart];
    fetchBaseData();
})

function fetchBaseData(){
    const uri = "/api/scrs/tb_sc_ixr_mngm";
    getDataAsync(uri, (jsonData)=>{
        dataSorting(jsonData, 'ixr_id');
        ixrNm.setDataSource(jsonData);
        if (jsonData[0]) {
            ixrNm.setValue(jsonData[0].ixr_id);
            ixrNmClick(jsonData[0].ixr_id);
        }
    })
}

function ixrNmClick(ixrIdVal){
    let istlData = [];
    getData('/api/scrs/tb_sc_ixr_cmra_mngm/' + encodeURIComponent(ixrIdVal), istlData);
    istlLctn.setDataSource(istlData[0]);
    if (istlData[0] && istlData[0].length > 0) {
        istlLctn.setValue(istlData[0][0].cmra_id);
    }
}

/**
 * 단위 클릭 변경 이벤트
 * @param {*} e select 상자 정보
 */
function unitClick(e){
    if (e.itemData && e.itemData.unit) {
        let format        = null;
        let display       = null;
        let changeColumn  = null;
        const dateColumn  = [strtDt, endDt];
        const timeColumn  = [strtTime, endTime];
        const strtTimeBox = $('.strt-time-box');
        const endTimeBox  = $('.end-time-box');
        switch (e.itemData.unit) {
            case 'hh':
                changeColumn = 'time';
                format = hour;
                display = 'flex';
                break;
            case 'dd':
                changeColumn = 'date';
                format = date;
                display = 'none';
                break;
            case 'mn':
                changeColumn = 'date';
                format = month;
                display = 'none';
                break;
            default : 
                changeColumn = 'time';
                format = time;
                display = 'flex';
                break;
        }
        if (changeColumn) {
            if (changeColumn === 'time') {
                timeColumn.map((item)=>{
                    item.setFormat(format);
                });
                dateColumn.map((item)=>{
                    item.setFormat(date);
                });
            }
            else {
                dateColumn.map((item)=>{
                    item.setFormat(format);
                });
            }

            strtTimeBox.css('display', display);
            endTimeBox.css('display', display);
        }
        
    }
}

/**
 * 상단 조회 버튼 이벤트
 * @returns 유효성 체크용
 */
function searchBtnClick(){
    if (ixrNm.isNull()) {
        return alertWarning('교차로명을 선택해주세요', null, ixrNm);
    }
    else if (istlLctn.isNull()) {
        return alertWarning('설치위치를 선택해주세요', null, istlLctn);
    }
    const unitVal = unit.getValue();
    let timeArr = getSearchValues(unitVal);
    if (timeArr.length === 0){
        return;
    };
    const FROM_DT    = timeArr[0];
    const TO_DT      = timeArr[1];

    let searchData = {
        ixr_id : ixrNm.getValue(),
        istl_lctn : istlLctn.getValue(),
        FROM_DT : FROM_DT,
        TO_DT   : TO_DT,
    };
    getDataAsync('/api/scrs/' + unitVal, drawTableAndChart, unitVal, searchData);
    // let dataSource = [];
    // let date = Number(FROM_DT+"0000");
    // let time = Number(FROM_DT+"0000");
    // for (let ii=0; ii <= 11; ii++) {
    //     let dateTime   = date.toString();
    //     let  lrgGoTfvl = Number((Math.random()*5).toFixed(0));
    //     let middGoTfvl = Number((Math.random()*5).toFixed(0));
    //     let smalGoTfvl = Number((Math.random()*5).toFixed(0));
    //     let  lrgLeftTfvl  = Number((Math.random()*5).toFixed(0));
    //     let middLeftTfvl = Number((Math.random()*5).toFixed(0));
    //     let smalLeftTfvl = Number((Math.random()*5).toFixed(0));
    //     let  lrgRghtTfvl  = Number((Math.random()*5).toFixed(0));
    //     let middRghtTfvl = Number((Math.random()*5).toFixed(0));
    //     let smalRghtTfvl = Number((Math.random()*5).toFixed(0));
    //     let srvc_lvl = Number((Math.random()*6).toFixed(0));

    //     dataSource.push(
    //         {
    //             ixr_nm              : '평택 교차로',
    //             clct_dt             : dateTime,
    //             lrg_go_tfvl         : lrgGoTfvl,
    //             midd_go_tfvl        : middGoTfvl,
    //             smal_go_tfvl        : smalGoTfvl,
    //             lrg_left_tfvl       : lrgLeftTfvl,
    //             midd_left_tfvl      : middLeftTfvl,
    //             smal_left_tfvl      : smalLeftTfvl,
    //             lrg_rght_tfvl       : lrgRghtTfvl,
    //             midd_rght_tfvl      : middRghtTfvl,
    //             smal_rght_tfvl      : smalRghtTfvl,
    //             walk_cnt            : 0,
    //             intl_atmp_heat_lngt : 0,
    //             ocpty_rate          : 5,
    //             dely_hh             : 30,
    //             srvc_lvl            : srvc_lvl,
    //         }
    //     )
    //     date += 10000;
    // }
    // drawTableAndChart(dataSource, unitVal);
}
function drawTableAndChart(jsonData, unitVal){
    let xAxis = [];
    let totGo    = 0;
    let totLeft  = 0;
    let totRght  = 0;
    let totTot   = 0;
    let yAxis    = [
        {data: []},
        {data: []},
        {data: []},
        {data: []},
    ];

    if (jsonData.length > 0) {
        dataSorting(jsonData, 'clct_dt');
        jsonData.map((item)=>{
            if (item.clct_dt) item.clct_dt = timeFommater(item.clct_dt, unitVal);
            item.go_tfvl   = item.lrg_go_tfvl + item.midd_go_tfvl + item.smal_go_tfvl;
            item.left_tfvl = item.lrg_left_tfvl + item.midd_left_tfvl + item.smal_left_tfvl;
            item.rght_tfvl = item.lrg_rght_tfvl + item.midd_rght_tfvl + item.smal_rght_tfvl;
            item.tot_tfvl  = item.go_tfvl + item.left_tfvl + item.rght_tfvl;
            totGo   += item.go_tfvl;
            totLeft += item.left_tfvl;
            totRght += item.rght_tfvl;
            totTot  += item.tot_tfvl;
            yAxis[0].data.push(item.go_tfvl);
            yAxis[1].data.push(item.left_tfvl);
            yAxis[2].data.push(item.rght_tfvl);
            yAxis[3].data.push(item.srvc_lvl);
            xAxis.push(item.clct_dt);
        })
    }
 
    let totDataSource = [{
        go_tfvl : totGo,
        left_tfvl : totLeft,
        rght_tfvl : totRght,
        tot_tfvl : totTot,
    }];

    pieYAxis = [
        {y:totGo},
        {y:totLeft},
        {y:totTot},
    ]

    _list.option('dataSource', jsonData);
    _totList.option('dataSource', totDataSource);

    _multiChart.update({
        xAxis : {
            categories : xAxis,
        },
        series : [
            {
                data : yAxis[0].data
            },
            {
                data : yAxis[1].data
            },
            {
                data : yAxis[2].data
            },
            {
                data : yAxis[3].data
            },
        ]
    });

    _pieChart.update({
        series : [
            {   
                data : [
                    {
                        y : totGo,
                    },
                    {
                        y : totLeft,
                    },
                    {
                        y : totRght,
                    },
                ]
            },
       ]
    });

    selResultMsg(jsonData);
}

function getSearchValues(unitVal){
    const display = $('.strt-time-box').css('diplay');
    let dateColumns = [strtDt, strtTime, endDt, endTime];
    if (display === "none") {
        dateColumns = [strtDt, endDt];
    }
    for (let dateColumn of dateColumns) {
        if (dateColumn.isValidation()) {
            alertWarning('형식에 맞게 입력해주세요. [ ' + dateColumn.label + ' ]', null, dateColumn);
            return []; 
        }
        else if (dateColumn.isNull()) {
            alertWarning('조회기간을 입력해주세요. [ ' + dateColumn.label + ' ]', null, dateColumn);
            return []; 
        }
    }

    let FROM_DT;
    let TO_DT;
    let format;
    switch (unitVal) {
        case '15m':
            FROM_DT = concateVal(strtDt, 8, strtTime, 4);
            TO_DT   = concateVal(endDt, 8, endTime, 4);
            break;
        case '30m':
            FROM_DT = concateVal(strtDt, 8, strtTime, 4);
            TO_DT   = concateVal(endDt, 8, endTime, 4);
            break;
        case 'hh':
            FROM_DT = concateVal(strtDt, 8, strtTime, 2);
            TO_DT   = concateVal(endDt, 8, endTime, 2);
            break;
        case 'dd':
            FROM_DT = strtDt.getSendDateValue().substring(0, 8);
            TO_DT   = endDt.getSendDateValue().substring(0, 8);
            break;
        case 'mn':
            FROM_DT = strtDt.getSendDateValue().substring(0, 6);
            TO_DT   = endDt.getSendDateValue().substring(0, 6);
            break;
    }

    if (FROM_DT > TO_DT) {
        alertWarning('검색 시작 기간 보다 검색 종료 기간이 큽니다.', null, endDt);
        return [];
    }
    return [FROM_DT, TO_DT];
}

function concateVal(dt, dtNum, time, timeNum){
    return dt.getSendDateValue().substring(0,dtNum) + time.getSendTimeValue().substring(0, timeNum);
}

function timeFommater(data, unitVal){
    console.log(data);
    let str = "";
    str += data.substring(0, 4);
    str += "-";
    str += data.substring(4, 6);
    console.log(unitVal);
    switch (unitVal) {
        case '15m':
            str += "-";
            str += data.substring(6, 8);
            str += " ";
            str += data.substring(8, 10);
            str += ":";
            str += data.substring(10, 12);
            break;
        case '30m':
            str += "-";
            str += data.substring(6, 8);
            str += " ";
            str += data.substring(8, 10);
            str += ":";
            str += data.substring(10, 12);
            break;
        case 'hh':
            str += "-";
            str += data.substring(6, 8);
            str += " ";
            str += data.substring(8, 10);
            str += "시";
            break;
        case 'dd':
            str += "-";
            str += data.substring(6, 8);
            break;
        case 'mn':
            break;
    }
    return str;
}