<nav class="breadcrumb">客户端界面设置 <span class="c-gray en">&gt;</span> 社区首页配置 </nav>
<style>
    .ediv{padding-bottom:20px}
    .elr{padding-left: 650px;padding-top: 15px;}
	.einput_order{text-align:center;border:1px solid #cccccc;height: 35px;width: 80px;border-radius: 6px;}
	.einput_name{text-align:center;border:1px solid #cccccc;height: 35px;width: 160px;border-radius: 6px;}
	.einput_target{text-align: center;}   
    .etd{width:8%;border:1px solid;margin-left: 92%;font-size: 12px;border-color:#57B15B;background-color:#E2DA1F;color: #f8f8f8;;cursor:pointer;text-align:center;border-radius:5px;}
    .reset_bg{margin-top: 30px;}
	.edt{padding-left:30px;}
	.edr{padding-right:20px; font-size: 18px;}

    /*弹窗添加*/
     .add-icon{width:80%;margin-left: 42px;} 
     .add-icon ul{overflow:hidden;width:90%;margin-left: 4.5%;padding:10px 0px 5px;;position: relative;}
     .add-icon ul li{width:19%;float:left;height: 57px;border: 2px solid #ccc;margin-left: 1%;margin-bottom: 1%;}
     .add-icon ul li:hover{border: 2px solid #6BB5C1;cursor:pointer;}
     .add-icon ul li img{width: 100%;position: relative;}   
    .icon-img img{width: 60px;height: 60px;}
	.table td {
    text-align: center !important ;
    background-color: #fff !important;
    border: 1px solid !important ;
    color: #333 !important ;
    border-color: #ddd !important;}
	.table th {
    text-align: center !important;
    background-color: #eee !important;
    border: 1px solid !important;
    color: #333 !important ;
    border-color: #ddd !important ;}



  .sqgl_ljt_btn{width: 25px;height: 25px;background: url(assets/images/lajitong.png)no-repeat center;background-size: 100% 100%;margin: 0px auto;}  
  .sqgl_ljt_btn:hover{cursor: pointer;background: url(assets/images/reddel.png)no-repeat center;background-size: 100% 100%;}
  .sqgl_xztm{background-color: #F9B833!important;color: #FFF;font-size: 14px;border: 0px!important;border-radius: 4px;float: right;margin: 10px;}
 .sqgl_xztm:hover{background-color:#E8AA34!important;} 
</style>
    <div class="col-md-10" role="main">
	
		<div style="width:100%;border-bottom: 1px solid #e5e5e5;"><li class="edt" style="font-size: 28px; color: #7d7d7d;vertical-align: middle; padding-top: 15px; padding-bottom: 15px;">社区首页配置</div>
	
        <div class="reset_bg" style="width: 950px;">
            <form action="<?php echo site_url('mocuz/client/savecomm');?>" id="commun" method="post">
           
		   <div class="form-group" style="margin-bottom:40px;">
                <span class="dianm edt edr" >社区首页帖子流默认显示顺序</span>
				<div class="examp elr">

                    <input type="hidden" name="posts_show_type" value="<?php echo $posts_show_type['value'];?>">
                    <div class="biu_rdo" style="margin-top: 0px;">           
                        <img src="<?php echo asset_url('images/unchoice.png');?>" alt="" class="biu_rdo_img " isc="0" vid="1"> <span style="font-size: 14px;">全站新帖</span>
                        <img src="<?php echo asset_url('images/unchoice.png');?>" alt="" class="biu_rdo_img left_rdo" isc="0" vid="2"> <span style="font-size: 14px;">最新回复</span>
                    </div>
				</div>
                <div class="t-e biu_e" style="margin-left:30px!important;">
                    <img src="<?php echo asset_url('images/explain.png');?>" alt="">
                    <span>说明：用户进入社区模块时将会按照此处设置的默认顺序查看帖子流。</span>
                </div>
			</div>	
            <div class="form-group ediv" style="margin-bottom:40px;">
                <span class="dianm edt edr">社区首页帖子流排除版块</span>
                
                    <input type="text" class="form-control elput" style="width: 180px;float: right;  margin-top: 3px;" value="<?php echo $index_remove_block_id['value'];?>" name="index_remove_block_id">                     
                    <div class="t-e biu_e" style="margin-bottom:0px!important; margin-left:30px!important;">
                        <img src="<?php echo asset_url('images/explain.png');?>" alt="">
                        <span>说明：设置不需要再社区首页帖子流展示的版块ID，多个版块以英文逗号分隔。例如：可设置排除广告，分类信息刷新量较大的版块。</span>
                    </div>
                
            </div> 
            <!-- <div class="form-group" style="margin-bottom:40px;">
                <span class="dianm edt edr" >社区首页帖子流默认显示顺序</span>
                <div class="examp elr">

                    <input type="hidden" name="posts_show_type" value="<?php echo $posts_show_type['value'];?>">
                    <div class="biu_rdo" style="margin-top: 0px;">           
                        <img src="<?php echo asset_url('images/unchoice.png');?>" alt="" class="biu_rdo_img " isc="0" vid="1"> <span style="font-size: 14px;">全站新帖</span>
                        <img src="<?php echo asset_url('images/unchoice.png');?>" alt="" class="biu_rdo_img left_rdo" isc="0" vid="2"> <span style="font-size: 14px;">最新回复</span>
                    </div>
                </div>
                <div class="t-e biu_e" style="margin-left:30px!important;">
                    <img src="<?php echo asset_url('images/explain.png');?>" alt="">
                    <span>说明：用户进入社区模块时将会按照此处设置的默认顺序查看帖子流。</span>
                </div>
            </div>   -->
            <div class="form-group " style="margin-bottom:40px;">
                    <span class="dianm edt edr">社区自定义推荐分类</span>
                   <div class="biu_rdo" style="margin-top: 0px;">  
                        <input type="hidden" name="hot_community" value="<?php echo $hot_community['value'];?>">
                        <div class="biu_rdo" >           
                            <img src="<?php echo asset_url('images/unchoice.png');?>" alt="" class="biu_rdo_img " isc="0" sid="1"> <span style="font-size: 14px;">显示</span>
                            <img src="<?php echo asset_url('images/unchoice.png');?>" alt="" class="biu_rdo_img left_rdo" isc="0" sid="0"> <span style="font-size: 14px;">隐藏</span>
                        </div>
                     </div>
                     <div class="t-e biu_e" style="margin-left:30px!important;">
                        <img src="<?php echo asset_url('images/explain.png');?>" alt="">
                        <span>说明：社区首页顶部新增可自定义的推荐分类，设置为“显示”后社区页面打开后可默认展示</span>
                    </div>
                    <img style="margin-left:30px;" src="<?php echo asset_url('images/head.png');?>"/>
                </div> 
                <div class="form-group ediv"  style="margin-bottom:40px;">
                    <span class="dianm edt edr">社区首页配置调用</span>
                    
                        <input type="text" class="form-control elput" style="width: 180px;float: right;  margin-top: 3px;" value="<?php echo $hot_community_id['value']?>" name="hot_community_id">
                        
                        <div class="t-e biu_e" style="margin-bottom:0px!important; margin-left:30px!important;">
                            <img src="<?php echo asset_url('images/explain.png');?>" alt="">
                            <span>说明：请在此处输入社区首页配置调用的DIY模块，如已配置妥当，请尽量不要修改，以免出现数据错乱等问题。</span>
                        </div>
                    
                </div>
                <div class="form-group ediv">
                    <span class="dianm edt edr">社区首页配置调用名称</span>
                    
                        <input type="text" class="form-control elput" style="width: 180px;float: right;  margin-top: 3px;" value="<?php echo $hot_community_name['value']?>" name="hot_community_name" maxlength='5'>
                        
                        <div class="t-e biu_e" style="margin-bottom:0px!important; margin-left:30px!important;">
                            <img src="<?php echo asset_url('images/explain.png');?>" alt="">
                            <span>说明：请在此处输入热点社区区块显示的名称，此名称只能少于等于5个字</span>
                        </div>
                    
                </div>							
			<div class="form-group">
                <span class="edt edr" style="margin-bottom: 15px;margin-top: 6px;">社区推荐版块配置</span></span>
                <div class="t-e biu_e" style="important; margin-left:30px!important; width:auto!important;">
                    <img src="<?php echo asset_url('images/explain.png');?>" alt="">
                    <span>说明：为聚合人气，避免新用户困惑，请将您论坛中最重要的版块配置在下方列表中，以便在社区首页顶部优先显示。您还可以针对版块名称进行自定义。如此处不添加任何板块，此区域会自动隐藏。</span>
                </div>


                <div class="m_table_box" style="width:auto!important;">
                <table >
                    <thead>
                        <tr>
                            <th class="s-thead" style="width:140px;">排序</th>
                            <th class="s-thead">版块名称</th>
                            <th class="s-thead" style="width:140px;">版块图标</th>
                            <th class="s-thead" style="width:140px;">跳转类型</th>
                            <th class="s-thead" style="width:140px;">跳转目标</th>
                            <th class="s-thead" style="width:140px;">操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbody1">
                        <?php 
                            foreach ($recomm_forum as $k=>$v) {
                        ?>
                         <tr>
                            <td><input class="einput_order" type="text" name="bid[]" value="<?php echo $v['bid'];?>" onblur="fblur(this)"></td>
                            <td><input type="text" class="einput_name"  onblur="ifblur(this)" name="blockname[]"  maxlength="6" value="<?php echo $v['blockname'];?>"></td>
                            <td class="icon-img"><img id="<?php echo $k+1;?>" src="<?php echo asset_url('images/channel_img/'.$v['icon']);?>" /><input type="hidden" name="icon[]" value="<?php echo $v['icon']?>"></td>
                            <td>版块</td>
                            <td><input type="text"  class="einput_target" onblur="fblur(this)" name="target[]" value="<?php echo $v['target']?>"></td>
                            <td class="td-center">
                                <div class="sqgl_ljt_btn" data-target="#delModal" data-toggle="modal" sid="<?php echo $v['bid']?>" status="2"></div>
                            </td>                       
                        </tr>                  
                        <?php
                            }
                        ?>            
                    </tbody>
                    <tbody>
                        <tr>
                            <td colspan="6">                               
                                <button class="sqgl_xztm" id="addforum"> 新增条目</button>
                            </td>
                        </tr> 
                    </tbody>
                </table>
        
            </div>
			</div>					
		
        </form>
        <button class="edit_btn" id="save">保存修改</button>
        </div>
    </div>
    <!--确认删除弹出框-->
    <input type="hidden" name="astatus" value="">
    <input type="hidden" name="avalue" value="">
    <div class="modal fade equity" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 360px; height: 190px; border-radius: 0px; top: 20%; display: none;position: fixed;">
        <div class="modal-dialog" style="  width: 100%!important;margin: 0">
            <p class="delete-title">确定要删除该版块？</p>
            <div class="equity-button">
                <button type="button" class="h5a-btn btn  btn-primary equitycof" id='optdel'>确定</button>
                <button type="button" class="h5a-btn btn  btn-default equityclose" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
    <!--添加弹框-->
    <div class="modal fade equity" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="overflow: hidden;height: 380px;  width: 400px;position: fixed;top:15%;overflow: scroll;overflow-x: hidden;">
        <div class="modal-dialog" style="width: 100%!important;padding: 0;margin:0;">
                <input type="hidden" name="icon_tmp" value="">
                <input type="hidden" name="icon_img_tmp" value="">
                <input type="hidden" name="iconId" value="">
                <div class="form-group">
                    <p class="add-text" style="font-size: 16px;text-align: center;margin-top: 20px;">图标</p>
                    <div class="add-icon">
                        <ul>
                            <?php
                            foreach ($iconlist as $k => $v) {
                            ?>
                            <li class="mark-choose"><img src="<?php echo asset_url('images/channel_img').'/'.$v;?>" alt=""></li>
                            <?php
                            }
                            ?>
                        </ul>
                    </div>
                </div>                
                <div class="equity-button" style="width: 250px!important;padding-left: 0px;">
                    <button type="submit"  class="h5a-btn btn  btn-primary equitycof" id="edit_opt" style="float: left;margin: 0;">确定</button>
                    <button type="button" class="h5a-btn btn  btn-default equityclose" data-dismiss="modal" style="  float: right;">取消</button >
                </div>
 
        </div>  
    </div>


<script type="text/javascript">
$(function(){
    //初始化
    var posts_show_type = $('input[name=posts_show_type]').val();
    var hot_community = $('input[name=hot_community]').val();
    $('.biu_rdo img').each(function(){
     if($(this).attr('vid') == posts_show_type||$(this).attr('sid') == hot_community)
     {
        $(this).attr('src','<?php echo asset_url("images/choice.png");?>');
        $(this).attr('isc',1);
     }
    });
    // 单选按钮切换
    $('.biu_rdo img').click(function(){
         var isc=$(this).attr('isc');
        if(typeof($(this).attr('vid')) != "undefined")
        {
            var subval = $(this).attr('vid');
            $('input[name=posts_show_type]').val(subval);

        }
        if(typeof($(this).attr('sid')) != "undefined")
        {
            var pval = $(this).attr('sid');
            $('input[name=hot_community]').val(pval); 
        }
        if(isc==0){
            $(this).attr('src','<?php echo asset_url("images/choice.png")?>');
            $(this).attr('isc','1');
            $(this).siblings('img').attr('src','<?php echo asset_url("images/unchoice.png");?>');
            $(this).siblings('img').attr('isc','0');
        }
    })
})    
</script>
<script type="text/javascript">

    /*图片icon选择*/
    $(document).on('click', '.mark-choose', function(event) {
        event.preventDefault();
        /* Act on the event */
        $(this).addClass('colorOn');
        $(this).siblings().removeClass('colorOn');
        var src = $(this).children('img').attr('src');
        var icon = src.split("images/channel_img/");


        $('input[name=icon_tmp]').val(icon[1]);
    });
    /*添加/编辑 图标样式显示*/
    function showIcon(icon)
    {
        $(".mark-choose").each(function(){
            var icon_src = $(this).children('img').attr('src');
            var icon_src_last = icon_src.split("images/channel_img/");
            if(icon_src_last[1] == icon)
            {
                $(this).addClass('colorOn');
                $(this).siblings().removeClass('colorOn');
                $('input[name=icon_tmp]').val(icon_src_last[1]);
                return true;
            }
        });        
    }
    function ifblur(obj)
    {
        var regExp1 = /^(\w|-|[\u4e00-\u9fa5]){1,6}$/;
        if(regExp1.test(obj.value) == false)
        {
            alert("请输入正确版块名");
            setTimeout(function(){obj.focus();},0); 
        }   
    }
    function fblur(obj)
    {
         var regExp1 = /^\d+$/;

        if(regExp1.test(obj.value) == false)
        {
            alert("格式不正确");
            setTimeout(function(){obj.focus();},0); 
        }
        
    }

    $(document).ready(function() {
        //表单提交
        $("#save").on('click',function(event) {
            event.preventDefault();
            /* Act on the event */
            var remove_block_id = $('input[name=index_remove_block_id]').val();
            var hot_community = $("input[name='hot_community']").val();
            var hot_community_id = $("input[name='hot_community_id']").val(); 
            var hot_community_name = $("input[name='hot_community_name']").val(); 
            console.log(remove_block_id);
            var regExp2 = /^(\d+)?(,\d+)*$/;
            if(regExp2.test(remove_block_id) == false)
            {
                alert('请填写正确板块数据');
                return false;
            }
            var regExp1 = /^\d+$/;
        if(hot_community  == 1 )
        {
            if(regExp1.test(hot_community_id) == false)
            {
                alert('请填写正确热点社区ID');
                return false;
            }
            if(!hot_community_name){
                 alert('请填写正确热点社区名称');
                return false;
            }

        }
            $("form").submit();
        });

        //删除操作
        $(document).on('click', '.sqgl_ljt_btn', function(event) {
            event.preventDefault();
            /* Act on the event */           
            $("input[name=astatus]").val($(this).attr('status'));
            $("input[name=avalue]").val($(this).attr('sid'));
        });
        //单击确定的选择效果
        $('#edit_opt').on('click',function(event) {
            event.preventDefault();
            /* Act on the event */
            var icon_img_tmp = $('input[name=icon_tmp]').val();
            var icon_img_id = $('input[name=iconId]').val();
            
            $.post('<?php echo site_url("mocuz/client/get_icon_size")?>'+'/'+icon_img_tmp,function(data) {
                if(data.code == 0)
                {
                    alert(data.msg);
                    return false;
                }
				
                $('#'+icon_img_id).next('input').val(icon_img_tmp);
                $('#'+icon_img_id).attr('src','<?php echo asset_url("images/channel_img/")?>/'+icon_img_tmp);
                $("#myModal").modal('hide');

            },'json');
        });

        //图标显示
        $(document).on('click', 'td img', function(event) {
            event.preventDefault();
            /* Act on the event */ 
            $("#myModal").modal();
            var icon = $(this).next('input').val();
            var iconId = $(this).attr('id');
            $('input[name=iconId]').val(iconId);
            showIcon(icon);
        });
        $("#optdel").on('click', function(event) {
            event.preventDefault();
            var status = $("input[name=astatus]").val();
            var bid = $("input[name=avalue]").val();
            if(status == 1)
            {
                var obj = $(".sqgl_ljt_btn[sid="+bid+"]"); 
                obj.parent("td").parent("tr").remove();
                $(".equityclose").trigger('click');
            }
            else
            {
                //已经存在保存的数据显示
                $.ajax({
                    url: '<?php echo site_url("mocuz/client/delcomm");?>',
                    type: 'POST',
                    dataType: 'json',
                    data: {id: bid},
                })
                .done(function() {
                    location.href="";
                    console.log("success");
                })
                .fail(function() {
                    console.log("error");
                }) 
            }     
        });        
        $("#addforum").on('click',function(event) {
            event.preventDefault();
            /* Act on the event */
            var length = $("#tbody1 tr").length;
            if(length == 0)
            {
                var len = 0;
                var lastnum = 0;
            }
            else
            {
                var slen = parseInt(length)-1;
                var len = $("#tbody1 tr").eq(slen).find('td').first().children('input').val();
                var lastnum = $("#tbody1 tr").eq(slen).find('td').last().children('div').attr('sid');
            }
            if(length < 8)
            {
                len = parseInt(len)+1;
                lastnum = parseInt(lastnum)+1;
                var str ="";
                str = "<tr><td><input class=\"einput_order\" type=\"text\" name=\"bid[]\" value=\""+len+"\" onblur=\"fblur(this)\"></td><td><input type=\"text\" style=\"text-align:center;\" class=\"einput_name\" name=\"blockname[]\" maxlength=\"6\" onblur=\"ifblur(this)\" placeholder=\"最多六个字符\" value=\"默认\"></td><td class=\"icon-img\"><img id=\""+len+"\" src=\"<?php echo asset_url('images/channel_img/moren.png');?>\" /><input type=\"hidden\" name=\"icon[]\" value=\"moren.png\"></td><td>版块</td><td><input type=\"text\"  class=\"einput_target\" onblur=\"fblur(this)\" name=\"target[]\" style=\"text-align:center;\" value=\"0\"></td><td><div class=\"sqgl_ljt_btn\" data-target=\"#delModal\" data-toggle=\"modal\" sid=\""+lastnum+"\" status=\"1\"></div></td></tr>";
                $('#tbody1').append(str);
            }
            else
            {
                alert("最多添加八个版块");
            }
        });
    });         
</script>