<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">关键词管理</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 data-toggle="modal" href="#pop" class="btn btn-default" style="margin-right:10px;">增加</a>
            <a class="btn btn-default deleteAll">删除</a>
        </div>
    </div>
</div>

<div id="pop" class="modal fade in" style="display: none; ">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>添加关键词</h3>
    </div>
    <div class="modal-body">
        <input type="text" style="height:50px;width:400px;" id="addDatas">
    </div>
    <div class="modal-footer">
        <a class="btn btn-success addKeywords">确定</a>
    </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">
                
            </table>
        </div>
    </div>
</div>
<ul class="pager">
    <li><a class="privious pages">上一页</a></li>
    <li><a class="next pages">下一页</a></li>
  </ul>
<style>
    .nostyle{
        background: transparent;
    }
    input[type=checkbox]{
        vertical-align: sub;
        margin-right: 5px;
    }
    input[disabled]{
        background: transparent;
        border: none;
    }
    #pop{
        width:500px;
        height:250px;
        background: #fff;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin:auto;
    }
    .pager{
        float: right;
        margin-right: 20px;
        margin-top:0;
    }
    .pages{
        cursor: pointer;
    }
</style>
<script>
    var currentPage=1,pageCount=10,pageTotal;
    var tabHead='<thead><tr><th>ID</th><th>关键词</th><th>操作</th></tr></thead>';
    //展示列表
    $(document).on('ready pjax:success', function() {
        $.get('/keywords/getKeywords?', {currentPage:currentPage, pageCount:pageCount}, function(data){
            var html='';
            let datas=data.data;
            if(datas){
                datas.forEach(function(item, index){
                    html+=tableHtml(item, index);
                });
                $('#table-oper-log').html(tabHead+html);
                pageTotal=Math.ceil(data.total/pageCount);
            }
            
        });
    });
    $('.privious').on('click', function() {
        if(currentPage==1)return;
        $.get('/keywords/getKeywords?',{currentPage:--currentPage, pageCount:pageCount}, function(data){
            var html='';
            let datas=data.data;
            if(datas){
                datas.forEach(function(item, index){
                    html+=tableHtml(item, index);
                });
                $('#table-oper-log').html(tabHead+html);
            }
            
        });
    });
    $('.next').on('click', function() {
        if(currentPage>=pageTotal)return;
        $.get('/keywords/getKeywords?',{currentPage:++currentPage, pageCount:pageCount}, function(data){
            var html='';
            let datas=data.data;
            if(datas){
                datas.forEach(function(item, index){
                    html+=tableHtml(item, index);
                });
                $('#table-oper-log').html(tabHead+html);
            }
            
        });
    });
    //删除
    $(document).on('click', '.delete', function(){
        var val=$($(this).parents('tr').find('input')[1]).val();
        var parent=$(this).parents('tr');
        $.get('/keywords/delKeywords', {keywords:JSON.stringify([val])}, function(data){
            if(data.code===200){
                parent.replaceWith('');
            }
        });
    });
    //编辑
    $(document).on('click', '.edit', function(){
        let input=$($(this).parents('tr').find('input')[1]);
        input.attr('disabled',false);
        let oldValue=input.val();
        input.attr('oldValue',oldValue);
        input.on('blur', function(){
            var val=input.val();
            $.get('/keywords/editKeywords', {keywords:JSON.stringify([val, oldValue])}, function(data){
                if(data.code===200){
                    var isSame=false;
                    $('table .values').each(function(){
                        if($(this)!=input){
                            if($(this).val()==input.val())isSame=true;
                        }
                    });
                    if(isSame) location.reload();
                    else input.attr('disabled',true);
                }
            });
        });        
    });
    //添加
    $(document).on('click', '.addKeywords', function(){
        var val=$('#addDatas').val();
        $.get('/keywords/addKeywords', {keywords:val}, function(data){
            if(data.code===200){
                location.reload();
            }
        });
    });
    //全选
    $('#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).parents('tr').find('input')[1]).val());
        });
        if(!arr.length)return;
        $.get('/keywords/delKeywords', {keywords:JSON.stringify(arr)}, function(data){
            if(data.code===200){
                location.reload();
            }
        });
    });
    function tableHtml(item, index){
        return '<tr><td><label><input type="checkbox">'+index+'</label></td><td><input class="values" value="'+item+'" disabled></td><td><button class="btn btn-default nostyle edit">编辑</button><button class="btn btn-default nostyle delete">删除</button></td></tr>';
    }
</script>