<link rel="stylesheet" type="text/css" href="<?php echo asset_url('css/thread_style.css')?>">
<style>
	.DB_plus{left: 156px;}
	.DB_1D p {padding: 7px 28px 6px 0px;}
</style>
<script type="text/javascript" src="<?php echo asset_url('js/jquery.DB_treeMenu.min.js')?>"></script>
	<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">
	            <img src="<?php echo asset_url('images/explain.png');?>" alt="">
	            <span style="display: inline-block;width: 800px;vertical-align: text-top;">说明：针对应用了DZ分类信息功能模块，Mocuz V3 客户端可以按照特定的样式显示该板块。以增强使用分类信息功能时的用户体验。</span>
	        </div>
	    </div>
		<div id="DB_nav">
			<p class="DB_bt">版块列表</p>
			<ul id="DB_tree">
			<?php foreach($forums as $fid => $forum){ ?>
				<li class="DB_1D">
					<img class="DB_plus" src="<?php echo asset_url('images/tree_on.png')?>" alt="">
					<p class="lm_clk forum" fid="<?php echo $fid;?>"><?php echo $forum['name'];?></p>
					<?php if(isset($forum['child'])){ ?>					
						<ul class="DB_2D">
							<?php foreach($forum['child'] as $fid=>$name){ ?>
							<li class="forum" fid="<?php echo $fid;?>"><?php echo $name?></li>
							<?php } ?>					
						</ul>
					<?php }?>					
				</li>
			<?php }?>					
			</ul>
		</div>

		<div class="ify_box">
			<input type="hidden" name="chk" value="7">
			<div class="ify_head" style="display:none">
				<img src="<?php echo asset_url('images/unchoice.png');?>" alt="" class="biu_rdo_img"  isc="0" num="1" template="7">
				<span>不使用自定义模块</span>
			</div>
			<div class="ify_imgs">
				<div class="ify_head" style="display:none">
					<img src="<?php echo asset_url('images/unchoice.png');?>" alt="" class="biu_rdo_img " isc="0" num="2" template="8">
					<span>多图模式</span>
					<div class="t-e biu_e">
                            <img src="<?php echo asset_url('images/explain.png');?>" alt="" style="display:block;float:left;margin-top: 1px;">
                            <span class="thread_tle" style="display: block;width: 620px;float: right;">说明：多图样式包含多达3张缩略图及一个可自定义的强调字段，可打造出类似淘宝“咸鱼”式的二手市场风格。建议用于交友二手市场等突出图片元素的分类信息版块。</span>
                    </div>
				</div>
				<div class="imgs_box"  id="template_8" style="display: none">
					<ul class="fl_list">
						<li class="get_fl get_fl_on">分类信息1套</li>
					</ul>
					<div class="fl_tle">
						<div class="tle_center">
							
							<div class="tle_user">
								<div class="imgs_sty">									
									<select name="" id="" class="pic_style">
										<option value="0">缩略图来源</option>
									</select>
								</div>
								<div class="user_qd">
									<select autocomplete="off" name="field1" class="field" id="" style="margin-top:0px;margin-left: 2px;">
										<option value ="0" class="qd_red">强调字段</option>  
									</select>
								</div>
							</div>

							<div class="tle_snt">
								
								<div class="imgs_boxs" style="margin-top:20px;">
									<div class="img_sty "><img style="width:100%" src="<?php echo asset_url('images/suolvtu1.jpg');?>"></div>
									<div class="img_sty"><img style="width:100%" src="<?php echo asset_url('images/suolvtu2.jpg');?>"></div>
									<div class="img_sty sty_one"><img style="width:100%" src="<?php echo asset_url('images/suolvtu3.jpg');?>"></div>
								</div>
							</div>
							<div class="tel_btm">
								<p>这里是帖子标题</p>
							</div>
						</div>						
					</div>
				</div>
			</div>
		</div>
			<div class="ify_imgs" style="margin-top: 30px;">
				<div class="ify_head" style="display:none">
					<img src="<?php echo asset_url('images/unchoice.png');?>" template="9" alt="" class="biu_rdo_img " isc="0" num="3">
					<span>信息版块模式</span>
					<div class="t-e biu_e">
                            <img src="<?php echo asset_url('images/explain.png');?>" alt="" style="display:block;float:left;margin-top: 1px;">
                            <span class="thread_tle" style="display: block;width: 620px;float: right;">说明：信息板块样式提供了多达三个可自定义的信息字段，一个描述字段及一个强调字段。配合多套分类信息字段组合，可打造出类似安居客/58同城的房产列表样式。建议用于房产、拼车、招聘等需要在页面上展示多个重要字段的分类信息版块。</span>
                    </div>
				</div>
					<div class="imgs_box"  id="template_9" style="display: none">
					<ul class="fl_list">
						<li class="get_fl get_fl_on">分类信息1套</li>						
					</ul>
					<div class="fl_tle">
						<div class="tle_center">
						

							<div class="tle_snt">
								<div class="imgs_sty" style="width:auto!important;">
									<select name="" id="" class="pic_style" style="float:left">
										<option value="0">缩略图来源</option>
									</select>
									<select name="field2" id="" class="slt_two field" style="margin-top:0px;">
											<option value="0">强调字段</option>
									</select>
								</div>
								<div class="bk_box">
									<div class="img_sty sty_two"><img style="width:100%" src="<?php echo asset_url('images/suolvtu1.jpg');?>"></div>
									<p class="bk_tle">这里是帖子标题</p>
									<div class="bk_slt">
										<select name="field1" id="" class="field">
											<option value="0">描述字段</option>
										</select>			
									</div>
									<div  class="bk_btn">
										<select name="field3" id="" class="field">
											<option value="0">自定义字段</option>
										</select>
										<select name="field4" id="" class="field" style="margin-left: 8px;">
											<option value="0">自定义字段</option>
										</select>	
										<select name="field5" id="" class="field" style="margin-left: 8px;">
											<option value="0">自定义字段</option>
										</select>			
									</div>
								</div>
							</div>
							
						</div>							
					</div>
				</div>
				<button class="edit_btn" id="save" style="display:none">保存修改</button>
			</div>
			
		</div>
	</div>

<script type="text/javascript">

$(document).ready(function(){  
   

	function geiDBHeight(){
		var rhight=(document.body.scrollHeight)-50 + 200 ;
		$('#DB_nav').css('height',rhight+'px');
	}
	geiDBHeight();
	
	$('.lm_clk').click(function(){	
		if($(this).parent().find('.DB_2D').attr('style')=='' ||$(this).parent().find('.DB_2D').attr('style')=='undefined' || $(this).parent().find('.DB_2D').attr('style')==null ||$(this).parent().find('.DB_2D').attr('style')=='display: none;'){
			$(this).parent().find('.DB_2D').show(500);
			$(this).addClass('BD_get');
			$(this).parent().siblings().find('.lm_clk').removeClass('BD_get');
			$(this).parent().siblings().find('.DB_2D').hide(500);
			$(this).parent().find('.DB_plus').attr('src','<?php echo asset_url('images/tree_off.png')?>');
			$(this).parent().siblings().find('.DB_plus').attr('src','<?php echo asset_url('images/tree_on.png')?>');
			$(this).parent().find('.DB_plus').addClass('DB_zk');
			$(this).parent().siblings().find('.DB_plus').removeClass('DB_zk');
		}else{
			$(this).parent().find('.DB_2D').hide(500);
			$(this).removeClass('BD_get');
			$(this).parent().find('.DB_plus').attr('src','<?php echo asset_url('images/tree_on.png')?>');
			$(this).parent().find('.DB_plus').removeClass('DB_zk');
		}		
	})

	$('.DB_2D').find('li').click(function(){

		$(this).addClass('BD2_get');
		$(this).siblings().removeClass('BD2_get');
	})
});  
	
</script>




<script type="text/javascript">



$(function(){


	var sort_tool = {
		fid : 2,
		sortid : 0,
		store:{},
		data:{},
		first_sortid:0,
		template : 7,
		init:function(data){
			this.store = data.option;
			this.data = data.data;
			console.log(data.option);
			if(data.option == false){
				sort_tool.privent_select();
				return false;
			}
			this.first_sortid = 0;
			sort_tool.make_sort()

			if(data.data.length == 0){
				var template = 7;
			}else{
				var template = data.data[this.first_sortid].template;
			}
			$('.biu_rdo_img[template="'+template+'"]').click();
		},
		get_data : function(){
			$.get("<?php echo site_url('mocuz/client/threadsort_types/')?>/"+this.fid, function(data){
			  	sort_tool.init(data)
			  return false;
			},'json');
		},
		make_sort: function(){
			var html = '';
			for(sortid in this.store){
				if(this.first_sortid == 0){
					this.first_sortid = sortid;
				}
		  		html += '<li class="sortname get_fl" sortid="'+sortid+'">'+this.store[sortid].name+'</li>\n';
		  	}
		  	$('.fl_list').replaceWith('<ul class="fl_list">'+html+'</ul>')

		},
		make_select : function(sortid, select_filed){
			var html = '';
			var fields = this.store[sortid].fileds
			console.log(sortid,fields)
			for(i in fields){
				html += '<option value="'+i+'">'+fields[i]+'</option>'
			}
			//html = '<select>'+html+'</select>'
			$('.'+select_filed).each(function(){
				$(this).find('option:gt(0)').remove();
				$(this).append(html)
			})
		},
		make_image :function(sortid, select_filed){
			var html = '';
			var fields = this.store[sortid].image
			for(i in fields){
				html += '<option value="'+i+'">'+fields[i]+'</option>'
			}
			$('.'+select_filed).each(function(){
				$(this).find('option:gt(0)').remove();
				$(this).append(html)
			})
		},
		bind:function(){

			//板块切换绑定
			$('.forum').click(function(){
				sort_tool.fid = $(this).attr('fid');
				sort_tool.get_data();
				
			})
			//模式切换绑定
		    $('.biu_rdo_img').click(function(){  	
		        var isc=$(this).attr('isc');
		        var value = $(this).attr('template');
				$('input[name="chk"]').val(value);
		        if(isc==0){
		            $(this).attr('src','<?php echo asset_url("images/choice.png");?>');
		            $(this).attr('isc','1');
		            var num=$(this).attr('num');
		            if(num==1){
		            	$('img[num=2]').attr('src','<?php echo asset_url('images/unchoice.png');?>');
		            	$('img[num=2]').attr('isc','0');
		            	$('img[num=3]').attr('src','<?php echo asset_url('images/unchoice.png');?>');
		            	$('img[num=3]').attr('isc','0');
		            }else if(num==2){
		            	$('img[num=1]').attr('src','<?php echo asset_url('images/unchoice.png');?>');
		            	$('img[num=1]').attr('isc','0');
		            	$('img[num=3]').attr('src','<?php echo asset_url('images/unchoice.png');?>');
		            	$('img[num=3]').attr('isc','0');
		            }else{
		            	$('img[num=1]').attr('src','<?php echo asset_url('images/unchoice.png');?>');
		            	$('img[num=1]').attr('isc','0');
		            	$('img[num=2]').attr('src','<?php echo asset_url('images/unchoice.png');?>');
		            	$('img[num=2]').attr('isc','0');
		            }
		           
		        }
				console.log(value)
				console.log(sort_tool.store)
				if(value != 7 && sort_tool.store == false){
					sort_tool.privent_select();
					return true;
				}
				

				$('.imgs_box').hide();
				$('#template_'+value).show();
				sort_tool.template = value;
				$('.ify_head').show();
				$('#save').show();
				if(value == 7){

					return true;
				}
				$("li[sortid='"+sort_tool.first_sortid+"']").click();		        
		    })


			//分类切换绑定
			$('.imgs_box').on('click','.sortname',function(){
				sort_tool.sortid = $(this).attr('sortid');
				$(this).addClass('get_fl_on');
				$(this).siblings().removeClass('get_fl_on');
				sort_tool.make_select(sort_tool.sortid, 'field')
				sort_tool.make_image(sort_tool.sortid, 'pic_style')
				sort_tool.select_value();


				return false;
			})
			//保存绑定
			$('#save').click(function(){
				console.log('dosave')
				sort_tool.save();
			})
		},
		select_value : function(){

			
				if(typeof(this.data[this.sortid]) == 'undefined'){
					console.log('sortid data misss')
					return false;
				}

				if(typeof(this.data[this.sortid]['fields']) != 'undefined'){
					for(fieldname in this.data[this.sortid]['fields']){
						$('#template_'+this.template).find('select[name="'+fieldname+'"]').find('option[value="'+this.data[this.sortid]['fields'][fieldname]+'"]').attr('selected', true);
					}
				}

				if(typeof(this.data[this.sortid]['pic_type']) != 'undefined'){
					$('#template_'+this.template).find('.pic_style').find('option[value="'+this.data[this.sortid]['pic_type']+'"]').attr('selected', true);
				}

				return true;

			
		},
		save:function(){

			var template = $('input[name="chk"]').val();
			var fields = {};

			if(template == 8){
				var field = $('#template_8').find('.field').val();
				var field_name = $('#template_8').find('.field').attr('name');
				if(field != 0){
					fields[field_name] = field;
				}
				
				var pic_type = $('#template_8').find('.pic_style').val();
				
				
			}

			if(template == 9){
				

				$('#template_9').find('.field').each(function(){
					var field = $(this).val();
					var field_name = $(this).attr('name');
				
					fields[field_name] = field;
					
				})
				var pic_type = $('#template_9').find('.pic_style').val();
			}

			var data = {'fid':this.fid,'sortid':this.sortid,'pic_type':pic_type,'template':template,'fields':fields}
			$.post('<?php echo site_url('mocuz/client/threadsrot_save')?>', data,function(data){
					alert('保存成功')
					console.log('save success');
			})
		},
		privent_select : function(){
			alert('本版块没有分类信息');
			$('.ify_head').hide();
			$('.imgs_box').hide();
			$('#save').hide();
			//$('.biu_rdo_img[template="7"]').click();
		}
	}
	sort_tool.bind();
})

</script>