<div class="col-md-10" role="main">
    <nav class="breadcrumb"></i> 分享圈<span class="c-gray en">&gt;</span>帖子管理</nav>
    <div class="title-box">
        <p class="t-p"  style="font-size: 28px; color: #7d7d7d;vertical-align: middle; padding-top: 15px; padding-bottom: 15px;">帖子管理</p>
         <div class="t-e" style="margin-left:30px">
            <img src="assets/images/explain.png" alt="">
            <span>说明：① 本站朋友圈的发帖均在此展示；② 帖子浏览量（人气）一列可点击编辑，编辑后真实浏览量也会继续增加人气；③ 人气排行，页面显示人气前8的帖子</span>
        </div>
    </div>
    
    <div class="topic_box">
        <form method='post' action=''>
            <div class="screening">
                <div class="topic_group">
                    <div class="topic_group_left">
                        <div class="gn_jf_type topic_select">
                            <p class="reward_je_p">按状态查询</p> 
                            <img src="<?php echo asset_url('images/triangle.png')?>" alt="" class="sel_down">
                        </div>
                        <ul isn="0"  class="topic_select_option">
                            <li class="on_tc_type" vid="-1">全部</li>
                            <li class="on_tc_type" vid="0">启用</li>
                            <li class="on_tc_type" vid="1">禁用</li>
                        </ul>
                    </div>
                    <div class="topic_group_left">
                        <input type="text"class="form-control topic_group_gjz" id="post_title" placeholder="按关键字查询">  
                        <img src="<?php echo asset_url('images/search.png')?>" alt="" class="topic_group_gjz_img">
                    </div>   
                    <div class="topic_group_left">
                        <input type="text"class="form-control topic_group_gjz" id="post_uname" placeholder="按用户名查询">  
                        <img src="<?php echo asset_url('images/search.png')?>" alt="" class="topic_group_gjz_img">
                    </div>  
                    <button type="button" onclick="changeAllPostState()">批量禁用</button>
                </div>
               
<!--                 <div class="topic_group">
                     <div class="topic_group_left">
                        <div class="gn_jf_type topic_select">
                            <p class="reward_je_p">按话题来源查询</p> 
                            <img src="<?php //echo asset_url('images/triangle.png')?>" alt="" class="sel_down">
                        </div>
                        <ul isn="0"  class="topic_select_option">
                            <li class="on_tc_type" vid="0">自建话题</li>
                            <li class="on_tc_type" vid="1">云话题</li>
                            <li class="on_tc_type" vid="2">用户建话题</li>
                        </ul>
                    </div>
                    <div class="topic_group_left">
                         <input type="text" class="datepicker  form-control dateinput topic_group_gjz" placeholder="选择发帖时间区间"></input>&nbsp;&nbsp;至&nbsp;&nbsp;
                        <input type="text" class="datepicker  form-control dateinput topic_group_gjz" placeholder="选择发帖时间区间"></input>
                    </div>                
                    <button>删除</button>
                </div>
            </div> -->
        </form>
        <div class="m_table_box topic_table" >
            <table>
                <thead>
                <tr>
                    <th class="s-thead">
<img onclick="choiceAll(this)" src="<?php echo asset_url('images/select_box.png')?>" id="allbox" alt="" class="biu_rdo_img " isc="0" vid="0">
                    </th>
                    <th class="s-thead">帖子ID<br/>

                    </th>
                    <th class="s-thead" width="300px;">帖子内容</th>
                    <th class="s-thead">用户</th>
                    <th class="s-thead">时间</th>
                    <th class="s-thead">帖子浏览量</th>
                    <th class="s-thead">操作</th>
<!--                <th class="s-thead">点赞数</th>
                    <th class="s-thead">话题</th> -->
                </tr>
                </thead>
                <tbody id="post_info">
                <?php foreach($post_list as $d):;?>
                    <tr>
                        <td><img onclick="choiceOne(this)" src="<?php echo asset_url('images/select_box.png')?>"  alt="" class="biu_rdo_img " isc="0" vid="<?php echo $d['id'];?>"></td>
                        <td><?php echo $d['id'];?></td>
                        <td><p style="width:300px;"><?php echo $d['content'];?></p></td>
                        <td><?php echo $d['username'];?></td>
                        <td><?php echo date('Y-m-d H:i:s',$d['createtime']);?></td>
                        <td onclick="changeRead(this,'<?php echo $d["id"]?>')"  id="readcount"><?php echo $d['readcount'];?></td>
                        <td id="rec_<?php echo $d['id'];?>">
                            <?php if($d['isdelete'] == 1):;?>
                                <button class="topic_table_btn" onclick="changePostState(<?php echo $d['id'];?>,0)" >启用</button> 
                           <?php else:?>
                                <button class="topic_table_btn" onclick="changePostState(<?php echo $d['id'];?>,1)" >禁用</button>
                            <?php endif;?>
                        </td>
                    </tr>
                <?php endforeach;?>
                </tbody>
            </table>

        </div>

        <div class="wrap">
            <div style="float:left;margin-top:10px;">
                <select id="pagesize" style="height:30px;">
                    <option value="10" selected="selected">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="40">40</option>
                    <option value="50">50</option>
                </select>
            </div>
            <div class="fenye">

                <ul>
                    <li id="first">
                    <a href="javascript:;" id="first" data-ci-pagination-page="1" rel="start">首页</a>
                    </li>
                    <li id="top">
                    <a href="javascript:;" data-ci-pagination-page="0" rel="prev" id="prev">上一页</a>
                    </li>
                    <li class="xifenye" id="xifenye"><a id="xiye">1</a>/<a id="mo"><?php echo $pagecount;?></a></li>
                    <li id="down">
                    <a href="javascript:;" data-ci-pagination-page="2" rel="next" id="next">下一页</a>
                    </li>
                    <li id="last">
                    <a href="javascript:;" id="end" data-ci-pagination-page="5">末页</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="post_status"/>
<script type="text/javascript" src="<?php echo asset_url('js/bootstrap-datepicker.js') ?>"></script>
<script type="text/javascript" src="<?php echo asset_url('js/validate.js') ?>"></script>
<script type="text/javascript" src="<?php echo asset_url('js/bootstrapValidator.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo asset_url('js/common.js') ?>"></script>
<script type="text/javascript">
$(function(){
    // 模拟下拉框
    $('.gn_jf_type').click(function(e){
        e.stopPropagation();
        var ul=$(this).next('.topic_select_option');
        var isn=ul.attr('isn');
        if(isn==0){
            ul.show();
            ul.attr('isn','1');
            $('.gn_jf_type').not($(this)).siblings('ul').hide();
            $('.gn_jf_type').not($(this)).siblings('ul').attr('isn','0');
        }else{
            ul.hide();
            ul.attr('isn','0');
        }
    })



    $('.topic_select_option li').mouseover(function(){
        $(this).addClass('on_rk_type');
        $(this).siblings().removeClass('on_rk_type');
    })

    $('.topic_select_option li').click(function(){
        var vid = $(this).attr('vid');
        $('#post_status').attr('value',vid);
        $('.topic_select_option').hide();
        $('.topic_select_option').attr('isn','0');
        var text=$(this).text();
       $(this).parent().prev().find('.reward_je_p').text(text);
       getPostInfo();
    })

    //搜索框的值一旦改变就请求数据(按帖子内容搜索)
    $("#post_title").keyup(function(){
        getPostInfo();
    
    })  

    //搜索框的值一旦改变就请求数据(按用户名搜索)
    $("#post_uname").keyup(function(){
        getPostInfo();
    
    })  

    //修改每页显示数量
    $("#pagesize").change(function(){
        $('#xiye').text('1');
        getPostInfo();
    })

    //首页
    $("#first").click(function(){
        $("#xiye").text('1');
        getPostInfo();
    })
    //末页
    $("#end").click(function(){
        $("#xiye").text($('#mo').text());
        getPostInfo();
    })
    //上一页
    $("#prev").click(function(){
        var page=$("#xiye").text();
        if(parseInt(page)>1){
            $("#xiye").text(parseInt($('#xiye').text())-1);
        }
        getPostInfo();
    })
    // 下一页
    $("#next").click(function(){
        var page=$("#xiye").text(); 
        var endpage=$("#mo").text();
        if(parseInt(page)<parseInt(endpage)){
            $("#xiye").text(parseInt($('#xiye').text())+1);
        }
        getPostInfo();
    })

})  

//单选效果
function choiceOne(e){
    var isallchoice=true;
    var isc=$(e).attr('isc');
    if(isc==0){
        var state=false;
        $(e).attr('src','<?php echo asset_url('images/selected_box.png')?>');
        $(e).attr('isc','1');
        $("tbody tr td .biu_rdo_img").each(function(){
            var isce=$(this).attr('isc');
            if(isce==0){
                state=true;
                return false;
            }
        });
        if(!state){
            $('#allbox').attr('isc','1');
            $('#allbox').attr('src','<?php echo asset_url('images/selected_box.png')?>');
        }

    }else{
        $(e).attr('src','<?php echo asset_url('images/select_box.png')?>');
        $(e).attr('isc','0');
        $('#allbox').attr('isc','0');
        $('#allbox').attr('src','<?php echo asset_url('images/select_box.png')?>');
    }
}
//全选
function choiceAll(e){
    if($(e).attr('isc')==0){
        $(e).attr('isc','1');
        $(e).attr('src','<?php echo asset_url('images/selected_box.png')?>');
            $("tbody tr td .biu_rdo_img").each(function(){
            $(this).attr('isc','1');
            $(this).attr('src','<?php echo asset_url('images/selected_box.png')?>')

        });
    }else{
        $(e).attr('isc','0');
        $(e).attr('src','<?php echo asset_url('images/select_box.png')?>');  
        $("tbody tr td .biu_rdo_img").each(function(){
            var isc=$(e).attr('isc');
            $(this).attr('isc','0');
            $(this).attr('src','<?php echo asset_url('images/select_box.png')?>'); 
        });
    }
}


//ajax获取帖子数据
function getPostInfo(){
    $('#allbox').attr('isc','0');
    $('#allbox').attr('src','<?php echo asset_url('images/select_box.png')?>');
    var page=$('#xiye').text();
    var pagesize=$('#pagesize').val();
    var status=$("#post_status").val();

    var title=$("#post_title").val();
    var uname=$("#post_uname").val();
        $.ajax({
            url:'<?php echo site_url('sharecircle/post/index');?>',
            type:'post',
            data:{'page':page,'pagesize':pagesize,'status':status,'title':title,'uname':uname},
            dataType:'json',
            success:function(data){
                var list=data.post_list;
                $("#mo").text(data.pagecount);
                createHTML(list);
            },
            error:function(){

            }
        })
}

//动态加载HTML
function createHTML(data){
    var str="";
    $.each(data, function(idx, obj) {
        str+="<tr>";
        str+="<td><img onclick='choiceOne(this)' src='<?php echo asset_url("images/select_box.png")?>' alt='' class='biu_rdo_img' isc='0' vid='"+obj.id+"'></td>"
        str+="<td>"+obj.id+"</td>";
        str+="<td><p style='width:300px;'>"+obj.content+"</p></td>";
        str+="<td>"+obj.username+"</td>";
        str+="<td>"+new Date(parseInt(obj.createtime) * 1000).toLocaleString().replace(/年|月/g, "-")+"</td>";
        str+="<td onclick='changeRead(this,"+obj.id+")' id='readcount'>"+obj.readcount+"</td>";
        str+="<td id='"+obj.id+"'>";
        if(obj.isdelete==1){
            str+="<button class='topic_table_btn' onclick='changePostState("+obj.id+",0)' tid='"+obj.id+"'>启用</button>"; 
        }else{
            str+="<button class='topic_table_btn' onclick='changePostState("+obj.id+",1)' tid='"+obj.id+"'>禁用</button>";
        }
        str+="</td>";
        str+="</tr>";
    });
    $('#post_info').html(str);
}

//将帖子浏览量的单元格给为输入框模式
function changeRead(e,id){
    $(e).attr('onclick','');
    var num=$(e).text();
    if(num==""){
        num=0;
    }
    $(e).html('<input type="number" value="'+num+'" id="post_readcount" onblur="subReadCount(this,'+id+')"/>');
    $("#post_readcount").focus();
}

//将修改后的帖子浏览量保存后恢复到单元格模式
function subReadCount(e,id){
    var num = $(e).val();
    $(e).parent().text(num);
    $.ajax({
        url:'<?php echo site_url('sharecircle/post/changeReadCount');?>',
        type:'post',
        data:{'id':id,'num':num},
        dataType:'json',
        success:function(data){
           $('#readcount').attr('onclick','changeRead(this,'+id+')');
        },
        error:function(){
        }
    })
    
}

//禁用帖子
function changePostState(id,state){
    var status=false;
    if(!status){
        status=true;
        $.ajax({
            url:'<?php echo site_url('sharecircle/post/changePostState');?>',
            type:'post',
            data:{'id':id,'state':state},
            dataType:'json',
            success:function(data){
                getPostInfo();
               status=false;
            },
            error:function(){
            }
        })
    }
}

//批量禁用
function changeAllPostState(){
    var ids=new Array();
    $("tbody tr td .biu_rdo_img").each(function(){
        var isce=$(this).attr('isc');
        if(isce==1){
            ids.push($(this).attr('vid'));
        }
    });
    id=ids.join(","); 
	if(id==""||id==null){
		alert('无选择项');
		return false;
	}
    var status=false;
    if(!status){
        status=true;
        $.ajax({
            url:'<?php echo site_url('sharecircle/post/changePostState');?>',
            type:'post',
            data:{'id':id,'state':1},
            dataType:'json',
            success:function(data){
                getPostInfo();
               status=false;
            },
            error:function(){
            }
        })
    }
}

</script>
