<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- Main body -->
<div class="main_body">
    <section id="section8" class="main_bars">
        <div class="bgs-main">
            <section id="section5">
                <div class="sub_title"></div>
                <button type="button" id="registerBtn" class="newbtn bg1 info_a1">등록</button>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <div class="gs_b_top">
            <ul class="lef">
                <li class="th">검색어</li>
                <li><input type="text" id="searchKeyword" name="searchKeyword" class="input" value="${param.searchKeyword}" style="width: 150px;"/></li>
                <li class="th">사용여부</li>
                <li>
                    <select id="searchUseYn" name="searchUseYn" class="input">
                        <option value="">전체</option>
                        <option value="Y" <c:if test="${param.searchUseYn eq 'Y'}">selected</c:if>>사용</option>
                        <option value="N" <c:if test="${param.searchUseYn eq 'N'}">selected</c:if>>미사용</option>
                    </select>
                </li>
                <li>
                    <button type="button" id="search_btn" class="newbtnss bg1">검색</button>
                </li>
            </ul>
            <ul class="rig2">
                <li>
                <select id="perPageSelect" class="input">
                    <option value="10" <c:if test="${param.perPage eq '10'}">selected</c:if>>페이지당 10</option>
                    <option value="20" <c:if test="${param.perPage eq '20'}">selected</c:if>>페이지당 20</option>
                    <option value="30" <c:if test="${param.perPage eq '30'}">selected</c:if>>페이지당 30</option>
                </select>
                <span class="page_number"><span id="currentPage"></span><span class="bar">/</span><sapn id="totalPages"></sapn> Pages</span>
                </li>
            </ul>
        </div>
        <div class="gs_booking">
            <div class="row">
                <div class="col-sm-12">
                    <div class="box_column">
                        <div class="containers">
                            <div id="grid"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Main body -->

<script type="text/javascript">
/**
 * 사용자 목록 관리 모듈
 * 사용자 목록을 조회하고 관리하는 기능을 제공합니다.
 */
(function(window, $) {
    'use strict';

    var SEARCH_COND = {};

    // 검색정보 셋팅
    var setSearchCond = function() {
        var searchKeyword = $.trim(nvl($("#searchKeyword").val(), ""));
        var searchUseYn = $.trim(nvl($("#searchUseYn").val(), ""));

        SEARCH_COND.searchKeyword = searchKeyword;
        SEARCH_COND.searchUseYn = searchUseYn;
    };

    /**
     * 사용자 목록 관리 네임스페이스
     */
    var UserList = {
        /**
         * 그리드 관련 객체
         */
        grid: {
            /**
             * 그리드 인스턴스
             */
            instance: null,

            /**
             * 그리드 설정 초기화
             * @returns {Object} 그리드 설정 객체
             */
            initConfig: function() {
                // 데이터 소스 설정
                var dataSource = this.createDataSource();

                // 현재 선택된 perPage 값 가져오기
                var perPage = parseInt($('#perPageSelect').val() || 10, 10);

                // 그리드 설정 객체 생성
                var gridConfig = new XitTuiGridConfig();

                // 기본 설정
                gridConfig.setOptDataSource(dataSource);            // 데이터소스 연결
                gridConfig.setOptGridId('grid');                    // 그리드를 출력할 Element ID
                gridConfig.setOptGridHeight(390);                   // 그리드 높이(단위: px)
                gridConfig.setOptRowHeight(30);                     // 그리드 행 높이(단위: px)
                gridConfig.setOptRowHeaderType('rowNum');           // 행 첫번째 셀 타입(rowNum: 순번, checkbox: 체크박스, '': 출력 안함)

                // 페이징 옵션 설정
                gridConfig.setOptPageOptions({
                    useClient: false,                               // 클라이언트 페이징 여부(false: 서버 페이징)
                    perPage: perPage                                // 페이지당 표시 건수
                });
                gridConfig.setOptUseClientSort(false);              // 서버사이드 정렬 false

                // 컬럼 정보 설정
                gridConfig.setOptColumns([
                    {
                        header: '사용자 ID',
                        name: 'userId',
                        width: 150,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        header: '사용자 계정',
                        name: 'userAcnt',
                        width: 150,
                        sortable: true,
                        align: 'left'
                    },
                    {
                        header: '사용자명',
                        name: 'userNm',
                        sortable: true,
                        align: 'left'
                    },
                    {
                        header: '조직명',
                        name: 'orgCdNm',
                        width: 150,
                        align: 'left'
                    },
                    {
                        header: '소속기관명',
                        name: 'sttCdName',
                        width: 150,
                        align: 'left'
                    },
                    {
                        header: '그룹명',
                        name: 'userGroupIdNm',
                        width: 150,
                        align: 'left'
                    },
                    {
                        header: '잠금여부',
                        name: 'lockYn',
                        width: 120,
                        align: 'center'
                    },
                    {
                        header: '잠금횟수',
                        name: 'lockCnt',
                        width: 120,
                        align: 'center'
                    },
                    {
                        header: '잠금해제',
                        name: 'unlockBtn',
                        width: 120,
                        align: 'center',
                        formatter: function(value) {
                            // 잠금 상태인 경우에만 버튼 표시
                            if (value.row.lockYn === 'Y') {
                                return '<span class="btn_unlock badge success" style="cursor:pointer;">잠금해제</span>';
                                //return '<button type="button" class="btn_unlock btn_grid green small">잠금해제</button>';
                            }
                            return '';
                        }
                    },
                    {
                        header: '상태명',
                        name: 'userStatusNm',
                        width: 120,
                        align: 'center'
                    },
                    {
                        header: '사용여부',
                        name: 'useYn',
                        width: 120,
                        align: 'center'
                    }
                ]);

                return gridConfig;
            },

            /**
             * 데이터 소스 생성
             * @returns {Object} 데이터 소스 객체
             */
            createDataSource: function() {
                return {
                    api: {
                        readData: {
                            url: '<c:url value="/system/user/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);
                    //$('.totCnt').text(responseObj.data.pagination.totalCount);
                    $("#currentPage").text(responseObj.data.pagination.page);
                    $("#totalPages").text(responseObj.data.pagination.totalPages);
                });

                // 행 클릭 이벤트 - 사용자 수정 페이지로 이동
                this.instance.on('dblclick', function(ev) {
                    if (ev.rowKey !== undefined && ev.columnName !== '_number') {
                        var rowData = self.instance.getRow(ev.rowKey);
                        if (rowData && rowData.userId) {
                            window.location.href = buildUrlWithParamCondAndId(SEARCH_COND, "selectUserId", rowData.userId, "<c:url value="/system/user/edit.do"/>");
                        }
                    }
                });

                // 잠금 해제 버튼 클릭 이벤트
                this.instance.on('click', function(ev) {
                    // 클릭한 셀이 unlockBtn 컬럼인 경우에만 처리
                    if (ev.columnName === 'unlockBtn') {
                        var rowData = self.instance.getRow(ev.rowKey);
                        if (rowData && rowData.userId && rowData.lockYn === 'Y') {
                            // 사용자 확인
                            if (confirm('사용자 [' + rowData.userNm + ']의 잠금을 해제하시겠습니까?')) {
                                // AJAX 요청으로 잠금 해제 처리
                                $.ajax({
                                    url: '<c:url value="/system/user/unlock.ajax"/>',
                                    type: 'POST',
                                    data: { userId: rowData.userId },
                                    success: function(response) {
                                        if (response.result) {
                                            alert('잠금이 성공적으로 해제되었습니다.');
                                            // 그리드 데이터 갱신
                                            self.instance.readData(1);
                                        } else {
                                            alert('잠금 해제에 실패했습니다: ' + response.message);
                                        }
                                    },
                                    error: function(xhr, status, error) {
                                        alert('잠금 해제 중 오류가 발생했습니다.');
                                        console.error('Error:', error);
                                    }
                                });
                            }
                        }
                    }
                });
            }
        },

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

            // 검색 버튼 클릭 이벤트
            $('#search_btn').on('click', function() {
                // 페이지를 1로 리셋
                $("#page").val(1);
                // 그리드 데이터 리로드
                self.grid.instance.readData(1);
            });

            // 검색어 입력 필드에서 엔터키 이벤트 처리
            $('#searchKeyword').on('keypress', function(e) {
                if (e.which === 13) { // 엔터키 코드는 13
                    e.preventDefault(); // 기본 이벤트 방지
                    $('#search_btn').trigger('click'); // 검색 버튼 클릭 이벤트 트리거
                }
            });

            // perPage 변경 이벤트 추가
            $('#perPageSelect').on('change', function() {
                var perPage = parseInt($(this).val(), 10);
                // Grid의 perPage 설정 변경 및 데이터 리로드
                self.grid.instance.setPerPage(perPage);
            });

            // 엑셀 다운로드 버튼 클릭 이벤트
            $('#registerBtn').on('click', function() {
                location.href="<c:url value='/system/user/register.do'/>";
            });
        },

        /**
         * 모듈 초기화
         */
        init: function() {

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

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

            this.grid.instance.readData(${param.page eq null or param.page eq 0 ? 1 : param.page});
        }
    };

    // 페이지 로드 시 초기화
    $(function() {
        UserList.init();
    });

    // 전역 네임스페이스에 모듈 노출 (필요한 경우... 필요 없을듯?)
    window.UserList = UserList;

})(window, jQuery);
</script>
