<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>외부 연계 상세정보</title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/popupDetail.css">
    <script src="/static/js/jquery-1.10.2.min.js"></script>
    <script src="/static/js/common.js"></script>
    <script src="/static/js/highcharts/highcharts.js"  type="text/javascript"></script>
    <script src="/static/js/highcharts/exporting.js"   type="text/javascript"></script>
</head>
<body>
    <div class="body-wrap">
        <div class="header-box">
            <div class="title">외부 연계 상세정보</div>
            <div class="detail-info">
                <div class="button-box">
                    <div onclick="refreshData()"><img src="/static/image/arrow-clockwise.svg" alt="갱신 이미지">갱신</div>
<!--                    <div onclick="window.close()"><img src="/static/image/x-circle-fill.svg" alt="닫기 이미지">닫기</div>-->
                </div>
            </div>
        </div>
        <div class="content">
            <div class="tab">
<!--                <div onclick="tabChange('rcv_t', this)" class="rcv_t">국토부 교통정보 수집</div>-->
<!--                <div onclick="tabChange('snd_t', this)" class="snd_t">국토부 교통정보 제공</div>-->
                <div onclick="tabChange('rcv_m', this)" class="rcv_m">국토부 민간교통정보 수집</div>
<!--                <div onclick="tabChange('rcv_i', this)" class="rcv_i">도로공사 돌발정보 수집</div>-->
<!--                <div onclick="tabChange('snd_m', this)" class="snd_m">민간 정보제공</div>-->
<!--                <div onclick="tabChange('rcv_n', this)" class="rcv_n">동부NTS 정보수집</div>-->
                <div onclick="tabChange('rcv_pi', this)" class="rcv_pi">경찰 돌발정보 수집</div>
            </div>
            <div class="tab_content">
<!--                <div th:replace="~{/popupDetailTableFragment::statTable('rcv_t', ${statistics.rcvT})}"></div>-->
<!--                <div th:replace="~{/popupDetailTableFragment::statTable('snd_t', ${statistics.sndT})}"></div>-->
                <div th:replace="~{popupDetailTableFragment::statTable('rcv_m', ${statistics.rcvM})}"></div>
<!--                <div th:replace="~{/popupDetailTableFragment::statTable('rcv_i', ${statistics.rcvI})}"></div>-->
<!--                <div th:replace="~{popupDetailTableFragment::statTable('snd_m', ${statistics.sndM})}"></div>-->
<!--                <div th:replace="/popupDetailTableFragment::statTable('rcv_n', ${statistics.rcvN})"></div>-->
                <div th:replace="~{popupDetailTableFragment::statTable('rcv_pi', ${statistics.rcvPi})}"></div>
            </div>
        </div>
        <div class="chart-box">
            <div class="title chart-title">소통정보 수신</div>
            <div class="chart-container">
                <div id="chart"></div>
            </div>
        </div>
    </div>
</body>
</html>

<script th:inline="javascript">
    const chartData = {
        // rcv_t : /*[[${statistics.rcvT}]]*/,
        // snd_t : /*[[${statistics.sndT}]]*/,
        rcv_m : /*[[${statistics.rcvM}]]*/,
        // rcv_i : /*[[${statistics.rcvI}]]*/,
        // snd_m : /*[[${statistics.sndM}]]*/,
        // rcv_n : /*[[${statistics.rcvN}]]*/,
        rcv_pi : /*[[${statistics.rcvPi}]]*/,
    }

    $('.rcv_m').click();

    function tabChange(type, el) {
        const selected =  $('.' + type);
        if (selected.hasClass('on')) return;
        $('.tab .on').removeClass('on');
        $('.tab_content .on').removeClass('on');
        selected.addClass('on');
        const title = $(el).text();
        $('.chart-title').text(title);
        drawChart(chartData[type], title);
    }

    function rowClick(el, tbody) {
        $('.' + tbody).find('tr input[type="checkbox"]:checked').prop('checked', false);
        const check = $(el).find('input[type="checkbox"]');
        check.prop('checked', true).trigger('change');
    }


    function drawChart(data, title) {
        let xAxis = [];
        let yAxis = [];
        if (data && data.length) {
            data.forEach((obj)=>{
                const hh = obj.hh;
                for (let ii = 0; ii <= 55; ii += 5) {
                    const minute = String(ii).padStart(2, '0');
                    xAxis.push(hh + ':' + minute);
                    yAxis.push(obj['m' + minute]);
                }
            })
        }

        Highcharts.chart('chart', {
            chart: {
                type: 'line'
            },
            title: {
                text: ''
            },
            xAxis: {
                labels: {
                    rotation: -45,
                    step: 12 // label을 1시간마다(12 * 5분) 하나씩만 보여줌
                },
                title : {
                  text : '시간'
                },
                categories : xAxis,
                tickWidth: 1, // 눈금 보이도록 설정
                // minorTickInterval: null, // 보조 눈금 없음
            },
            series : [{
                name: title,
                data: yAxis,
                "showInLegend": false,
            }],
            yAxis: {
                title: {
                    text: '건수'
                },
                labels: {
                    formatter: function () {
                        return Highcharts.numberFormat(this.value, 0, '.', ','); // 1000단위 콤마
                    }
                }
            },
            credits: {
                enabled: false
            },
            exporting :  {
                enabled: false,
            }
        });
    }

    function refreshData() {
        callApi("/api/monitoring/getLinkedAllStatistics", 'POST', null, refreshDataCallBack, null)
    }

    function refreshDataCallBack(data) {
        makeStatisticsTable(data)
    }

    function makeStatisticsTable(data) {
         if (data) {
             const {rcvT, sndT, rcvM, rcvI, sndM, rcvN, rcvPi} = data;
             // chartData.rcv_t  = rcvT;
             // chartData.snd_i  = sndT;
             chartData.rcv_m  = rcvM;
             // chartData.rcv_i  = rcvI;
             // chartData.snd_m  = sndM;
             // chartData.rcv_n  = rcvN;
             chartData.rcv_pi = rcvPi;
             for (let key in  chartData) {
                const tbody = $('.tab_content .' + key + ' table tbody');
                let str = '';
                const list = chartData[key];
                for (let obj of list) {
                    str += `<tr>
                                <td><input id="check_${key}_${key.count}" type="checkbox" style="display: none" th:onchange="checkEvent(this, '${key} table' )"></td>
                                <td>${obj.hh}시</td>
                                <td>${obj.m00.toLocaleString()}</td>
                                <td>${obj.m05.toLocaleString()}</td>
                                <td>${obj.m10.toLocaleString()}</td>
                                <td>${obj.m15.toLocaleString()}</td>
                                <td>${obj.m20.toLocaleString()}</td>
                                <td>${obj.m25.toLocaleString()}</td>
                                <td>${obj.m30.toLocaleString()}</td>
                                <td>${obj.m35.toLocaleString()}</td>
                                <td>${obj.m40.toLocaleString()}</td>
                                <td>${obj.m45.toLocaleString()}</td>
                                <td>${obj.m50.toLocaleString()}</td>
                                <td>${obj.m55.toLocaleString()}</td>
                                <td>${obj.total.toLocaleString()}</td>
                            </tr>`;
                }
                tbody.html(str);
             }
             const selected = $('.tab .on');
             if (selected) {
                 let className = selected.attr('class');
                 className = $.trim(className.replace('on', ''));
                 drawChart(chartData[className]);
             }
         }
    }
</script>