<%@ 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 () {
        getOpr();

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

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

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

    function getOpr() {
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "JSON",
            url: "<c:url value='/adm/menu/oprmng'/>",
            success: function (data) {
                // console.log(JSON.stringify(data));
                data.forEach(function (e, f) {
                    $('#serviceGroup').append("<option value=" + e.serviceGroup + ">" + e.serviceGroupName + "</option>");
                    $('#serviceGroup').niceSelect('update');
                });
            }
        })
    };

    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/policyMenu/list'/>",
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "JSON",
                    data: function (data) {
                        var json = {};
                        if (data) {
                            json.page = data.start / data.length;
                            json.size = 10
                            json.serviceGroup = $("#serviceGroup option:selected").val();
                            json.codeText1 = $('#codeText1').val();
                            json.codeText2 = $('#codeText2').val();
                            json.codeText3 = $('#codeText3').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: "policyVal"},
                    {data: "policyName"},
                    {data: "menuName"},
                    {data: "menuSeq"}
                ],
                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"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
                // pagingType: "first_last_numbers"

                columnDefs: [
                    {
                        targets: 0,
                        visible: false,
                        searchable: false,
                        render: function (data) {
                            // console.log(data)
                            return '<a style="display: block;text-align: center;" onclick="click()">' + data + '</a>';
                        },
                    },
                    {
                        targets: 1,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 2,
                        visible: false,
                        searchable: false,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 3,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 4,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 5,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 6,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    },
                    {
                        targets: 7,
                        visible: false,
                        searchable: false,
                        render: function (data) {
                            return '<a style="display: block;text-align: center;">' + data + '</a>';
                        }
                    }
                ]
            }
        )
    };

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

</script>

<body>

<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="40%">
                        <col width="140px">
                        <col width="40%">
<%--                        <col width="140px">--%>
<%--                        <col width="25%">--%>
                    </colgroup>
                    <tbody>

                    <tr>
                        <th class="tl">시나리오그룹</th>
                        <td>
                            <div class="sel_box">
                                <select id="serviceGroup" class="wide">
                                    <option value="ALL">전체</option>
                                </select>
                            </div>
                        </td>

                        <th class="tl">정책코드</th>
                        <td>
                            <div class="ipt_box listen">
                                <input type="text" placeholder="검색어를 입력하세요" id="codeText1" name="typeText1">
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <th class="tl">정책명</th>
                        <td>
                            <div class="ipt_box listen">
                                <input type="text" placeholder="검색어를 입력하세요" id="codeText2" name="typeText2">
                            </div>
                        </td>

                        <th class="tl">메뉴명</th>
                        <td>
                            <div class="ipt_box listen">
                                <input type="text" placeholder="검색어를 입력하세요" id="codeText3" name="typeText3">
                            </div>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="cont_box">
            <div class="box_title">
                <div class="fl">
                    <h2 class="mt12">정책별 메뉴 리스트</h2>
                </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">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>고객코드</th>
                            <th>고객사</th>
                            <th>서비스그룹</th>
                            <th>서비스그룹명</th>
                            <th>정책코드</th>
                            <th>정책명</th>
                            <th>메뉴명</th>
                            <th>메뉴번호</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</section>

</body>
</html>
