<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>사용자관리</title>
    <%@ include file="/WEB-INF/jsp/adm/include/topLinkTag.jsp" %>
</head>


<script>
    $(document).ready(function () {

            // getOprSelect();
            getCust();
            PagingDataTable();
            $('#listTable tbody').on('dblclick', 'tr', function () {
                var data = $('#listTable').DataTable().row(this).data();
                viewPage(data)
            });

            $('#btnSearchOpr').on('click', function () {
                fnCustSearchBtn();
            });

            $('#btnRegModal').on('click', function () {
                fnInsertBtn();
            });


            $("#Content").on("keyup", function (key) {
                if (key.keyCode == 13) {
                    fnCustSearchBtn();
                }
            });
        }
    );


    function getOprSelect() {
        var html = '<option value="' + "ALL" + '">' + "전체" + '</option>';
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "JSON",
            async: false,
            url: "<c:url value='/adm/menu/oprmng'/>" + "?serviceType=M",
            success: function (data) {
                // console.log(JSON.stringify(data));
                data.forEach(function (e, f) {
                    html += '<option value="' + e.serviceGroup + '">' + e.serviceGroupName + '</option>';
                });
            }
        })
        $('#serviceGroup').html(html);
        $('#serviceGroup').niceSelect('update');
    };

    function getCust() {
        var html = '<option value="' + "ALL" + '">' + "전체" + '</option>';
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "JSON",
            async: false,
            url: "<c:url value='/admin/common/system/user/cust/select'/>",
            success: function (data) {
                // console.log(JSON.stringify(data));
                data.forEach(function (e, f) {
                    html += '<option value="' + e.custCode + '">' + e.custName + '</option>';
                });
            }
        })
        $('#selectCust').html(html);
        $('#selectCust').niceSelect('update');
    }

    function viewPage(rowData) {
        // console.log(rowData.userSeq);
        // document.location.href = "/BotMain_VM/admin/common/system/user/view" + "?userSeq=" + rowData.userSeq;
        document.location.href = "<c:url value='/admin/common/system/user/view'/>" + "?userSeq=" + rowData.userSeq;
    }

    var PagingDataTable = function () {
        // console.log("log - " + JSON.stringify({"page": "0", "size": "10"}));
        var paging = JSON.stringify({'page': 0, 'size': 10})
        $('#listTable').DataTable(
            {
                ajax: {
                    url: "<c:url value='/admin/common/system/user/list'/>",
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "JSON",
                    async: false,
                    data: function (data) {
                        var json = {};
                        if (data) {
                            json.page = data.start / data.length;
                            json.size = 10
                            json.custCode = $("#selectCust option:selected").val();
                            json.codeType = $("#codeType option:selected").val();
                            json.codeText = $('#codeText').val();

                        } else {
                            json = JSON.stringify({'page': 0, 'size': 10});
                        }
                        return JSON.stringify(json);
                    }
                    ,
                    dataFilter: function (data) {
                        var jsons = jQuery.parseJSON(data);
                        // console.log(JSON.stringify(data));
                        var json = {};
                        json.recordsTotal = jsons.getTotal;
                        json.recordsFiltered = jsons.getTotal;
                        json.data = jsons.getList;
                        // console.log(json);
                        return JSON.stringify(json);
                    }
                },
                columns: [
                    {data: "custCode"},
                    {data: "custName"},
                    // {data: "serviceGroup"},
                    // {data: "serviceGroupName"},
                    {data: "userSeq"},
                    {data: "userId"},
                    {data: "userName"},
                    {data: "eMail"},
                    {data: "mobileNo"},
                    {data: "useYn"},
                    {data: "registDate"}
                ],
                order: [0, "asc"],
                scrollX: false,
                scrollY: false,
                autoWidth: false,
                searching: false,
                bProcessing: false,
                sProcessing: false,
                bServerSide: true,
                sDom: '<"row view-filter"<"col-sm-12"<"pull-left"><"pull-right"><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"pi>>>',
                // pagingType: "first_last_numbers"

                columnDefs: [
                    {
                        targets: 0,
                        visible: false,
                        searchable: false,
                        orderable: false,
                        render: function (data) {
                            // console.log(data)
                            return '<a style="display: block;text-align: center;" onclick="click()">' + data + '</a>';
                        },
                    },
                    {
                        targets: 1,
                        orderable: false,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 2,
                        visible: false,
                        searchable: false,
                        orderable: false,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 3,
                        orderable: false,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 4,
                        orderable: false,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        visible: false,
                        searchable: false,
                        targets: 5,
                        orderable: false,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 6,
                        orderable: false,
                        render: function (data) {
                            if(data == null)
                                data = '';
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 7,
                        orderable: false,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    // {
                    //     targets: 8,
                    //     render: function (data) {
                    //         return '<a style="display: block;text-align: center;">' + data + '</a>';
                    //     }
                    // },
                    // {
                    //     targets: 9,
                    //     render: function (data) {
                    //         return '<a style="display: block;text-align: center;">' + data + '</a>';
                    //     }
                    // },
                    {
                        targets: 8,
                        orderable: false,
                        render: function (data, type, full, meta) {
                            // var arr = data.slice();
                            // return '<a style="display: block;text-align: center;">' + arr[0] + "-" + arr[1] + "-" + arr[2] + '</a>';
                            return '<a style="display: block;text-align: center;">' + $.utils.sliceDateTimeFormat(data) + '</a>';
                        }
                    }
                ]
            }
        )
    };

    function fnCustSearchBtn() {
        $('#listTable').DataTable().ajax.reload();
    };

    function fnInsertBtn() {
        // document.location.href = "/BotMain_VM/admin/common/system/user/insert";
        document.location.href = "<c:url value='/admin/common/system/user/insert'/>";
    }


</script>


<body>

<h1>ICOMSYS ADMIN</h1>
<div class="skip_navigation">
    <ul>
        <li>
            <a href="#Content" class="go_content">본문 바로가기</a>
        </li>
        <li>
            <a href="#Gnb">메뉴 바로가기</a>
        </li>
    </ul>
</div>

<header id="header">
    <%@ include file="/WEB-INF/jsp/adm/include/header.jsp" %>
</header>
<c:import url="/adm/menu/getLnbMenu.do"/>
<section id="Content" class="system_management">
    <div class="location">
        <ul>
            <li class="home"><a href="#">HOME</a></li>
            <li><a href="#">시스템관리</a></li>
            <li><a href="#">사용자관리</a></li>
        </ul>
    </div>

    <div class="sub_cont menu06_01_03">
        <div class="cont_box">
            <div class="box_title">
                <div class="fl">
                    <h2 class="mt12">사용자 조회</h2>
                </div>
                <div class="fr">
                    <div class="btn_wrap fl">
                        <a href="#" id="btnSearchOpr" class="btn">조회</a>
                    </div>
                </div>
            </div>
            <div class="tbl">
                <table class="search block">
                    <colgroup>
                        <col width="140px">
                        <col width="25%">
                        <col width="140px">
                        <col width="25%">
                        <col width="140px">
                        <col width="25%">
                    </colgroup>
                    <tbody>
                    <tr>
                        <th class="tl">고객사</th>
                        <td>
                            <div class="sel_box">
                                <select id="selectCust" class="wide">
                                    <option value="ALL">전체</option>
                                </select>
                            </div>
                        </td>
                        <th class="tl">분류</th>
                        <td>
                            <div class="sel_box">
                                <select id="codeType" class="wide">
                                    <option value="ALL">분류 선택</option>
                                    <option value="userId">사용자아이디</option>
                                    <option value="userName">사용자이름</option>
                                </select>
                            </div>
                        </td>
                        <th class="tl">검색어</th>
                        <td>
                            <div class="ipt_box listen">
                                <input type="text" placeholder="검색어를 입력하세요" id="codeText" name="typeText">
                            </div>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="cont_box">
            <div class="box_title">
                <div class="fl">
                    <h2 class="mt12"> 사용자 리스트</h2>
                </div>
                <div class="btn_wrap fr">
                    <%--                    <a href="#" class="btn grey" id="btnDelCust">삭제</a>--%>
                    <%--                    <a href="#" rel="reg_modal" class="btn modalLoad" id="btnRegModal">추가</a>--%>
                    <a href="#" class="btn line modalLoad" id="btnRegModal">등록</a>
                </div>
            </div>


            <div class="tbl">
                <form id="custListForm">
                    <table id="listTable" class="">
                        <colgroup>
                            <col width="auto">
                            <col width="auto">
                            <col width="auto">
                            <col width="auto">
                            <col width="auto">
                            <col width="auto">
                            <col width="auto">
                            <col width="auto">
                            <col width="auto">
                            <col width="auto">
                            <col width="auto">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>고객사코드</th>
                            <th>고객사</th>
                            <%--                            <th>서비스그룹코드</th>--%>
                            <%--                            <th>서비스그룹</th>--%>
                            <th>사용자시퀀스</th>
                            <th>사용자아이디</th>
                            <th>사용자이름</th>
                            <th>eMail</th>
                            <th>전화번호</th>
                            <th>사용여부</th>
                            <th>생성일</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</section>


</body>
</html>
