<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="dateUtil" uri="http://egovframework.go.kr/functions/date-util" %>

<!-- Main body -->
<div class="main_body">
    <section id="section8" class="main_bars">
        <div class="bgs-main">
            <section id="section5">
                <div class="sub_title"></div>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <!-- 검색 조건 -->
        <div class="gs_b_top">
            <ul class="lef">
                <li class="th">조회기간</li>
                <li>
                    <input type="text" id="searchStartDate" name="searchStartDate" class="input datepicker calender" style="width: 120px;" autocomplete="off" value="${dateUtil:getCurrentDateTime('yyyy-MM-dd')}"/>
                    ~
                    <input type="text" id="searchEndDate" name="searchEndDate" class="input datepicker calender" style="width: 120px;" autocomplete="off" value="${dateUtil:getCurrentDateTime('yyyy-MM-dd')}"/>
                </li>
                <li class="th">차량번호</li>
                <li>
                    <input type="text" id="searchVhrno" name="searchVhrno" class="input" style="width: 120px;" autocomplete="off" placeholder="차량번호"/>
                </li>
                <li class="th">차대번호</li>
                <li>
                    <input type="text" id="searchVin" name="searchVin" class="input" style="width: 150px;" autocomplete="off" placeholder="차대번호"/>
                </li>
                <li class="th">연계결과</li>
                <li>
                    <select id="searchLinkRsltCd" name="searchLinkRsltCd" class="input" style="width: 120px;">
                        <option value="">전체</option>
                        <option value="MSG50000">성공</option>
                        <option value="ERROR">에러</option>
                    </select>
                </li>
                <li class="th">대상자ID</li>
                <li>
                    <input type="text" id="searchCarFfnlgTrgtId" name="searchCarFfnlgTrgtId" class="input" style="width: 150px;" autocomplete="off" placeholder="대상자ID"/>
                </li>
            </ul>
            <ul class="rig2">
                <li><button type="button" id="search_btn" class="newbtnss bg1">검색</button></li>
                <li><button type="button" id="reset_btn" class="newbtnss bg5" style="margin-left: 5px;">초기화</button></li>
            </ul>
        </div>

        <!-- 탭 영역 -->
        <div class="tab_container">
            <ul class="tabs">
                <li class="tab-link current" data-tab="tab-basic">자동차 기본정보 조회 이력</li>
                <li class="tab-link" data-tab="tab-ledger">자동차 등록원부(갑) 조회 이력</li>
            </ul>

            <!-- 자동차 기본정보 조회 이력 탭 -->
            <div id="tab-basic" class="tab-content current" style="padding: 0px;">
                <div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="box_column">
                                <ul class="box_title" style="display: flex; justify-content: space-between; align-items: center;">
                                    <li class="tit">자동차 기본정보 조회 이력 목록</li>
                                    <li class="rig">
                                        <span id="totalCountBasic" class="total-count" style="padding-right: 25px;">총 0건</span>
                                        <select id="perPageSelectBasic" class="input" style="width: 112px;">
                                            <option value="15">페이지당 15</option>
                                            <option value="50">페이지당 50</option>
                                            <option value="100">페이지당 100</option>
                                        </select>
                                        <span class="page_number"><span id="currentPageBasic"></span><span class="bar">/</span><span id="totalPagesBasic"></span> Pages</span>
                                    </li>
                                </ul>
                                <div class="containers">
                                    <div id="gridBasic"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 자동차 등록원부(갑) 조회 이력 탭 -->
            <div id="tab-ledger" class="tab-content" style="padding: 0px;">
                <div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="box_column">
                                <ul class="box_title" style="display: flex; justify-content: space-between; align-items: center;">
                                    <li class="tit">자동차 등록원부(갑) 조회 이력 목록</li>
                                    <li class="rig">
                                        <span id="totalCountLedger" class="total-count" style="padding-right: 25px;">총 0건</span>
                                        <select id="perPageSelectLedger" class="input" style="width: 112px;">
                                            <option value="15">페이지당 15</option>
                                            <option value="50">페이지당 50</option>
                                            <option value="100">페이지당 100</option>
                                        </select>
                                        <span class="page_number"><span id="currentPageLedger"></span><span class="bar">/</span><span id="totalPagesLedger"></span> Pages</span>
                                    </li>
                                </ul>
                                <div class="containers">
                                    <div id="gridLedger"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Main body -->

<style>
.tab_container {
    margin-top: 20px;
}

.tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: 2px solid #ddd;
}

.tabs li {
    padding: 12px 24px;
    cursor: pointer;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-bottom: none;
    margin-right: 4px;
    border-radius: 4px 4px 0 0;
    font-weight: 500;
}

.tabs li.current {
    background-color: #fff;
    border-bottom: 2px solid #fff;
    margin-bottom: -2px;
    color: #0066cc;
    font-weight: bold;
}

.tab-content {
    display: none;
    padding: 20px 0;
}

.tab-content.current {
    display: block;
}
</style>

<script type="text/javascript">
    /**
     * 차량 API 조회 이력 목록 관리 모듈
     */
    (function(window, $) {
        'use strict';

        var SEARCH_COND = {};

        // 페이징 정보를 저장할 전역 변수
        var GRID_PAGINATION_INFO_BASIC = {
            totalCount: 0,
            page: 0,
            perPage: 0
        };

        var GRID_PAGINATION_INFO_LEDGER = {
            totalCount: 0,
            page: 0,
            perPage: 0
        };

        // 검색정보 설정
        var setSearchCond = function() {
            var searchStartDate = $.trim(nvl($("#searchStartDate").val(), "")).replace(/-/g, '');
            var searchEndDate = $.trim(nvl($("#searchEndDate").val(), "")).replace(/-/g, '');
            var searchVhrno = $.trim(nvl($("#searchVhrno").val(), ""));
            var searchVin = $.trim(nvl($("#searchVin").val(), ""));
            var searchLinkRsltCd = $.trim(nvl($("#searchLinkRsltCd").val(), ""));
            var searchCarFfnlgTrgtId = $.trim(nvl($("#searchCarFfnlgTrgtId").val(), ""));

            SEARCH_COND.searchStartDate = searchStartDate;
            SEARCH_COND.searchEndDate = searchEndDate;
            SEARCH_COND.searchVhrno = searchVhrno;
            SEARCH_COND.searchVin = searchVin;
            SEARCH_COND.searchLinkRsltCd = searchLinkRsltCd;
            SEARCH_COND.searchCarFfnlgTrgtId = searchCarFfnlgTrgtId;
        };

        /**
         * 차량 API 조회 이력 목록 관리 네임스페이스
         */
        var VehicleApiHistoryList = {
            /**
             * 그리드 관련 객체 - 기본정보
             */
            gridBasic: {
                instance: null,

                initConfig: function() {
                    var dataSource = this.createDataSource();
                    var perPage = parseInt($('#perPageSelectBasic').val() || 15, 10);

                    var gridConfig = new XitTuiGridConfig();
                    gridConfig.setOptDataSource(dataSource);
                    gridConfig.setOptGridId('gridBasic');
                    gridConfig.setOptGridHeight(470);
                    gridConfig.setOptRowHeight(30);
                    gridConfig.setOptRowHeaderType('');
                    gridConfig.setOptUseClientSort(false);
                    gridConfig.setOptPageOptions({
                        useClient: false,
                        perPage: perPage
                    });
                    gridConfig.setOptColumns(this.getGridColumns());

                    return gridConfig;
                },

                getGridColumns: function() {
                    return [
                        {
                            header: '번호',
                            name: '_rowNum',
                            align: 'center',
                            width: 60,
                            sortable: false,
                            formatter: function(e) {
                                var totalCount = GRID_PAGINATION_INFO_BASIC.totalCount;
                                var page = GRID_PAGINATION_INFO_BASIC.page;
                                var perPage = GRID_PAGINATION_INFO_BASIC.perPage;
                                var rowIndex = e.row.rowKey;
                                return totalCount - (page - 1) * perPage - rowIndex;
                            }
                        },
                        {
                            header: '조회ID',
                            name: 'carBassMatterInqireId',
                            align: 'center',
                            width: 150,
                            formatter: function(e) {
                                if (e.value) {
                                    return '<a href="javascript:void(0)" onclick="openBasicPopup(\'' + e.value + '\')" style="color: #0066cc; text-decoration: underline; cursor: pointer;">' + e.value + '</a>';
                                }
                                return '';
                            }
                        },
                        { header: '정보시스템ID', name: 'infoSysId', align: 'center', width: 120, hidden: true },
                        { header: '정보시스템IP', name: 'infoSysIpAddr', align: 'center', width: 120, hidden: true },
                        { header: '시군구코드', name: 'sggCd', align: 'center', width: 100, hidden: true },
                        { header: '연계정보코드', name: 'linkInfoCd', align: 'center', width: 100, hidden: true },
                        { header: '담당자ID', name: 'picId', align: 'center', width: 100, hidden: true },
                        { header: '담당자IP', name: 'picIpAddr', align: 'center', width: 120, hidden: true },
                        { header: '담당자명', name: 'picNm', align: 'center', width: 100, hidden: true },
                        { header: '요청부과기준일', name: 'dmndLevyCrtrYmd', align: 'center', width: 120 },
                        { header: '요청조회구분코드', name: 'dmndInqSeCd', align: 'center', width: 130, hidden: true },
                        { header: '요청차량번호', name: 'dmndVhrno', align: 'center', width: 120 },
                        { header: '요청차대번호', name: 'dmndVin', align: 'center', width: 150 },
                        { header: '연계결과코드', name: 'linkRsltCd', align: 'center', width: 100 },
                        { header: '연계결과상세', name: 'linkRsltDtl', align: 'left', width: 200 },
                        { header: '차량번호', name: 'vhrno', align: 'center', width: 120 },
                        { header: '차대번호', name: 'vin', align: 'center', width: 150 },
                        { header: '차명', name: 'atmbNm', align: 'left', width: 150 },
                        { header: '연식', name: 'yridnw', align: 'center', width: 80 },
                        { header: '등록일', name: 'regYmd', align: 'center', width: 100 },
                        { header: '말소등록구분코드', name: 'ersrRegSeCd', align: 'center', width: 130 },
                        { header: '말소등록구분명', name: 'ersrRegSeNm', align: 'center', width: 120 },
                        { header: '말소등록일', name: 'ersrRegYmd', align: 'center', width: 100 },
                        { header: '등록상세코드', name: 'regDtlCd', align: 'center', width: 120 },
                        { header: '배기량', name: 'dsplvl', align: 'center', width: 80 },
                        { header: '사용본거지전체주소', name: 'usgsrhldWholAddr', align: 'left', width: 250 },
                        { header: '사용본거지법정동코드', name: 'usgsrhldStdgCd', align: 'center', width: 150 },
                        { header: '사용본거지행정동코드', name: 'usgsrhldDongCd', align: 'center', width: 150 },
                        { header: '대표소유자회원구분코드', name: 'rprsOwnrMbrSeCd', align: 'center', width: 160 },
                        { header: '대표소유자회원번호', name: 'rprsvOwnrIdecno', align: 'center', width: 130 },
                        { header: '대표소유자성명', name: 'rprsOwnrNm', align: 'center', width: 100 },
                        { header: '대표소유자전화번호', name: 'rprsOwnrTelno', align: 'center', width: 120 },
                        { header: '소유자전체주소', name: 'ownrWholaddr', align: 'left', width: 250 },
                        { header: '소유자법정동코드', name: 'ownrStdgCd', align: 'center', width: 130 },
                        { header: '소유자행정동코드', name: 'ownrDongCd', align: 'center', width: 130 },
                        { header: '신차량번호', name: 'rearVhrno', align: 'center', width: 120 },
                        { header: '사용연료코드', name: 'useFuelCd', align: 'center', width: 120 },
                        { header: '용도구분코드', name: 'usgSeCd', align: 'center', width: 100 },
                        { header: '원동기형식명', name: 'mtrsFomNm', align: 'center', width: 150 },
                        { header: '이전차량번호', name: 'bfrVhrno', align: 'center', width: 120 },
                        { header: '차량총중량', name: 'vhclTotlWt', align: 'center', width: 100 },
                        { header: '차령만료일자', name: 'veagEndYmd', align: 'center', width: 100 },
                        { header: '차번호변경시기', name: 'chgYmd', align: 'center', width: 120 },
                        { header: '차종종별코드', name: 'carmdlAsortCd', align: 'center', width: 120 },
                        { header: '차종유형코드', name: 'carmdlTypeCd', align: 'center', width: 120 },
                        { header: '차종분류코드', name: 'carmdlSeCd', align: 'center', width: 120 },
                        { header: '최대적재량', name: 'mxmmLdg', align: 'center', width: 100 },
                        { header: '차종종별명', name: 'carmdlAsortNm', align: 'center', width: 120 },
                        { header: '차종유형명', name: 'carmdlTypeNm', align: 'center', width: 120 },
                        { header: '차종분류명', name: 'carmdlClsfNm', align: 'center', width: 120 },
                        { header: '최초등록일', name: 'frstRegYmd', align: 'center', width: 100 },
                        { header: '형식', name: 'fomNm', align: 'center', width: 150 },
                        { header: '취득일자', name: 'acqsYmd', align: 'center', width: 100 },
                        { header: '취득종료일자', name: 'acqsEndYmd', align: 'center', width: 100 },
                        { header: '제작년월일', name: 'fbctnYmd', align: 'center', width: 100 },
                        { header: '이전등록일', name: 'transrRegYmd', align: 'center', width: 100 },
                        { header: '제원등록상태코드', name: 'spcfRegSttsCd', align: 'center', width: 140 },
                        { header: '색상명', name: 'colorNm', align: 'center', width: 100 },
                        { header: '저당수', name: 'mrtgCnt', align: 'center', width: 80 },
                        { header: '압류건수', name: 'szrCnt', align: 'center', width: 80 },
                        { header: '구조변경수', name: 'strctChgCnt', align: 'center', width: 100 },
                        { header: '번호판영치여부', name: 'nopltCsdyYn', align: 'center', width: 120 },
                        { header: '번호판영치최고일', name: 'nopltCsdyAvtsmtYmd', align: 'center', width: 130 },
                        { header: '출처구분코드', name: 'srcSeCd', align: 'center', width: 100 },
                        { header: '번호판규격코드', name: 'nopltSpcfctCd', align: 'center', width: 120 },
                        { header: '취득금액', name: 'acqsAmt', align: 'center', width: 100 },
                        { header: '검사유효기간시작일', name: 'inspVldPdBgngYmd', align: 'center', width: 140 },
                        { header: '검사유효기간종료일', name: 'inspVldPdEndYmd', align: 'center', width: 140 },
                        { header: '사용본거지관청코드', name: 'usgsrhldGrcCd', align: 'center', width: 150 },
                        { header: '승차정원수', name: 'rdcpctCnt', align: 'center', width: 100 },
                        { header: '제원관리번호', name: 'spmnno', align: 'center', width: 120 },
                        { header: '주행거리', name: 'drvngDstnc', align: 'center', width: 100 },
                        { header: '최초등록접수번호', name: 'frstRegAplyRcptNo', align: 'center', width: 140 },
                        { header: '예고통지일', name: 'vlntErsrPrvntcAvtsmtYmd', align: 'center', width: 100 },
                        { header: '등록기관명', name: 'ognzNm', align: 'center', width: 150 },
                        { header: '처리불가사유코드', name: 'prcsImprtyRsnCd', align: 'center', width: 140 },
                        { header: '처리불가사유명세', name: 'prcsImprtyRsnDtls', align: 'left', width: 200 },
                        { header: '차체길이', name: 'cbdLt', align: 'center', width: 80 },
                        { header: '차체너비', name: 'cbdBt', align: 'center', width: 80 },
                        { header: '차체높이', name: 'cbdHg', align: 'center', width: 80 },
                        { header: '최초최대적재량', name: 'frstMxmmLdg', align: 'center', width: 120 },
                        { header: '연료소비율', name: 'fuelCnsmprt', align: 'center', width: 100 },
                        { header: '전기복합연료소비율', name: 'elctyCmpndFuelCnsmprt', align: 'center', width: 160 },
                        {
                            header: '조회일시',
                            name: 'regDt',
                            align: 'center',
                            width: 150,
                            formatter: function(e) {
                                return e.value ? moment(e.value).format('YYYY-MM-DD HH:mm:ss') : '';
                            }
                        },
                        { header: '등록자ID', name: 'rgtr', align: 'center', width: 100, hidden: true },
                        { header: '등록자', name: 'rgtrNm', align: 'center', width: 100 }
                    ];
                },

                createDataSource: function() {
                    return {
                        api: {
                            readData: {
                                url: '<c:url value="/carInspectionPenalty/history/carBassMatterInqire/list.ajax"/>',
                                method: 'POST',
                                contentType: 'application/x-www-form-urlencoded',
                                processData: true
                            }
                        },
                        initialRequest: false,
                        serializer: function(params) {
                            setSearchCond();
                            SEARCH_COND.perPage = params.perPage;
                            SEARCH_COND.page = params.page;
                            return $.param(SEARCH_COND);
                        }
                    };
                },

                create: function() {
                    var gridConfig = this.initConfig();
                    var Grid = tui.Grid;
                    this.instance = gridConfig.instance(Grid);
                    Grid.applyTheme('striped');
                    this.gridBindEvents();
                },

                gridBindEvents: function() {
                    var self = this;

                    this.instance.on('successResponse', function(ev) {
                        var responseObj = JSON.parse(ev.xhr.response);
                        if(responseObj) {
                            $("#currentPageBasic").text(responseObj.data.pagination.page);
                            $("#totalPagesBasic").text(responseObj.data.pagination.totalPages);
                            var totalCount = responseObj.data.pagination.totalCount;
                            $("#totalCountBasic").text('총 ' + totalCount.toLocaleString() + '건');

                            GRID_PAGINATION_INFO_BASIC.totalCount = responseObj.data.pagination.totalCount;
                            GRID_PAGINATION_INFO_BASIC.page = responseObj.data.pagination.page;
                            GRID_PAGINATION_INFO_BASIC.perPage = responseObj.data.pagination.perPage;
                        }
                    });
                }
            },

            /**
             * 그리드 관련 객체 - 등록원부
             */
            gridLedger: {
                instance: null,

                initConfig: function() {
                    var dataSource = this.createDataSource();
                    var perPage = parseInt($('#perPageSelectLedger').val() || 15, 10);

                    var gridConfig = new XitTuiGridConfig();
                    gridConfig.setOptDataSource(dataSource);
                    gridConfig.setOptGridId('gridLedger');
                    gridConfig.setOptGridHeight(470);
                    gridConfig.setOptRowHeight(30);
                    gridConfig.setOptRowHeaderType('');
                    gridConfig.setOptUseClientSort(false);
                    gridConfig.setOptPageOptions({
                        useClient: false,
                        perPage: perPage
                    });
                    gridConfig.setOptColumns(this.getGridColumns());

                    return gridConfig;
                },

                getGridColumns: function() {
                    return [
                        {
                            header: '번호',
                            name: '_rowNum',
                            align: 'center',
                            width: 60,
                            sortable: false,
                            formatter: function(e) {
                                var totalCount = GRID_PAGINATION_INFO_LEDGER.totalCount;
                                var page = GRID_PAGINATION_INFO_LEDGER.page;
                                var perPage = GRID_PAGINATION_INFO_LEDGER.perPage;
                                var rowIndex = e.row.rowKey;
                                return totalCount - (page - 1) * perPage - rowIndex;
                            }
                        },
                        {
                            header: '조회ID',
                            name: 'carLedgerFrmbkId',
                            align: 'center',
                            width: 150,
                            formatter: function(e) {
                                if (e.value) {
                                    return '<a href="javascript:void(0)" onclick="openLedgerPopup(\'' + e.value + '\')" style="color: #0066cc; text-decoration: underline; cursor: pointer;">' + e.value + '</a>';
                                }
                                return '';
                            }
                        },
                        { header: '정보시스템ID', name: 'infoSysId', align: 'center', width: 120, hidden: true },
                        { header: '정보시스템IP', name: 'infoSysIpAddr', align: 'center', width: 120, hidden: true },
                        { header: '시군구코드', name: 'sggCd', align: 'center', width: 100, hidden: true },
                        { header: '연계정보코드', name: 'linkInfoCd', align: 'center', width: 100, hidden: true },
                        { header: '담당자ID', name: 'picId', align: 'center', width: 100, hidden: true },
                        { header: '담당자IP', name: 'picIpAddr', align: 'center', width: 120, hidden: true },
                        { header: '담당자명', name: 'picNm', align: 'center', width: 100, hidden: true },
                        { header: '요청차량번호', name: 'dmndVhrno', align: 'center', width: 120 },
                        { header: '요청개인정보공개', name: 'dmndPrvcRls', align: 'center', width: 130, hidden: true },
                        { header: '요청민원인성명', name: 'dmndCvlprNm', align: 'center', width: 120 },
                        { header: '요청민원인주민번호', name: 'dmndCvlprIdecno', align: 'center', width: 140 },
                        { header: '요청민원인법정동코드', name: 'dmndCvlprStdgCd', align: 'center', width: 160, hidden: true },
                        { header: '요청경로구분코드', name: 'dmndPathSeCd', align: 'center', width: 130, hidden: true },
                        { header: '요청내역표시', name: 'dmndDsctnIndct', align: 'left', width: 150, hidden: true },
                        { header: '요청조회구분코드', name: 'dmndInqSeCd', align: 'center', width: 130, hidden: true },
                        { header: '연계결과코드', name: 'linkRsltCd', align: 'center', width: 100 },
                        { header: '연계결과상세', name: 'linkRsltDtl', align: 'left', width: 200 },
                        { header: '원부그룹번호', name: 'ledgerGroupNo', align: 'center', width: 120 },
                        { header: '원부개별번호', name: 'ledgerIndivNo', align: 'center', width: 120 },
                        { header: '차량관리번호', name: 'vhmno', align: 'center', width: 120 },
                        { header: '차량등록번호', name: 'vhrno', align: 'center', width: 120 },
                        { header: '차대번호', name: 'vin', align: 'center', width: 150 },
                        { header: '차종종별코드', name: 'carmdlAsortCd', align: 'center', width: 120 },
                        { header: '차종종별명', name: 'carmdlAsortNm', align: 'center', width: 120 },
                        { header: '차명', name: 'atmbNm', align: 'left', width: 150 },
                        { header: '색상코드', name: 'colorCd', align: 'center', width: 100 },
                        { header: '색상명', name: 'colorNm', align: 'center', width: 100 },
                        { header: '번호판규격코드', name: 'nopltSpcfctCd', align: 'center', width: 120 },
                        { header: '번호판규격명', name: 'nopltSpcfctNm', align: 'center', width: 120 },
                        { header: '용도구분코드', name: 'usgSeCd', align: 'center', width: 100 },
                        { header: '용도구분명', name: 'usgSeNm', align: 'center', width: 100 },
                        { header: '원동기형식명', name: 'mtrsFomNm', align: 'center', width: 150 },
                        { header: '형식명', name: 'fomNm', align: 'center', width: 150 },
                        { header: '취득금액', name: 'acqsAmt', align: 'center', width: 100 },
                        { header: '등록상세코드', name: 'regDtlCd', align: 'center', width: 120 },
                        { header: '등록상세명', name: 'regDtlNm', align: 'center', width: 120 },
                        { header: '최초등록일', name: 'frstRegYmd', align: 'center', width: 100 },
                        { header: '차령종료일', name: 'veagEndYmd', align: 'center', width: 100 },
                        { header: '연식', name: 'yridnw', align: 'center', width: 80 },
                        { header: '제원관리번호1', name: 'spmnno1', align: 'center', width: 120 },
                        { header: '제원관리번호2', name: 'spmnno2', align: 'center', width: 120 },
                        { header: '제작년월일', name: 'fbctnYmd', align: 'center', width: 100 },
                        { header: '주행거리', name: 'drvngDstnc', align: 'center', width: 100 },
                        { header: '검사유효기간시작일', name: 'inspVldPdBgngYmd', align: 'center', width: 140 },
                        { header: '검사유효기간종료일', name: 'inspVldPdEndYmd', align: 'center', width: 140 },
                        { header: '점검유효기간시작일', name: 'chckVldPdBgngYmd', align: 'center', width: 140 },
                        { header: '점검유효기간종료일', name: 'chckVldPdEndYmd', align: 'center', width: 140 },
                        { header: '등록신청구분명', name: 'regAplySeNm', align: 'center', width: 130 },
                        { header: '최초등록접수번호', name: 'frstRegAplyRcptNo', align: 'center', width: 140 },
                        { header: '번호판영치최고일', name: 'nopltCsdyAvtsmtYmd', align: 'center', width: 130 },
                        { header: '번호판영치여부', name: 'nopltCsdyYn', align: 'center', width: 120 },
                        { header: '사업용사용기간', name: 'bssUsePdYmd', align: 'center', width: 120 },
                        { header: '직권말소예고통지일', name: 'octhtErsrPrvntcAvtsmtYmd', align: 'center', width: 150 },
                        { header: '말소등록일', name: 'ersrRegYmd', align: 'center', width: 100 },
                        { header: '말소등록구분코드', name: 'ersrRegSeCd', align: 'center', width: 130 },
                        { header: '말소등록구분명', name: 'ersrRegSeNm', align: 'center', width: 120 },
                        { header: '저당수', name: 'mrtgCnt', align: 'center', width: 80 },
                        { header: '압류건수', name: 'szrCnt', align: 'center', width: 80 },
                        { header: '구조변경수', name: 'strctChgCnt', align: 'center', width: 100 },
                        { header: '사용본거지주소', name: 'usgsrhldAddr1', align: 'left', width: 250 },
                        { header: '사용본거지주소상세', name: 'usgsrhldAddrDtl1', align: 'left', width: 200 },
                        { header: '소유자주소', name: 'ownrAddr', align: 'left', width: 250 },
                        { header: '소유자주소상세', name: 'ownrAddrDtl', align: 'left', width: 200 },
                        { header: '개인사업자여부', name: 'indvdlBzmnYn', align: 'center', width: 120 },
                        { header: '대표소유자전화번호', name: 'rprsOwnrTelno', align: 'center', width: 120 },
                        { header: '대표소유자성명', name: 'rprsOwnrNm', align: 'center', width: 100 },
                        { header: '대표소유자회원구분코드', name: 'rprsOwnrMbrSeCd', align: 'center', width: 160 },
                        { header: '대표소유자회원번호', name: 'rprsvOwnrIdecno', align: 'center', width: 130 },
                        { header: '비과세대상구분코드', name: 'taxxmptTrprSeCd', align: 'center', width: 150 },
                        { header: '비과세대상구분코드명', name: 'taxxmptAplcnSeCd', align: 'center', width: 170 },
                        { header: '특기사항건수', name: 'spcablMttrCnt', align: 'center', width: 100 },
                        { header: '사용본거지행정동명', name: 'usgsrhldDongNm', align: 'center', width: 130 },
                        { header: '예고수', name: 'prvntcCnt', align: 'center', width: 80 },
                        { header: '수출이행여부신고일', name: 'xportFlflYnDclrYmd', align: 'center', width: 150 },
                        { header: '발급번호', name: 'issuNo', align: 'center', width: 120 },
                        { header: '최초양도일', name: 'frstTrnsfrYmd', align: 'center', width: 100 },
                        { header: '처리불가사유코드', name: 'prcsImprtyRsnCd', align: 'center', width: 140 },
                        { header: '처리불가사유명세', name: 'prcsImprtyRsnDtls', align: 'left', width: 200 },
                        {
                            header: '조회일시',
                            name: 'regDt',
                            align: 'center',
                            width: 150,
                            formatter: function(e) {
                                return e.value ? moment(e.value).format('YYYY-MM-DD HH:mm:ss') : '';
                            }
                        },
                        { header: '등록자ID', name: 'rgtr', align: 'center', width: 100, hidden: true },
                        { header: '등록자', name: 'rgtrNm', align: 'center', width: 100 }
                    ];
                },

                createDataSource: function() {
                    return {
                        api: {
                            readData: {
                                url: '<c:url value="/carInspectionPenalty/history/carLedgerFrmbk/list.ajax"/>',
                                method: 'POST',
                                contentType: 'application/x-www-form-urlencoded',
                                processData: true
                            }
                        },
                        initialRequest: false,
                        serializer: function(params) {
                            setSearchCond();
                            SEARCH_COND.perPage = params.perPage;
                            SEARCH_COND.page = params.page;
                            return $.param(SEARCH_COND);
                        }
                    };
                },

                create: function() {
                    var gridConfig = this.initConfig();
                    var Grid = tui.Grid;
                    this.instance = gridConfig.instance(Grid);
                    Grid.applyTheme('striped');
                    this.gridBindEvents();
                },

                gridBindEvents: function() {
                    var self = this;

                    this.instance.on('successResponse', function(ev) {
                        var responseObj = JSON.parse(ev.xhr.response);
                        if(responseObj) {
                            $("#currentPageLedger").text(responseObj.data.pagination.page);
                            $("#totalPagesLedger").text(responseObj.data.pagination.totalPages);
                            var totalCount = responseObj.data.pagination.totalCount;
                            $("#totalCountLedger").text('총 ' + totalCount.toLocaleString() + '건');

                            GRID_PAGINATION_INFO_LEDGER.totalCount = responseObj.data.pagination.totalCount;
                            GRID_PAGINATION_INFO_LEDGER.page = responseObj.data.pagination.page;
                            GRID_PAGINATION_INFO_LEDGER.perPage = responseObj.data.pagination.perPage;
                        }
                    });
                }
            },

            /**
             * 이벤트 핸들러 설정
             */
            eventBindEvents: function() {
                var self = this;

                // 검색 버튼 클릭 이벤트
                $("#search_btn").on('click', function() {
                    var currentTab = $('.tabs li.current').data('tab');
                    if (currentTab === 'tab-basic') {
                        self.gridBasic.instance.readData(1);
                    } else if (currentTab === 'tab-ledger') {
                        self.gridLedger.instance.readData(1);
                    }
                });

                // 초기화 버튼 클릭 이벤트
                $("#reset_btn").on('click', function() {
                    $("#searchStartDate").val("${dateUtil:getCurrentDateTime('yyyy-MM-dd')}");
                    $("#searchEndDate").val("${dateUtil:getCurrentDateTime('yyyy-MM-dd')}");
                    $("#searchVhrno").val("");
                    $("#searchVin").val("");
                    $("#searchLinkRsltCd").val("");
                    $("#searchCarFfnlgTrgtId").val("");
                });

                // 탭 클릭 이벤트
                $('ul.tabs li').on('click', function() {
                    var tab_id = $(this).attr('data-tab');

                    $('ul.tabs li').removeClass('current');
                    $('.tab-content').removeClass('current');

                    $(this).addClass('current');
                    $("#" + tab_id).addClass('current');

                    // 탭 전환 시 그리드 레이아웃 새로고침 및 데이터 조회
                    setTimeout(function() {
                        if (tab_id === 'tab-basic' && self.gridBasic.instance) {
                            self.gridBasic.instance.refreshLayout();
                        } else if (tab_id === 'tab-ledger' && self.gridLedger.instance) {
                            self.gridLedger.instance.refreshLayout();
                            // 등록원부 탭 클릭 시 자동 조회
                            //self.gridLedger.instance.readData(1);
                        }
                    }, 100);
                });

                // perPage 변경 이벤트 - 기본정보
                $('#perPageSelectBasic').on('change', function() {
                    var perPage = parseInt($(this).val(), 10);
                    self.gridBasic.instance.setPerPage(perPage);
                });

                // perPage 변경 이벤트 - 등록원부
                $('#perPageSelectLedger').on('change', function() {
                    var perPage = parseInt($(this).val(), 10);
                    self.gridLedger.instance.setPerPage(perPage);
                });

                // 엔터키 검색
                $(".gs_b_top input").on('keypress', function(e) {
                    if (e.which === 13) {
                        e.preventDefault();
                        $("#search_btn").trigger('click');
                    }
                });
            },

            /**
             * 모듈 초기화
             */
            init: function() {
                var self = this;

                // 그리드 생성
                this.gridBasic.create();
                this.gridLedger.create();

                // 이벤트 핸들러 설정
                this.eventBindEvents();

                // URL 파라미터로 받은 검색 조건 설정
                var urlParams = new URLSearchParams(window.location.search);
                var searchCarFfnlgTrgtId = urlParams.get('searchCarFfnlgTrgtId');
                if (searchCarFfnlgTrgtId) {
                    $("#searchCarFfnlgTrgtId").val(searchCarFfnlgTrgtId);
                    // 파라미터가 있으면 자동 조회
                    this.gridBasic.instance.readData(1);
                } else {
                    // 기본 탭 데이터 로드
                    this.gridBasic.instance.readData(1);
                }

                // 등록원부 그리드 레이아웃 초기화 (숨겨진 상태에서 초기화된 그리드의 헤더 렌더링 문제 해결)
                setTimeout(function() {
                    if (self.gridLedger.instance) {
                        self.gridLedger.instance.refreshLayout();
                    }
                }, 200);
            }
        };

        // DOM 준비 완료 시 초기화
        $(document).ready(function() {
            VehicleApiHistoryList.init();
        });

        // 전역 네임스페이스에 모듈 노출
        window.VehicleApiHistoryList = VehicleApiHistoryList;

    })(window, jQuery);

    /**
     * 차량 기본정보 팝업 열기 (전역 함수)
     */
    function openBasicPopup(carBassMatterInqireId) {
        console.log(carBassMatterInqireId);
        var popupUrl = '<c:url value="/carInspectionPenalty/history/carBassMatterInqire/popup.do"/>?carBassMatterInqireId='+encodeURIComponent(carBassMatterInqireId);
        var popup = openPopup(popupUrl, 1200, 900, 'carBassMatterInqirePopup');
    }

    /**
     * 차량 등록원부 팝업 열기 (전역 함수)
     */
    function openLedgerPopup(carLedgerFrmbkId) {
        console.log(carLedgerFrmbkId);
        var popupUrl = '<c:url value="/carInspectionPenalty/history/carLedgerFrmbk/popup.do"/>?carLedgerFrmbkId='+encodeURIComponent(carLedgerFrmbkId);
        var popup = openPopup(popupUrl, 1200, 900, 'carLedgerFrmbkPopup');
    }

</script>
