<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
                <li><a href="/keywords/expand">关键词管理</a></li>
            </ul>
            <h4>关键词管理</h4>
        </div>
    </div>
    <!-- media -->
</div>

<div class="contentpanel project-index-page" style="padding-bottom:0;">
    <div class="panel panel-default">
        <div class="panel-body">
            <label style="margin-right:20px;"><input id="allSelected" type="checkbox" style="margin-right:5px;">全选</label>
            <a class="btn btn-default deleteAll">删除</a>

            <div class="input-append pull-right">
                <form id="query-form" action="/keywords/expand" class="query-form" method="get">
                    <div class="btn-group">
                        <button class="btn" type="button">
                            品牌
                        </button>
                        <input class="span2 query-key" type="text" name="brand" value="{{brand}}">
                        <ul class="dropdown-menu brand-menu"></ul>
                    </div>

                    <div class="btn-group">
                        <button class="btn" type="button">
                            品类
                        </button>
                        <input class="span2 query-key" type="text" name="sort" value="{{brand}}">
                        <ul class="dropdown-menu sort-menu"></ul>
                    </div>

                    <div class="btn-group">
                        <button class="btn tn-default dropdown-toggle" data-toggle="dropdown">
                            {{typeName}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            {{# typeList}}
                                <li><a href="?type={{type}}">{{name}}</a></li>
                            {{/ typeList}}
                        </ul>
                        <input class="span2 query-key" type="text" name="query" value="{{query}}">
                    </div>
                    <input type="hidden" name="type" value="{{type}}">
                    <button class="btn query-submit-btn" type="submit">搜索</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="contentpanel project-index-page" style="padding-top:0;">
    <div class="panel panel-default">
        <div class="panel-body">
            <table id="table-oper-log" class="table table-striped table-bordered building-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>关键词</th>
                        <th>词根</th>
                        <th>品牌</th>
                        <th>品类</th>
                        <th>商品数</th>
                        <th>是否推送</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                {{# tabs}}
                    <tr>
                        <td>
                            <label><input type="checkbox" data-id={{id}} >{{id}}</label>
                        </td>
                        <td>
                            {{keyword}}
                        </td>
                        <td>
                            {{root}}
                        </td>
                        <td>
                            {{brand}}
                        </td>
                        <td>
                            {{sort}}
                        </td>
                        <td>
                            {{yoho_goods_num}}
                        </td>
                        <td>
                            {{is_push}}
                        </td>
                        <td>
                            {{add_time}}
                        </td>
                        <td>
                            <button class="btn btn-default nostyle delete">删除</button>
                        </td>
                    </tr>
                {{/ tabs}}
            </table>
        </div>
    </div>
</div>

{{# pager}}
    <div class="text-right">
        <ul class="pagination">
            {{# prePage}}
                <li><a href="{{url}}">上一页</a></li>
            {{/ prePage}}
            {{# pages}}
                <li class="{{#unless url}}disabled {{/unless}}{{#if cur}}active{{/if}}">
                    <a {{#if url}}href="{{url}}"{{^}}href="javascript:;"{{/if}}>{{num}}</a>
                </li>
            {{/ pages}}
            {{# nextPage}}
                <li><a href="{{url}}">下一页</a></li>
            {{/ nextPage}}
        </ul>
    </div>
{{/ pager}}

<style>
    .nostyle{
        background: transparent;
    }
    input[type=checkbox]{
        vertical-align: sub;
        margin-right: 5px;
    }
    input[disabled]{
        background: transparent;
        border: none;
    }
    .text-right{
        float: right;
        margin-right: 20px;
        margin-top:0;
    }
    .pages{
        cursor: pointer;
    }

    .query-form .btn-group {
        margin-bottom: 0;
        margin-right: 5px;
    }

    .query-form .dropdown-toggle {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .query-form .query-key {
        width: 300px;
        height: 39px;
        font-size: 14px;
        vertical-align: middle;
        outline: none;
    }

    .query-form .query-submit-btn {
        height: 39px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .query-form .brand-menu,
    .query-form .sort-menu {
        right: 0px;
        left: 59px;
    }
</style>
<script>
    var currentPage=1,pageCount=10,pageTotal;
    var tabHead='<thead><tr><th>ID</th><th>关键词</th><th>操作</th></tr></thead>';
    //删除
    $(document).on('click', '.delete', function(){
        var trDom = $(this).closest('tr');
        var id = trDom.find('input[type="checkbox"]').data('id');
        $.post('/keywords/expand/del', {ids:JSON.stringify([id])}, function(data){
            if(data.code===200){
                trDom.remove();
            }
        });
    });

    //全选
    $('#allSelected').on('click', function(){
        var check=false;
        if($(this).attr('checked')){
            check=true;
        }
        $("table :checkbox").attr("checked", check);
    });

    $('.deleteAll').on('click',function(){
        let arr = [];
        $("table :checkbox:checked").each(function(item){
            arr.push($(this).data('id'));
        });
        if(!arr.length)return;
        $.post('/keywords/expand/del', {ids:JSON.stringify(arr)}, function(data){
            if(data.code===200){
                location.reload();
            }
        });
    });

    $('.query-form .query-key').keydown(function(e){
        if(e.keyCode === 13){
           $('.query-form').submit(); //处理事件
            return false;
        }
    });
</script>