{extend name="base" /}

{block name="head"}
<style type="text/css">
    .title{text-align: center;margin: 100px auto;}
    .module{text-align: center;margin: 20px auto;}
    .search {position: relative;}
    .search .typeahead{width: 80%;font-size: 18px;line-height: 1.3333333;}
    .search input{width: 80%;display: inline-block;}
    .search button{height: 48px;width: 18%; margin-top: -5px; text-transform: uppercase;font-weight: bold;font-size: 14px; }
</style>
<script src="{$static}/js/bootstrap-typeahead.js" type="text/javascript"></script>
{/block}
{block name="main"}
<div class="container">
    <div class="title">
        <h1>{$title}</h1>
    </div>

    <div class="module">
        <ul class="nav nav-pills">
            {volist name="module" id="group"}
            {if condition="isset($group['children'])"}
            <li role="presentation" class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    {$group['title']|default='' } <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    {volist name="group.children" id="val"}
                    <li role="presentation"><a href="#" module>{$val['title']|default=''}</a></li>
                    {/volist}
                </ul>
            </li>
            {else/}
            <li role="presentation"><a href="#" module>{$group['title']|default=''}</a></li>
            {/if}
            {/volist}
        </ul>
    </div>

    <div class="form-group search">
        <input  id="search_input" class="form-control input-lg  ng-pristine ng-empty ng-invalid ng-invalid-required" type="text" placeholder="接口名称/接口信息/作者/接口地址" data-provide="typeahead" autocomplete="off">
        <button class="btn btn-lg btn-success" id="search" data-loading-text="Loading..." autocomplete="off"><i class="glyphicon glyphicon-search"></i> 搜 素</button>
    </div>

    <div class="result">
        <div class="list-group"></div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#search_input').typeahead({
            source: function (query, process) {
                $.getJSON("{$root}/doc/search", { "query": query }, function(data){
                    var items = [];
                    $.each(data, function(index, doc){
                        items.push(doc.title);
                    });
                    process(items);
                });
            }
        });
        $('#search').click(function(){
            var query = $('#search_input').val();
            var $btn = $(this).button('loading');
            $.ajax({
                type: "GET",
                url: "{$root}/doc/search?query="+query,
                dataType:'json',
                success: function (data) {
                    $(".result .list-group").html('');
                    $.each(data, function(index, doc){
                        var item = '<a href="javascript:void(0)" class="list-group-item" name="'+ doc.name +'" title="'+ doc.title +'" doc>' +
                            '<span class="badge">'+ doc.author +'</span>' +
                            ''+ doc.title + '<span class="text-primary">('+ doc.url +')</span>'+'</a>';
                        $(".result .list-group").append(item);
                    });
                    $btn.button('reset');
                },
                complete : function(XMLHttpRequest,status){
                    if(status == 'timeout'){
                        alert("网络超时");
                        $btn.button('reset');
                    }
                }
            });
        });

        $('a[module]').click(function(){
            if(window.parent)
            {
                var zTree = window.parent.zTree;
                var node = zTree.getNodeByParam("title", $(this).text());
                zTree.selectNode(node);
            }
        });

        $(".result .list-group").on('click', 'a[doc]', function(){
            if(window.parent)
            {
                var zTree = window.parent.zTree;
                var node = zTree.getNodeByParam("name", $(this).attr('name'));
                window.parent.loadText(node.tId, $(this).attr('title'), $(this).attr('name'));
                zTree.selectNode(node);
            }
        });
    });
</script>
{/block}