<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ page import="java.io.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Expires", "0");
%>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
    <jsp:include page="/jsp/common/include/css.jsp"/>
    <jsp:include page="/jsp/common/include/script.jsp"/>
    <link href="<c:url value='/addon/bootstrap-5.3.2/css/bootstrap.min.css'/>" rel="stylesheet"/>
    <script src="<c:url value='/addon/bootstrap-5.3.2/js/bootstrap.bundle.min.js'/>"></script>
    <script language="javascript">
      var url = '<c:url value="/onl/apim/apigroup/apiGroupMan.json"/>';
      var url_view = '<c:url value="/onl/apim/apigroup/apiGroupMan.view"/>';
      var responseData = {};

      function useFormatter(cellvalue, options, rowObject) {
        if (cellvalue == null || cellvalue == '')
          return '';
        return cellvalue === '0' ? '미사용' : '사용';
      }

      function detail() {
        var postData = getSearchForJqgrid("cmd", "LIST"); // jqGrid expects an object
        $("#grid").setGridParam({url: url, postData: postData}).trigger("reloadGrid");
      }

      function search() {
        var postData = getSearchForJqgrid("cmd", "LIST"); // jqGrid expects an object
        $("#grid").setGridParam({url: url, postData: postData, page: 1}).trigger("reloadGrid");
      }

      function list() {
        detail();
        var gridPostData = getSearchForJqgrid("cmd", "LIST"); // jqGrid expects an object
        $('#grid').jqGrid({
          datatype: "json",
          mtype: 'POST',
          url: url,
          postData: gridPostData,
          colNames: ['API 그룹 명', '설명', 'id'],
          colModel: [
            {name: 'groupName', align: 'center', width: '80', sortable: false},
            {name: 'groupDesc', align: 'left'},
            {name: 'id', align: 'center', width: '40', hidden: true}
          ],
          jsonReader: {
            root: function (obj) {
              responseData = obj.rows; // Store the response data
              return obj.rows;
            },
            repeatitems: false
          },
          pager: $('#pager'),
          page: '${param.page}',
          rowNum: '${rmsDefaultRowNum}',
          autoheight: true,
          height: $("#container").height(),
          autowidth: true,
          viewrecords: true,
          rowList: eval('[${rmsDefaultRowList}]'),
          loadComplete: function(d) {
            var colModel = $(this).getGridParam("colModel");
            for (var i = 0; i < colModel.length; i++) {
              $(this).setColProp(colModel[i].name, {sortable: false});
            }
          },
          ondblClickRow: function(rowId) {
            const rowData = $(this).getRowData(rowId);

            $.ajax({
              type : "POST",
              url:url,
              dataType:"json",
              data:{cmd: 'DETAIL', apiGroupId : rowData.id},
              success:function(json){
                window.returnValue = json;
                window.close();
              },
              error:function(e){
                alert(e.responseText);
              }
            });
          }
        });
      }

      $(document).ready(function() {
        list();
        resizeJqGridWidth('grid', 'content_middle', '1000');

        $("#btn_search").click(function() {
          search();
        });
        $("input[name^=search]").keydown(function(key) {
          if (key.keyCode == 13) {
            $("#btn_search").click();
          }
        });

        buttonControl();
      });
    </script>
</head>
<body>
<div>
    <div class="content_middle" id="content_middle" style="margin-top: 0px">
        <div class="search_wrap">
            <button type="button" class="cssbtn" id="btn_search" level="R"><i class="material-icons">search</i> <%= localeMessage.getString("button.search") %>
            </button>
        </div>
        <div class="title" id="title">${rmsMenuName}</div>
        <table class="search_condition" cellspacing="0">
            <tbody>
            <tr>
                <th style="width:180px;">API 그룹 명</th>
                <td>
                    <input type="text" name="searchGroupName" value="${param.searchGroupName}">
                </td>
                <th style="width:180px;">설명</th>
                <td>
                    <input type="text" name="searchGroupDesc" value="${param.searchGroupDesc}">
                </td>
            </tr>
            </tbody>
        </table>
        <table id="grid"></table>
        <div id="pager"></div>
    </div><!-- end content_middle -->
</div><!-- end right_box -->
</body>
</html>
