<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用户列表')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
    <form class="form-horizontal m" id="form-record-add">

        <div class="ui-layout-west">
            <div class="box box-main">
                <div class="box-header">
                    <div class="box-title">
                        <i class="fa icon-grid"></i> 组织机构
                    </div>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
                        <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
                        <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
                    </div>
                </div>
                <div class="ui-layout-content">
                    <div id="tree" class="ztree"></div>
                </div>
            </div>
        </div>

        <div class="ui-layout-center">
            <div class="container-div">
                <div class="row">
                    <div class="btn-group-sm" id="toolbar" role="group">
                        <a class="btn btn-success">
                            <input type="hidden" id="deptId" name="deptId">
                            <span id="deptName">请选择部门</span>
                        </a>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" class="form-control" id="datetime" name="datetime" placeholder="yyyy-MM-dd - yyyy-MM-dd" required>
                        </div>
                    </div>
                    <div class="col-sm-12 select-table table-striped">
                        <input type="hidden" id="intIds" name="intIds">
                        <input type="hidden" id="intCodes" name="intCodes">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </form>
<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">

    var prefix = ctx + "system";
    var datas = [[${@dict.getType('share_type')}]];
    var apply_prefix = ctx + "apply/record"
    $("#form-record-add").validate({
        rules:{
            deptId: "required",
            id: "required"
        },
        messages: {
            deptId: "请选择部门",
            id: "请选择接口"
        },
        ignore: "",//不验证的元素
        focusCleanup: true
    });

    $(function() {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({ initClosed: panehHidden, west__size: 185 });
        <!-- laydate示例 -->
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#datetime',
                range: true
            });
        });
        queryUserList();
        queryDeptTree();
    });

    function queryUserList() {
        var options = {
            url: prefix + "/interfaceinfo/list",
            showSearch: false,
            showColumns: false,
            showToggle: false,
            rememberSelected: true,
            columns: [{
                field: 'state',
                checkbox: true
            },{
                field: 'interfaceName',
                title: '接口名称'
            },{
                field: 'code',
                title: '接口编码'
            },{
                field: 'usageScenarios',
                title: '使用场景'
            },{
                field: 'shareType',
                title: '共享方式',
                formatter: function(value, item, index) {
                    return $.table.selectDictLabel(datas, item.shareType);
                }
            }]
        };
        $.table.init(options);
    }

    function queryDeptTree()
    {
        var url = prefix + "/dept/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick : zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#deptName").html(treeNode.name);
            $('#deptId').val(treeNode.id);
        }
    }

    // 选中数据
    function checkItem(){
        // var arrays = $.table.selectColumns("userId");
        var intIds = $.table.selectColumns("id");
        $("#intIds").val(intIds);
        var intCodes = $.table.selectColumns("code");
        $("#intCodes").val(intCodes);
    }

    $('#btnExpand').click(function() {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function() {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function() {
        queryDeptTree();
    });

    function submitHandler() {
        checkItem();
        if ($.validate.form()) {
            $.operate.save(apply_prefix + "/add", $('#form-record-add').serialize());
        }
    }

</script>
</body>
</html>