<!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">  

</head>
<body style="overflow:hidden;">

   	
    <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 style="padding-bottom:10px;">
                    	<div style="width: 580px">
                      <div class="format-carousel" id="carousel">
                          <ul>
                              <li class="active" data-id="0">
                                  <div class="li-content">
                                      <div class="check"><i class="drag-font drag-i-yes"></i></div>
                                      <img src="/admin/drag/images/header/01.jpg" />
                                  </div>
                              </li>
                              <li data-id="1">
                                  <div class="li-content">
                                      <div class="check"><i class="drag-font drag-i-yes"></i></div>
                                      <img src="/admin/drag/images/header/02.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/header/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="black" class="black"><i class="drag-font drag-i-yes"></i></li>
                                <li data-color="mingBlue" class="mingBlue"><i class="drag-font drag-i-yes"></i></li>
                                <li data-color="ultramarine" class="ultramarine"><i class="drag-font drag-i-yes"></i></li>
                                <li data-color="blue" class="blue"><i class="drag-font drag-i-yes"></i></li>
                                <li data-color="red" class="red"><i class="drag-font drag-i-yes"></i></li>
                                <li data-color="green" class="green"><i class="drag-font drag-i-yes"></i></li>
                                <li data-color="orange" class="orange"><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>

       
   
   <script src="/admin/drag/js/utils.js"></script>
   <script>utils.loadJs(['jquery','assembly','nicescroll'])</script>
   
	<script>
		var data = utils.getUrlParameter();
		var result = '';
		var $carousel = $('#carousel');
		var headId = 0;
   		$(function(){			
			tabHeight();
			$carousel.carousel({
				object:'li',
				scrollType:'slide',
				width:'100%',
				height:'22%',
				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 type = data.type; //获取类型 编辑|添加
			if(type=='edit'){
								
				$('#btn-set').hide();
				$('#btn-save').show();
				$('#labelname').attr('disabled',true);
						
				$('#tr-format').remove();

				if(data.moduleColor){
					$('.set-color li').each(function() {
						var thisColor = $(this).attr('data-color');
						if(thisColor==data.moduleColor){
							$(this).addClass('active').siblings().removeClass('active');
						};
					});
				};
				
				if(data.id){
					$carousel.find('li[data-id="'+data.id+'"]').addClass('active').siblings().removeClass('active');
					var eqId = data.id - 1;
					$('.carousel-dots').find('i').eq(eqId).click();
				};
			
			

				if(data.labelName){
					$('#labelname').val(decodeURI(data.labelName));
				};

				
			}else{
				
				setResult(0,'white');
				
			};							
			
			
			var activeIndex = $carousel.find('.active').attr('data-id');
			$carousel.on('click','li',function(){
				$(this).addClass('active').siblings().removeClass('active');
				if($(this).attr('data-id')!=activeIndex){
					activeIndex = $(this).attr('data-id');
					var headColor = $('.set-color').find('.active').attr('data-color');
					setResult(activeIndex,headColor);					
					if(activeIndex==2){
						if($('.set-color .active').attr('data-color')=='white'){
							$('.set-color').find('.white').hide();
							$('.set-color').find('li:eq(1)').addClass('active').siblings().removeClass('active');
						}else{
							$('.set-color').find('.white').hide();
						};
					}else{
						$('.set-color').find('.white').show();
					};
					
				};
				
			});
			
			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);
					
					if(type=='edit'){
						
						parent.staticLabel.Edit(activeColor,'header');
						
					};
				};
			});			

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

		});
	
		function tabHeight(){
			$('.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==0){
				result='<div class="m-header m-bg-'+color+'" header-id="0">\n'+
					   '	<div class="logo" drag-setup="logo">\n'+
					   '		<img src="/ks_inc/drag/images/logo.png" alt="DECORATE" />\n'+
					   '	</div>\n'+
					   '	<div class="m-nav" drag-setup="nav">\n'+
					   '		<ul>\n'+
					   '			<li class="active"><div class="nav-item"><a href="/">首页</a></div></li>\n'+
					   '			<li><div class="nav-item"><a href="{=GetReWriteUrl(courselist)}"><i class="modulefont m-icon-down"></i>课程</a></div><div class="nav-sub-box"><span><a href="{=GetReWriteUrl(courselist)}">网授课程</a></span><span><a href="{=GetReWriteUrl(facelist)}">面授课程</a></span><span><a href="{=GetReWriteUrl(livelist)}">直播课程</a></span><span><a href="{=GetReWriteUrl(bindlist)}">专栏</a></span></div></li>\n'+
					   '			<li><div class="nav-item"><a href="{=GetReWriteUrl(roomlist)}">班级</a></div></li>\n'+
					   '			<li><div class="nav-item"><a href="{=GetReWriteUrl(teacherlist)}">教师</a></div></li>\n'+
					   '			<li><div class="nav-item"><a href="{=GetReWriteUrl(examindex)}">题库</a></div></li>\n'+
					   '			<li><div class="nav-item"><a href="{=GetClassUrl(1104)}">资讯</a></div></li>\n'+
					   '			<li><div class="nav-item"><a href="{=GetReWriteUrl(askindex)}">问答</a></div></li>\n'+
					   '		</ul>\n'+
					   '	</div>\n'+
					   '	<div class="h-user">\n'+
					   '		<a href="{=GetReWriteUrl(userlogin)}">登录</a><a href="{=GetReWriteUrl(reg)}">注册</a>\n'+
					   '	</div>\n'+
					   '	<div class="h-search">\n'+
					   '		<input name="" type="text"><input name="" value="&#xe603;" type="button" class="modulefont">\n'+
					   '	</div>\n'+
					   '</div>\n'+
					   '<div class="clear"></div>\n';
			}else if(id==1){
				result= '<div class="m-head1 m-bg-'+color+'" header-id="1">\n'+
						'	<div class="m-head-top">\n'+
						'		<div class="mainBox clearfix">\n'+
						'			<div class="m-nav m-head-nav" drag-setup="nav">\n'+
						'				<ul>\n'+
						'					<li><div class="nav-item"><a href="/">学习中心</a></div></li>\n'+
						'					<li><div class="nav-item"><a href="{=GetReWriteUrl(club)}">兴趣小组</a></div></li>\n'+
						'					<li><div class="nav-item"><a href="{=GetReWriteUrl(wjindex)}">问卷调查</a></div></li>\n'+
						'				</ul>\n'+
						'			</div>\n'+
						'			<div class="telbox" drag-setup="text">电话：400-008-0263</div>\n'+
						'		</div>\n'+
						'	</div>\n'+
						'	<div class="m-head-bottom">\n'+
						'		<div class="mainBox clearfix">\n'+
						'			<div class="logo" drag-setup="logo"><img alt="DECORATE" src="/ks_inc/drag/images/logo.png"></div>\n'+
						'			<div class="m-nav" drag-setup="nav">\n'+
					    '				<ul>\n'+
					    '					<li class="active"><div class="nav-item"><a href="/">首页</a></div></li>\n'+
					    '					<li><div class="nav-item"><a href="{=GetReWriteUrl(courselist)}"><i class="modulefont m-icon-down"></i>课程</a></div><div class="nav-sub-box"><span><a href="{=GetReWriteUrl(courselist)}">网授课程</a></span><span><a href="{=GetReWriteUrl(facelist)}">面授课程</a></span><span><a href="{=GetReWriteUrl(livelist)}">直播课程</a></span><span><a href="{=GetReWriteUrl(bindlist)}">专栏</a></span></div></li>\n'+
					    '					<li><div class="nav-item"><a href="{=GetReWriteUrl(roomlist)}">班级</a></div></li>\n'+
					    '					<li><div class="nav-item"><a href="{=GetReWriteUrl(teacherlist)}">教师</a></div></li>\n'+
					    '					<li><div class="nav-item"><a href="{=GetReWriteUrl(examindex)}">题库</a></div></li>\n'+
					    '					<li><div class="nav-item"><a href="{=GetClassUrl(1104)}">资讯</a></div></li>\n'+
					    '					<li><div class="nav-item"><a href="{=GetReWriteUrl(askindex)}">问答</a></div></li>\n'+
					    '				</ul>\n'+
					    '			</div>\n'+
						'			<div class="m-search">\n'+
						'				<i class="modulefont"></i>\n'+
						'				<div class="m-searchtext">\n'+
						'					<input type="text" class="m-searcht" placeholder="请输入搜索内容">\n'+
						'					<input type="button" class="m-searchb modulefont" value="">\n'+
						'					<em class="m-s-close">×</em>\n'+
						'				</div>\n'+
						'			</div>\n'+
						'			<div class="m-loginBox">\n'+
						'				<span class="m-coursecart"><a target="_blank" href="{=GetRewriteUrl(cshoppingcart)}" class="m-iconcart"></a></span>\n'+
						'				<div class="m-islogin0">\n'+
						'					<a href="{=GetRewriteUrl(userlogin)}" target="_blank">登录</a>|<a href="{=GetRewriteUrl(reg)}" target="_blank">注册</a>\n'+
						'				</div>\n'+
						'				<div class="m-islogin1">\n'+
						'					<div class="m-userintro clearfix">\n'+
						'						<div class="m-headimg"><img src="" class="m-avatar" /></div>\n'+
						'						<div class="m-username"></div>\n'+
						'					</div>\n'+
						'					<ul class="m-userinfo">\n'+
						'						<div class="arrow"><div class="arrow-inner"></div></div>\n'+
						'						<li><a href="{=GetRewriteUrl(user)}">我的主页</a></li>\n'+
						'						<li><a href="{=GetUserUrl(basic/editinfo)}">修改资料</a></li>\n'+
						'						<li><a href="{=GetUserUrl(message/Receivedmessage)}" class="m-ismessage">我的消息</a></li>\n'+
						'						<li><a href="{=GetRewriteUrl(loginout)}">退出</a></li>\n'+
						'					</ul>\n'+
						'				</div>\n'+
						'			</div>\n'+
						'		</div>\n'+
						'	</div>\n'+
						'</div>'
			}else if(id==2){
				result='<div class="m-header-concise m-bg-'+color+'" header-id="2">\n'+
                  	   '	<div class="m-icon"><i class="modulefont m-icon-list"></i></div>\n'+
                  	   '	<div class="m-tel"><i class="modulefont m-icon-dianhua"></i>400-008-0263</div>\n'+
                  	   '	<div class="logo" drag-setup="logo"><img src="/ks_inc/drag/images/logo.png" /></div>\n'+
                  	   '	<div class="m-menu-box">\n'+
                  	   '		<div drag-setup="nav">\n'+
                  	   '			<ul>\n'+
					   '				<li class="active"><div class="nav-item"><a href="/">首页</a></div></li>\n'+
					   '				<li><div class="nav-item"><a href="{=GetReWriteUrl(courselist)}"><i class="modulefont m-icon-down"></i>课程</a></div><div class="nav-sub-box"><span><a href="{=GetReWriteUrl(courselist)}">网授课程</a></span><span><a href="{=GetReWriteUrl(facelist)}">面授课程</a></span><span><a href="{=GetReWriteUrl(livelist)}">直播课程</a></span><span><a href="{=GetReWriteUrl(bindlist)}">专栏</a></span></div></li>\n'+
					   '				<li><div class="nav-item"><a href="{=GetReWriteUrl(roomlist)}">班级</a></div></li>\n'+
					   '				<li><div class="nav-item"><a href="{=GetReWriteUrl(teacherlist)}">教师</a></div></li>\n'+
					   '				<li><div class="nav-item"><a href="{=GetReWriteUrl(examindex)}">题库</a></div></li>\n'+
					   '				<li><div class="nav-item"><a href="{=GetClassUrl(1104)}">资讯</a></div></li>\n'+
					   '				<li><div class="nav-item"><a href="{=GetReWriteUrl(askindex)}">问答</a></div></li>\n'+
					   '			</ul>\n'+
					   '		</div>\n'+
					   '	</div>\n'+
					   '</div>\n'+
					   '<div class="clear"></div>\n';
			};
		
		};
		
		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,'header');//返回结果
						
					}else {
						parent.popup.tips({
							title:data,
						});
					};

				}, "text");
					
			},
			//保存
			Save:function(){
				
				parent.staticLabel.Save(data.labelName,window.name)
				
			}
			
		};
				
		$('.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,'header');
			};
		};

    </script>


</body>
</html>