<!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 type="text/css" rel="Stylesheet" href="/admin/drag/css/drag.base.css">
  <link type="text/css" rel="Stylesheet" href="/admin/drag/css/kesion.form.css">
  <link type="text/css" rel="Stylesheet" href="/admin/drag/css/label.css">
  <link type="text/css" rel="Stylesheet" href="/admin/drag/fonts/iconfont.css">
 
  <style>
  .label-box .label-icon{background-position:-406px -232px;margin-top:11px;}
  </style>

</head>
<body>


    <div class="ks-tab">
    	<ul>
        	<li class="active"><span>新增标签</span></li>
        	<li onClick="selectLabel()"><span>选择现有标签</span></li>
        </ul>
    </div>

    <div id="Content">
    	<div class="tab-box">
        
        	  <div class="tab-inner" style="overflow:hidden; padding-right:20px;">	 
                 <table width="100%" cellpadding="0" cellspacing="0" class="ks-table">
                    <tr>
                        <td class="ks-td-tit">标签名称</td>
                        <td>
                            <input name="labelname" id="labelname" type="text" class="ks-text">
                        </td>
                    </tr>
                    <tr id="tr-format">
                        <td class="ks-td-tit">选择样式</td>
                        <td>
                        	<div style="width: 580px">
	                            <div class="format-carousel" id="carousel">
	                                <ul>
	                                    <li class="active" data-id="1">
	                                        <div class="li-content">
	                                            <div class="check"><i class="drag-font drag-i-yes"></i></div>
	                                            <img src="/admin/drag/images/footer/01.jpg" />
	                                        </div>
	                                    </li>
	                                    <li data-id="2">
	                                        <div class="li-content">
	                                            <div class="check"><i class="drag-font drag-i-yes"></i></div>
	                                            <img src="/admin/drag/images/footer/02.jpg" />
	                                        </div>
	                                    </li>
	                                    <li data-id="3">
	                                        <div class="li-content">
	                                            <div class="check"><i class="drag-font drag-i-yes"></i></div>
	                                            <img src="/admin/drag/images/footer/03.jpg" />
	                                        </div>
	                                    </li>
	                                </ul>
	                            </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="ks-td-tit">颜色配置</td>
                        <td>
                            <div class="set-color">
                                <ul>
                                    <li data-color="white" class="white active"><i class="drag-font drag-i-yes"></i></li>
                                    <li data-color="grey" class="grey"><i class="drag-font drag-i-yes"></i></li>
                                    <li data-color="black" class="black"><i class="drag-font drag-i-yes"></i></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                   
                </table>
             <div class="clear blank20"></div>
    		</div>
            <div class="ks-btn-center" style="border-top:1px solid #ebebeb; padding:20px 0;">
                <button class="ks-btn ks-btn-normal" onClick="Operate.Determine()" id="btn-set">确定</button>
                <button class="ks-btn ks-btn-normal d-none" onClick="Operate.Save()" id="btn-save">保存</button>
                &nbsp;
                <button class="ks-btn" id="cancel">取消</button>
        	</div>
        </div>
        <div class="tab-box d-none">
        	<div class="label-box">
                <div class="label-sc-box"><input name="" type="text" class="ks-text" id="labelSearch" placeholder="快速搜索标签" ></div>
                <ul>
                    <li class="li-head"><span>更新时间</span>标签名称</li>
                </ul>
            </div>
            
            <div class="ks-btn-center" style="border-top:1px solid #ebebeb; padding:20px 0;">
              <button class="ks-btn ks-btn-normal" onClick="Determine()" id="btn-save">确定</button>
              &nbsp;
              <button class="ks-btn" onClick="parent.closeWindow(window.name)">取消</button>
            
            </div>
           
        </div>
	</div>
	
    <div id="labelContent" class="d-none"></div>
   

    <script src="/admin/drag/js/utils.js"></script>
    <script>utils.loadJs(['jquery','assembly','nicescroll'])</script>
   
	<script>
		
		var result = ''; //存储最终结果		
		var $carousel = $('#carousel');
		var $labelContent = $('#labelContent');

   		$(function(){			
			tabHeight();
			$carousel.carousel({
				object:'li',
				scrollType:'slide',
				width:'100%',
				height:'32%',
				arrow:true,
				autoPlay:false,
				dots:1,
				speed:400,
				interval:3000
		   });
		   
			$carousel.find('.carousel-prev').append('<i class="drag-font drag-i-left"></i>');
			$carousel.find('.carousel-next').append('<i class="drag-font drag-i-right"></i>');
		   
			var locaSplit = window.location.href.split('&');
			var type = locaSplit[0].split('?type=')[1]; //获取类型 编辑|添加
			
			if(type=='edit'){
				$('#btn-set').hide();
				$('#btn-save').show();
				$('#labelname').attr('disabled',true);				
				$('#tr-format').remove();
				$labelContent.html(parent.htmlContent);
				
			}else{
				setResult(1,'white');//添加状态  初始化结果
			};
			
			if(locaSplit[1]){
				var value = locaSplit[1].replace('value=','').split(',');			
				var headId = value[0];
				var headColor = value[1];
				
				if(headColor){
					$('.set-color li').each(function() {
						var v = $(this).attr('data-color');
						if(v==headColor){
							$(this).addClass('active').siblings().removeClass('active');
						};
					});
				};
				
				if(headId){
					$carousel.find('li[data-id="'+headId+'"]').addClass('active').siblings().removeClass('active');
					var eqId = headId - 1;
					$('.carousel-dots').find('i').eq(eqId).click();
				};
			
			};

			if(locaSplit[2]){
				var labelName = locaSplit[2].replace('labelName=','');
				labelName = decodeURI(labelName);
				$('#labelname').val(labelName);
			};
			var oldIndex = $carousel.find('.active').attr('data-id');			
			$carousel.on('click','li',function(){
				$(this).addClass('active').siblings().removeClass('active');
				if($(this).attr('data-id')!=oldIndex){
					oldIndex = $(this).attr('data-id');
					var headColor = $('.set-color').find('.active').attr('data-color');
					setResult(oldIndex,headColor);//传入当前选中id以及颜色，重新得到结果
					
					//返回样式
					if(type=='edit'){
						parent.Footer.Edit(result);//返回结果
						
					};
					
				};
			});
			
			var activeColor = $('.set-color').find('.active').attr('data-color');
			$('.set-color').on('click','li',function(){
				$(this).addClass('active').siblings().removeClass('active');
				if($(this).attr('data-color')!=activeColor){
					activeColor = $(this).attr('data-color');
					var id = $carousel.find('.active').attr('data-id');
					setResult(id,activeColor);//传入当前选中id以及颜色，重新得到结果
					
					if(type=='edit'){
						parent.staticLabel.Edit(activeColor,'footer');
					};
					

				};								
				
			});						
			
			
			//取消
			$('#cancel').click(function(){
				if(type=='edit'){
					parent.Footer.Cancel('edit');
				};
				parent.closeWindow(window.name); //关闭窗口 打开操作开关
			});


		});
		
		
		function tabHeight(){
			var type = window.location.href.split('&')[0].split('?type=')[1];//获取类型 编辑|添加
			if(type=='edit'){
				$('.label-box,.ks-tab').remove();
				$('.tab-inner').height($(window).height()-$('.ks-btn-center').outerHeight())
			}else{
				$('.tab-inner,.label-box').height($(window).height()-$('.ks-tab').outerHeight()-$('.ks-btn-center').outerHeight())
			};
			$(".tab-inner").niceScroll({  
				cursorcolor:"rgba(0,0,0,0.3)",  
				cursoropacitymax:1,  
				touchbehavior:false,  
				cursorwidth:"7px",  
				cursorborder:"0", 
				cursorborderradius:"10px"  
			}); 
		};
		
		
		function setResult(id,color){
			
			if(id==1){
				result = '<div class="m-footer1 m-bg-'+color+'" footer-id="1">\n'+
						 '	<div class="m-f-width">\n'+
						 '	 	<div class="m-f-logo" drag-setup="logo"><img src="/ks_inc/drag/images/foot-logo.png"></div>\n'+
						 '		<div class="m-f-nav" drag-setup="nav">\n'+
						 '			<ul>\n'+
						 '				<li>\n'+
						 '					<div class="nav-item">新手指南</div>\n'+
						 '					<div class="nav-sub-box">\n'+
						 '						<span><a href="#">支付方式</a></span>\n'+
						 '						<span><a href="#">如何购买课程</a></span>\n'+
						 '						<span><a href="#">注册成为会员</a></span>\n'+
						 '					</div>\n'+
						 '				</li>\n'+
						 '				<li>\n'+
						 '					<div class="nav-item">关于我们</div>\n'+
						 '					<div class="nav-sub-box">\n'+
						 '						<span><a href="#">支付方式</a></span>\n'+
						 '						<span><a href="#">如何购买课程</a></span>\n'+
						 '						<span><a href="#">注册成为会员</a></span>\n'+
						 '					</div>\n'+
						 '				</li>\n'+
						 '				<li>\n'+
						 '					<div class="nav-item">老师加盟</div>\n'+
						 '					<div class="nav-sub-box">\n'+
						 '						<span><a href="#">支付方式</a></span>\n'+
						 '						<span><a href="#">如何购买课程</a></span>\n'+
						 '						<span><a href="#">注册成为会员</a></span>\n'+
						 '					</div>\n'+
						 '				</li>\n'+
						 '			</ul>\n'+
						 '		</div>\n'+
						 '		<div class="m-f-tel" drag-setup="text" drag-mark="true"><p class="tit">客服热线</p><p style="color:#999;"><span style="font-size:22px;padding-right:10px;">4008-220-220</span><em>(9:00 - 24:00)</em></p></div>\n'+
						 '		<div class="clear"></div>\n'+
						 '		<div class="copyright" drag-setup="text">厦门科汛软件有限公司版权所有 © 2006-2017</div>\n'+
						 '	</div>\n'+
						 '</div>';
				
			}else if(id==2){
				result = '<div class="m-footer3 m-bg-'+color+'" footer-id="2">\n'+
            			 '	<div class="m-f-width">\n'+
            			 '		<div class="m-f-name" drag-setup="text">科汛在线网校系统</div>\n'+
            			 '		<div class="m-f-info" drag-setup="text"><span style="margin-right:40px;">地点：厦门市思明区观音山国际商务营运中心16号楼806</span><span style="margin-right:40px;">电话：400-008-0263</span><span style="margin-right:40px;">传真：000-66668888</span><span style="margin-right:40px;">邮箱：kesioncms@hotmail.com</span></div>\n'+
            			 '		<div class="m-f-icon" drag-setup="api">\n'+
            			 '			<span><a href="http://www.weibo.com/kesioni30" target="_blank"><i class="modulefont m-icon-wb"></i></a></span>\n'+
            			 '			<span><a href="tencent://message/?uin=40080000&Menu=yes" target="_blank"><i class="modulefont m-icon-qq"></i></a></span>\n'+
            			 '			<span><a href="#"><i class="modulefont m-icon-weixin"></i></a><img src="http://www.kesion.com/kesion-ui/code.png" class="s-code" /></span>\n'+
            			 '		</div>\n'+
            			 '		<div class="clear"></div>\n'+
            			 '		<div class="copyright" drag-setup="text">厦门科汛软件有限公司版权所有 © 2006-2017</div>\n'+
            			 '	</div>\n'+
            			 '</div>';
			}else if(id==3){
				
				result = '<div class="m-footer2 m-bg-'+color+'" footer-id="3">\n'+
						 '	<div class="copyright" drag-setup="text"><p><a href="#">公司介绍</a><em>|</em><a href="#">联系我们</a><em>|</em><a href="#">法律条款</a><em>|</em><a href="#">招募英才</a><em>|</em><a href="#">免责声明</a></p><p>厦门科汛软件有限公司版权所有 © 2006-2017</p>\n'+
						 '	</div>\n'+
    					 '</div>';				
			};
			
		};
		
		
		var skinId = parent.skinId;
		var Operate = {
			//确定
		    Determine: function () {

				var labelName = $.trim($("#labelname").val());
				labelName = escape(labelName);

				$.post("/plus/AjaxLabel.aspx", { labelname: labelName, labelcontent: result, action: "savelabel", skinid: skinId },
				function (data) {

					if (data =='success') {
						parent.popup.tips({
							  title:'保存成功',
						});
						labelName = unescape(labelName);
						parent.staticLabel.Add(result,labelName,window.name,'footer');//返回结果
					   
					} else {
						parent.popup.tips({
							  title:data,
						});
					};

				}, "text");

					
			},
			//保存
			Save:function(){
				var labelname = $("#labelname").val();
				labelname = escape(labelname);
				var content = $labelContent.html();
		        $.post("/plus/AjaxLabel.aspx?flag=modify", { labelname: labelname, labelcontent: content, action: "savelabel", skinid: skinId },
		        function (data) {

		            if (data == 'success') {
						parent.popup.tips({
							  title:'保存成功',
						});
					   parent.loadInt();
					   parent.closeWindow(window.name); //关闭当前窗口 打开操作开关
						
		            }else {
						parent.popup.tips({
							  title:data,
						});
		            };

		        }, "text");

			},
			
		};
					
		$('.ks-tab').on('click','li',function(){
			$(this).addClass('active').siblings().removeClass('active');
			$('.tab-box').eq($(this).index()).fadeIn(300).siblings('.tab-box').hide();	
		});


		//选择现有标签
		
		$('.label-box').on('click','li:not(".li-head")',function(){
			$(this).addClass('active').siblings().removeClass('active');			
		});
		
		$('#labelSearch').keyup(function(){
			var key = $(this).val();
			$.ajax({
					url:"/plus/ajaxlabel.aspx?action=labellist&labelflag=100&skinid="+skinId+"&key="+key+"",
					success:function(data){
						$('.label-box').find('li:not(".li-head"),.empty').remove();
						if(data==''){
							$('.label-box').find('ul').append('<p class="empty">没有找到标签数据</p>');
						}else{
							$('.label-box').find('ul').append(data);
						};
					}
			});
		});
		
		//现有标签请求
		var labelFlag = true;
		function selectLabel(){
			$.ajax({
					url:"/plus/ajaxlabel.aspx?action=labellist&labelflag=100&skinid="+skinId+"",
					success:function(data){
						if(labelFlag==true){
							$('.label-box').find('ul').append(data);
							if(data==''){
								$('.label-box').find('ul').append('<p class="empty">没有找到标签数据</p>');
							};
							labelFlag = false;
							
						};
					}
			});
					
		};

		//选择已有标签 - 确定		
		function Determine(){
			var labelName = $('.label-box').find('.active').attr('data-value');
			if(!labelName){
				parent.popup.tips({
					title:'请先选择标签'
				});
			}else{
				parent.staticLabel.Insert(labelName,window.name,'footer');
			};
		};
		

    </script>


</body>
</html>