<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/rcv-incd-statistics.css">
    <script src="/static/js/jquery-1.10.2.min.js"></script>
    <script src="/static/js/common.js"></script>
</head>
<body>
<div class="wrap">
    <div class="top-bar" th:text="${title}"></div>
    <div class="body-wrap">
        <div class="container">
            <div th:replace="~{${selectPath}}"></div>
        </div>
        <div class="container-2">
            <div class="title">검색결과</div>
            <div>
                <div>검색기간: <span class="search-time">-</span></div>
                <div>
                    <div><span class="data-cnt">-</span>건</div>
                    <div class="button" onclick="download()">
                        <img src="/static/image/download.svg">
                        저장
                    </div>
                </div>
            </div>
            <div class="content">
                <div>
                    <div th:replace="~{${tablePath}}"></div>
                </div>
            </div>
            <div class="pagination">
                <div class="prev unactive">«</div>
                <div class="active">1</div>
                <div class="next unactive">»</div>
            </div>
            <div class="loading"><img src="/static/image/loading.gif" alt="로딩 이미지"></div>
        </div>
    </div>
</div>
</body>
</html>
<script th:inline="javascript">
    const title   = $('.top-bar').text();
    const tfooter = $('tfoot');
    const tbody   = $('tbody');

    //보고서 유형
    let downloadType = /*[[${type}]]*/;
    const colspan = $('th').length - 1;
    let _type = null;
    let _searchedData = [];
    let _center = null;

    //각 페이지별 api endPoint만 교체
    const apiUrl = '/api/statistics/' + endPoint;

    /**
     * 조회 버튼 이벤트
     */
    function search() {
        const center = $('#center');
        if (selType) { //시간통계, 일통계
            typeSearch();
        }
        else if (downloadType === 'snd_rcv_center') {
            sndRcvCenterSearch();
        }
        else if (center.length)  { //센터별 조회일경우
            sigCommSearch();
        }
        else { //시작일, 종료일 있는 경우
            normalSearch()
        }
    }

    /**
     * 검색 시작일, 종료일 조회
     * @returns {boolean}
     */
    function normalSearch() {
        const startDtVal = startDt.val();
        const endDtVal   = endDt.val();
        const startTmVal = startTm.val();
        const endTmVal   = endTm.val();
        if (!startDtVal || !endDtVal || !startTmVal || !endTmVal) {
            alert("검색 날짜 및 시간을 선택해주세요.");
            return false;
        }
        const fromDt = `${startDtVal} ${startTmVal}:00`;
        const toDt = `${endDtVal} ${endTmVal}:59`;

        const startDateTime = new Date(fromDt);
        const endDateTime   = new Date(toDt);

        if (isNaN(startDateTime.getTime()) || isNaN(endDateTime.getTime())) {
            alert("검색 날짜 또는 시간 형식이 올바르지 않습니다.");
            return false;
        }

        if (startDateTime > endDateTime) {
            alert("시작일시가 종료일시보다 늦을 수 없습니다.");
            return false;
        }


        const params = {fromDt, toDt};
        $('.search-time').text(fromDt + ' ~ ' + toDt);
        callApi(apiUrl, 'POST', params, recvSearchData, errCallBack, 'container-2');
    }

    /**
     * 지역센터 신호연계 조회
     * @returns {boolean}
     */
    function sigCommSearch() {
        const startDtVal = startDt.val();
        let   startTmVal = startTm.val();
        const centerId   = $('#center').val();
        if (!startDtVal || !startTmVal ) {
            alert("검색 날짜 및 시간을 선택해주세요.");
            return false;
        }
        _center = centerId;
        const fromDt = `${startDtVal} ${startTmVal}:00:00`;
        const toDt = `${startDtVal} ${startTmVal}:59:59`;

        const startDateTime = new Date(fromDt);

        if (isNaN(startDateTime.getTime())) {
            alert("검색 날짜 또는 시간 형식이 올바르지 않습니다.");
            return false;
        }

        if (!centerId || centerId === '선택') {
            alert("지역 센터를 선택해주세요.");
            return false;
        }

        const params = {fromDt, toDt, centerId};
        $('.search-time').text(fromDt + ' ~ ' + toDt);
        callApi(apiUrl, 'POST', params, recvSearchData, errCallBack);
    }

    /**
     * 시간, 일 통계
     * @returns {boolean}
     */
    function typeSearch() {
        const startDtVal = startDt.val();
        const endDtVal   = endDt.val();
        let   startTmVal = startTm.val();
        let   endTmVal   = endTm.val();
        const type       = selType.val();
        if (type === 'dd') {
            if (!startDtVal || !endDtVal) {
                alert("검색 날짜 및 시간을 선택해주세요.");
                return false;
            }

            startTmVal = '00:00:00';
            endTmVal = '23:59:59';
        }
        else {
            if (!startDtVal || !endDtVal || !startTmVal || !endTmVal) {
                alert("검색 날짜 및 시간을 선택해주세요.");
                return false;
            }
            startTmVal += ':00:00';
            endTmVal += ':59:59';
        }
        _type = type;
        const fromDt = `${startDtVal} ${startTmVal}`;
        const toDt = `${endDtVal} ${endTmVal}`;

        const startDateTime = new Date(fromDt);
        const endDateTime   = new Date(toDt);

        if (isNaN(startDateTime.getTime()) || isNaN(endDateTime.getTime())) {
            alert("검색 날짜 또는 시간 형식이 올바르지 않습니다.");
            return false;
        }

        if (startDateTime > endDateTime) {
            alert("시작일시가 종료일시보다 늦을 수 없습니다.");
            return false;
        }

        if (!type) {
            alert("통계구분을 선택해주세요.");
            return false;
        }

        const params = {fromDt, toDt, type};
        $('.search-time').text(fromDt + ' ~ ' + toDt);
        callApi(apiUrl, 'POST', params, recvSearchData, errCallBack);
    }

    /**
     * Api Callback Method
     * @param data callback data
     */
    function recvSearchData(data) {
        let cnt = '-';
        _searchedData = data;
        tfooter.empty();
        tfooter.html(callBack(data));
        if (data && data.length) {
            cnt = data.length.toLocaleString();
            const lastPage = getLastPage();
            let end = 10;
            end = lastPage > end ? end : lastPage
            makePageStr(false, lastPage > 10, 1, end, 1, drawTable);
        }
        else {
            makePageStr(false, false, 1, 1, 1, drawTable);
        }
        $('.data-cnt').text(cnt);
    }

    function sndRcvCenterSearch() {
        let fromDt = startDt.val();
        const centerId   = $('#center').val();
        if (!fromDt) {
            alert("검색 날짜 및 시간을 선택해주세요.");
            return false;
        }
        _center = centerId;

        const startDateTime = new Date(fromDt);

        if (isNaN(startDateTime.getTime())) {
            alert("검색 날짜 또는 시간 형식이 올바르지 않습니다.");
            return false;
        }

        if (!centerId || centerId === '선택') {
            alert("지역 센터를 선택해주세요.");
            return false;
        }
        $('.search-time').text(fromDt);
        const params = {fromDt, centerId};
        callApi(apiUrl, 'POST', params, recvSearchData, errCallBack);
    }

    /**
     * Draw WebPage Table
     * @param data Draw Data
     * @returns {*|jQuery} Empty Data is Draw empty-box
     */
    function drawTable(data) {
        let str = '';
        if (!data || !data.length) return tbody.html(`<tr><td></td><td colspan="${colspan}" class="empty-box">표출 정보 없음</td></tr>`);
        data.forEach((obj, idx)=>{
            str += getTableRow(obj, idx);
        });
        tbody.html(str);
    }

    /**
     * Row Click Event
     * @param el this
     * @param tbody this table tbody selector
     */
    function rowClick(el, tbody) {
        $('.' + tbody).find('tr input[type="checkbox"]:checked').prop('checked', false); //Reset Check Row
        const check = $(el).children().eq(0).find('input[type="checkbox"]');
        check.prop('checked', true).trigger('change'); //check change event callback
    }

    /**
     * report download
     */
    function download() {
        const period = $('.search-time').text();
        if (!period || period === '-' || $('.empty-box').length || !tbody.length) {
            return alert("검색된 데이터 정보를 찾을 수 없습니다.");
        }
        const periodArr = period.split(" ~ ");
        const fromDt = periodArr[0];
        const toDt   = periodArr[1];
        if (!new Date(fromDt).getTime() || (toDt && !new Date(toDt).getTime())) {
            return alert("검색 기간 형식이 잘못되었습니다.");
        }
        const sheetName = title;
        const params = {fromDt, toDt};
        if (_type) {
            params.type = _type;
        }

        if (_center) {
            params.centerId = _center;
        }

        fetch('/api/report/' + downloadType + '/download', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(params)
        })
        .then(res => res.blob())
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = sheetName + '_' + getNowStr() + '.xlsx';
            a.click();
        });
    }

    /**
     * Now String Formatting
     * @returns {string}
     */
    function getNowStr() {
        const now  = new Date();
        const yyyy = now.getFullYear();
        const MM   = String(now.getMonth() + 1).padStart(2, '0');
        const dd   = String(now.getDate()).padStart(2, '0');
        const hh   = String(now.getHours()).padStart(2, '0');
        const mm   = String(now.getMinutes()).padStart(2, '0');
        const ss   = String(now.getSeconds()).padStart(2, '0');
        return yyyy + MM + dd + hh + mm + ss;
    }

    /**
     * Error CallBack
     * @param error
     */
    function errCallBack(error)  {
        console.log(error);
        alert(title + ' 중 오류가 발생하였습니다.');
        let str = `<tr><td></td><td colspan="${colspan}" class="empty-box">표출 정보 없음</td></tr>`;
        $('.data-cnt').text('-');
        tbody.html(str);
    }
</script>