<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<c:set var="prefixName" scope="request">전자우편 발송 상세 내역</c:set>

<!-- inner page html -->
<div class="content-wrapper" data-doctx="${pageName}">
    <!-- Content -->
    <div class="container flex-grow-1 px-0">
        <div class="card wrapper-list">
            <!-- 상단 버튼 -->
            <div class="container-page-btn">
                <span class="container-window-btn-right">
                    <button type="button" class="btn btn-excel w-px-120" name="btnExcel" title="엑셀">
                        엑셀
                    </button>
                </span>
            </div>
            <!-- 상단 버튼 -->

            <!-- 입력 영역 -->
            <form name="frmEdit">
                <!-- hidden -->
                <input type="hidden" name="conKey" />
            </form>
            <!-- 입력 영역 -->

            <!-- 업무 버튼 및 건수 표시 -->
            <div>
                <span class="container-page-btn" name="gridButtonArea">
                    <!-- 건수, 페이지 표시 -->
                    <div class="d-flex flex-row justify-content-between">
                        <span is="paging-info" class="dataTables_info" name="dataPagingInfo" role="status" aria-live="polite"></span>
                        <ul class="pagination pagination-primary" name="dataPaging">
                        </ul>
                    </div>
                </span>
            </div>
            <!-- 업무 버튼 및 건수 표시 -->

            <!-- DataTables(그리드) -->
            <div class="card-datatable text-nowrap">
                <div class="dataTables_wrapper dt-bootstrap5 no-footer">
                    <div class="table-responsive ox-scroll oy-scroll h-px-600" name="tableRspns">
                        <table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" aria-describedby="DataTables_Table_0_info">
                            <thead class="sticky-thead">
                                <tr name="theadTr" data-search-target="[data-doctx='${pageName}']">
                                    <th class="cmn" style="width: 72px;">No.</th>
                                    <th class="cmn" style="width: 180px;">등록일시</th>
                                    <th class="cmn" style="width: 160px;">등기번호</th>
                                    <th class="cmn" style="width: 100px;">우편번호</th>
                                    <th class="cmn" style="width: 200px;">수취인명</th>
                                    <th class="cmn" style="width: 180px;">배달일시</th>
                                    <th class="cmn" style="width: 120px;">배달결과</th>
                                    <th class="cmn" style="width: 120px;">수령인명</th>
                                    <th class="cmn" style="width: 120px;">수령인관계</th>
                                    <th class="cmn" style="width: 200px;">미배달사유</th>
                                    <th class="cmn" style="width: 280px;">주소</th>
                                    <th class="cmn" style="width: 320px;">상세주소</th>
                                    <th class="cmn" style="width: 240px;">연계식별키</th>
                                    <th class="cmn" style="width: 140px;">등록사용자</th>
                                    <th class="cmn" style="width: 180px;">수정일시</th>
                                    <th class="cmn" style="width: 140px;">수정사용자</th>
                                    <th class="cmn dummy-th"></th>
                                </tr>
                            </thead>
                            <tbody name="tbodyList">
                            </tbody>
                            <template is="curly-brackets" name="tmpltRows">
                                <tr data-index="{data-index}">
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{REG_DT}</td>
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RGST_NMBR}</td>
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RECEV_CAR_OWNER_ZIPCODE}</td>
                                    <td class="cmn text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{RECEV_CAR_OWNER_NM}</td>
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{DELIV_YMD_TM}</td>
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{DELIVRSLTCD_NM}</td>
                                    <td class="cmn text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{SUBRECPRSNNM}</td>
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RELRECPRSNCDNM}</td>
                                    <td class="cmn text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{NONDELIVREASNCDNM}</td>
                                    <td class="cmn text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{RECEV_CAR_OWNER_ADDR}</td>
                                    <td class="cmn text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{RECEV_CAR_OWNER_DETAILADDR}</td>
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CON_KEY}</td>
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RGTR_NM}</td>
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFCN_DT}</td>
                                    <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFR_NM}</td>
                                    <td class="cmn dummy-td"></td>
                                </tr>
                            </template>
                            <template name="tmpltNotFound">
                                <tr class="odd">
                                    <td valign="top" colspan="17" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
                                </tr>
                            </template>
                        </table>
                    </div>
                </div>
            </div>
            <!-- DataTables(그리드) -->
        </div> <!-- <div class="card"> -->
    </div> <!-- <div class="container flex-grow-1 px-0"> -->
    <!-- Content -->
</div>
<!-- / inner page html <div class="content-pop"> -->

<script>
    LoadScript("epst02040Script", wctx.url("/resources/js/fims/epst/epst02040.js?ver=${ver}"));

    /**************************************************************************
     * Global Variable
     **************************************************************************/
    pageObject["${pageName}"] = newDoctxFinder("${pageName}");

    /**************************************************************************
     * script 진입
     **************************************************************************/
    $(document).ready(function() {
        // pageObject
        let $P = pageObject["${pageName}"];

        // URL
        $P.prefixUrl = "${prefixUrl}";
        // datasetControl
        $P.ctrl = newEpst02040Script("${pageName}", "[data-doctx=${pageName}]");
        // main 의 검색 조건을 그대로 유지
        $P.ctrl.query = ${mainQuery};

        /**************************************************************************
         * DataTables 이벤트
         **************************************************************************/
        // dataTable 클릭 이벤트
        $P.dataTableClick = (dataIndex) => {
            if (!dataIndex) return;

            $P.$findn("tbodyList").setCurrentRow(dataIndex);

            Apply.toDataset.current($P.ctrl.dataset, dataIndex);
        }

        // DataTables에 스크롤이 맨 밑으로 이동했을 때 이벤트
        $P.scrollDataList = () => {
            $P.ctrl.load($P.ctrl.query.pageNum + 1);
        }

        /**************************************************************************
         * 사용자 함수(function)
         **************************************************************************/


        /**************************************************************************
         * 버튼 clickEvent
         **************************************************************************/
        // 엑셀 버튼 이벤트
        $P.fnExcel = () => {
            if ($P.ctrl.dataset.empty)
                return dialog.alert("검색된 " + $P.ctrl.prefixName + " 정보가 없습니다.");

            // DataTables(그리드)
            $P.ctrl.query.cellDefs =
                  AppSupport.getCellDefs($P.$findn("theadTr").find("th").not(".dummy-th").not(":eq(0)")
                , $($P.findn("tmpltRows").content).find("td").not(".dummy-td").not(":eq(0)")
                , FimsSupport.getCellDefsForPrivacyCell);

            $P.ctrl.download();
        }

        /**************************************************************************
         * 초기 셋팅
         **************************************************************************/
        // 이벤트 설정
        $P.setEvent = () => {
            // 기본 버튼 이벤트
            $P.$findn("btnExcel").on("click", () => $P.fnExcel());              // 엑셀

            /* 출처: https://nowonbun.tistory.com/538 [명월 일지:티스토리]
                show.bs.modal   : 모달이 열릴 때 바로 실행되는 이벤트입니다.
                shown.bs.modal  : 모달의 열림이 끝나고 실행되는 이벤트입니다.
                hide.bs.modal   : 모달이 닫힐 때 바로 실행되는 이벤트입니다.
                hidden.bs.modal : 모달의 닫힘이 끝나고 실행되는 이벤트입니다.
            */
            // DataTables 스크롤을 위해서 다이얼로그 화면이 생성된 후 Dataset을 설정한다.
            let modalId = $(document.querySelector("[data-doctx='${pageName}']")).parents(".modal")[0].id;
            $("#" + modalId).on("shown.bs.modal", function (e) {
                $P.ctrl.setData( {List: ${List}, Paging :${Paging}} );
            });

            // DataTables width 변경 조정
            Componentization.fnMakeResizableTable($P.findn("tableRspns"));
            // DataTables 스크롤 이벤트 생성
            Componentization.fnMakeScrollableTable($P.findn("tableRspns"), $P.scrollDataList);
        }

        // 초기화 이벤트
        $P.fnReset = (taskSeCd) => {
            // 초기화
            $P.findn("frmEdit").reset();                                        // 화면 초기화

            // 업무 구분에 따른 URL 설정
            $P.ctrl.urls.load = wctx.url($P.prefixUrl + "/040/list.do");   // 검색
        }

        /**************************************************************************
         * 최초 실행 함수
         **************************************************************************/
        // 1. 이벤트 설정
        $P.setEvent();

        // 2. 초기 설정 및 업무 구분 변경
        $P.fnReset("${taskSeCd}");

        // 3. 보안모드
        fn_securityModeToggle($("#securityMode--top").is(":checked"));
    });

</script>
