<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit"> 
  <title>选择版式</title>
  <link rel="Stylesheet" href="/admin/drag/css/drag.frame.css">
  <link rel="Stylesheet" href="/admin/drag/fonts/iconfont.css">
  
</head>
<body>
   
    <div class="drag-setupBox">
            
        <div class="box" id="tab-box">
            
            <div style="margin:20px 20px 0px 20px"><div class="drag-tips"><i class="drag-font drag-i-tuli"></i>您可在原先基础上进行版式拆分</div></div>
            <div class="formatBox">
            	
                <div class="box">
                
                	<div class="image"><img src="/admin/drag/images/format.jpg" id="formatImage" /></div>
                    
                    <div class="text">
                    	<div class="name">版式设置</div>                        
                        <div class="row">
                        	<div class="tit">设置满屏</div>
                            <input type="radio" name="full" id="full" style="display: none;">
                            <div class="clear"></div>
                        </div>
                      
                        <div class="row" id="widthRow">
                        	<div class="tit">宽度设置</div>
                            <div id="setWidth1" class="textbox"><input name="format-width" type="text" value="1180" maxlength="4" class="integer"></div>
                            <div class="clear"></div>

                        </div>
                        <div class="row">    
                            <div class="tit">间距</div>
                            <div id="padding" class="textbox"><input name="format-spacing" type="text" value="10" maxlength="4" class="integer"></div>
                            <div class="clear"></div>
                        </div>
                    
                        
                    </div>
                    
                </div>
               
            </div><!--formatBox-->
            
        </div>

        <div class="drag-buttonBox"><span class="d-inline-block"><div class="drag-btn-main" onClick="format.determine()" id="determine">确定</div><div class="drag-btn-gray" onClick="parent.closeWindow(window.name)">取消</div></span></div>

	</div>
    <script src="/admin/drag/js/utils.js"></script>
   	<script>utils.loadJs(['jquery','judge','nicescroll'])</script>
	<script>
		var format = new utils.page({
			data:{
				formatId:parseInt(location.href.split('?formatID=')[1])
			},
			ready:function(){
				this.tabheight();
				//正整数判断
				$('.integer').each(function() {
					$(this).integer();
		        });
				$('#full').checkbox();
				
				switch (this.data.formatId) {
					case 2:
						$('#formatImage').attr('src','/admin/drag/images/format2.jpg');
						break;
					case 3:
						$('#formatImage').attr('src','/admin/drag/images/format3.jpg');
						break;
					case 4:
						$('#formatImage').attr('src','/admin/drag/images/format4.jpg');
						break;
					default:
						$('#formatImage').attr('src','/admin/drag/images/format1.jpg');
						break;
				};

				$('.drag-checkbox-style').click(function(){
					if($(this).attr('check-flag')==0){
						$('#widthRow').show();
					}else{
						$('#widthRow').hide();
					}
				})
				

			},
			tabheight:function(){
				var tabHeight = $(window).height()-$('.drag-buttonBox').outerHeight();
				$('#tab-box').height(tabHeight);
				
				$("#tab-box").niceScroll({  
					cursorcolor:"rgba(0,0,0,0.3)",  
					cursoropacitymax:1,  
					touchbehavior:false,  
					cursorwidth:"7px",  
					cursorborder:"0", 
					cursorborderradius:"10px"  
				}); 
			},
			determine:function(){
				var formatSpacing = $.trim($('input[name="format-spacing"]').val());
				var formatWidth = $.trim($('input[name=format-width]').val());

				var mainStyle = 'width:'+formatWidth+'px;margin:0 auto;';
				
				var spacingStyle = '';
				if(formatSpacing!=0){
					mainStyle += 'position:relative;left:-'+formatSpacing+'px;padding-bottom:'+formatSpacing+'px';
					spacingStyle = ' style="margin:'+formatSpacing+'px 0 0 '+formatSpacing+'px;"';
					
				};
				if($('#full')[0].checked==true){
					mainStyle = 'margin-left:-'+formatSpacing+'px;padding-bottom:'+formatSpacing+'px';
				};

				
				var result = '';

				switch (this.data.formatId) {
					case 2:
						result = '<div drag-format-spacing="'+formatSpacing+'" drag-setDrag="inner,main">\n' +
								 '	<div drag-format="main" class="clearfix" style="'+mainStyle+'">\n' +
								 '		<div class="clear"></div>\n' +
								 '		<div drag-format="sub" class="col-9 clearfix">\n'+
								 '			<div'+spacingStyle+' drag-addModule="true"></div>\n'+
								 '		</div>\n' +
								 '		<div drag-format="sub" class="col-3 clearfix">\n'+
								 '			<div'+spacingStyle+' drag-addModule="true"></div>\n'+
								 '		</div>\n' +
								 '	</div>\n' +
							 	 '</div>\n';
						
						break;
					case 3:
						result = '<div drag-format-spacing="'+formatSpacing+'" drag-setDrag="inner,main">\n' +
								 '	<div drag-format="main" class="clearfix" style="'+mainStyle+'">\n' +
								 '		<div class="clear"></div>\n' +
								 '		<div drag-format="sub" class="col-4 clearfix">\n'+
								 '			<div'+spacingStyle+' drag-addModule="true"></div>\n'+
								 '		</div>\n' +
								 '		<div drag-format="sub" class="col-4 clearfix">\n'+
								 '			<div'+spacingStyle+' drag-addModule="true"></div>\n'+
								 '		</div>\n' +
								 '		<div drag-format="sub" class="col-4 clearfix">\n'+
								 '			<div'+spacingStyle+' drag-addModule="true"></div>\n'+
								 '		</div>\n' +
								 '	</div>\n' +
							 	 '</div>\n';
						
						break;
					case 4:
						result = '<div drag-format-spacing="'+formatSpacing+'" drag-setDrag="inner,main">\n' +
								 '	<div drag-format="main" class="clearfix" style="'+mainStyle+'">\n' +
								 '		<div class="clear"></div>\n' +
								 '		<div drag-format="sub" class="col-9 clearfix">\n'+
								 '			<div drag-format="sub" class="col-12 clearfix">\n'+
								 '				<div'+spacingStyle+' drag-addModule="true"></div>\n'+
								 '			</div>\n'+
								 '			<div drag-format="sub" class="col-12 clearfix">\n'+
								 '				<div drag-format="sub" class="col-6 clearfix">\n'+
								 '					<div'+spacingStyle+' drag-addModule="true"></div>\n'+
								 '				</div>\n'+
								 '				<div drag-format="sub" class="col-6 clearfix">\n'+
								 '					<div'+spacingStyle+' drag-addModule="true"></div>\n'+
								 '				</div>\n'+
								 '			</div>\n'+
								 '		</div>\n' +
								 '		<div drag-format="sub" class="col-3 clearfix">\n'+
								 '			<div'+spacingStyle+' drag-addModule="true"></div>\n'+
								 '		</div>\n' +
								 '	</div>\n' +
							 	 '</div>\n';
						
						break;
					default:
						result = '<div drag-format-spacing="'+formatSpacing+'" drag-setDrag="inner,main">\n' +
								 '	<div drag-format="main" class="clearfix" style="'+mainStyle+'">\n'+
								 '		<div class="clear"></div>\n'+
								 '		<div class="col-12 clearfix" drag-format="sub">\n'+
								 '			<div'+spacingStyle+' drag-addModule="true"></div>\n' +
								 '		</div>\n'+
								 '	</div>\n' +
								 '</div>';
						break;
				}

				parent.ModuleBack(result,'format');	
				parent.closeWindow(window.name);//关闭窗口
			}

		});

		

    </script>


</body>
</html>