<%@ page language="C#" autoeventwireup="true" inherits="Shop_Member_Shop_AddDeliver, WebApp_deploy" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>物流方式管理</title>
    <link href="CSS/component.css" rel="stylesheet" type="text/css" />
    <link href="CSS/postage.css" rel="stylesheet" type="text/css" />   
    <%=defaultstyle%>
    <style type="text/css" media="screen">
    .FreContent{
	background:#F2F6FC;
	border-left:1px #B7CCEB solid;
	border-right:1px #B7CCEB solid;
	padding:8px;
	height:auto!important;
	}
</style>
<script type="text/javascript" src="../Js/HoWave_Area.js"></script>
</head>

<body>
<div>
  <div id="Main">
   
<script language="JavaScript" type="text/javaScript">
<!--
	//运费项序号生成器(每次从1开始计算)
	var ordIndex = 1;
	var corpFastIndex = 1;
	var postFastIndex = 1;
	var emsIndex = 1;

	//运费项表单ID前缀
	var ordPrefix = 'ord';
	var corpFastPrefix = 'corpFast';
	var postFastPrefix = 'postFast';
	var emsPrefix = 'ems';

	//运费项表单Name前缀
	var ordNamePrefix = ordPrefix;
	var corpFastNamePrefix = 'corp_fast';
	var postFastNamePrefix = 'post_fast';
	var emsPrefix = emsPrefix;

	
	
	//输入: destCodes=Array{1,2,3}
	//输出: destNames='name1,name2,name3';
	function getDestNamesByCodes(destCodes) {
		var destNames = '';
		for(var j=0;j<destCodes.length;j++){
		    var destName = chinaDivision[destCodes[j]];
		    if(null != destName){
		       destNames += destName + ',';
		    }
			    
		}
		var index = destNames.lastIndexOf(',');
		if(index == destNames.length-1){
			destNames = destNames.substring(0, index);
		}

		return destNames;
	}
	
	//根据itemid获取相应的ItemDest域
	//输入: itemid='ordItem1'
	//输出: itemDest对象
	function getItemDestByItemid(itemid) {
		var item = _$(itemid);
		var prefix = item.getAttribute('prefix');
		var index = item.getAttribute('index');
		var itemDestid = prefix+'ItemDest'+index;
		var itemDest = _$(itemDestid);
		return itemDest;
	}

	//切换显示运费区域
	function displayArea(chkbox, area) {
		if(chkbox.checked) {
			area.style.display = "block";
		} else {
			area.style.display = "none";
		}
	}
	//动态新增运费项
	//输入: items=父结点, itemDest='1,2,3', itemFee='12.30', itemIncrement='', prefix='ord'
	//输出: 新增的li即item对象
	function createPostageItem(items, itemDest, itemFee, itemIncrement, prefix) {
		//处理参数
		var li = document.createElement('li');
		var itemIndexStr = prefix+'Index';
		var itemIndex = eval(itemIndexStr);
		li.id = prefix+'Item'+itemIndex;
		li.setAttribute('prefix',prefix);
		li.setAttribute('index',itemIndex);
		//var itemDestNames = getDestNamesByCodes(itemDest.split(','));
		var itemDestNames =itemDest;
		
		if(null == itemIncrement || 0 > parseInt(itemIncrement)) {
			itemIncrement = '0.0';
		}
		
		//处理name域参数名称前缀
		var namePrefix = prefix;
		if(namePrefix == corpFastPrefix){
			namePrefix = corpFastNamePrefix;
		}
		if(namePrefix == postFastPrefix){
			namePrefix = postFastNamePrefix;
		}

		li.innerHTML = "至"
                  + "<input type='text' id='"+prefix+"ItemDestName"+itemIndex+"' value='"+itemDestNames+"' title='"+itemDestNames+"' itemid='"+li.id+"' onfocus='popupLocation(event);return false;' onkeydown='registerESCKey(event);'/>"
				  + "<input type='hidden' id='"+prefix+"ItemDest"+itemIndex+"' name='"+namePrefix+"_item_dest"+itemIndex+"' value='"+itemDestNames+"' />"
                  + "的运费："
                  + "<input type='text' id='"+prefix+"ItemFee"+itemIndex+"' name='"+namePrefix+"_item_fee"+itemIndex+"' value='"+itemFee+"' size='6' maxlength='6' class='required validate-float-range-0.01-999.99' />"
                  + "元，&nbsp;&nbsp;&nbsp;&nbsp;每多一件宝贝加收："
                  + "<input type='text' id='"+prefix+"ItemIncrement"+itemIndex+"' name='"+namePrefix+"_item_increment"+itemIndex+"' value='"+itemIncrement+"' size='6' maxlength='6' class='validate-float-range-0.00-999.99 less-equals-"+prefix+"ItemFee"+itemIndex+"'   title='宝贝的加收运费必须为小于等于宝贝运费的数值'/>"
                  + "元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"javascript: removePostageItem(_$(\'"+li.id+"\'));\" title='删除后别忘记点击“保存并返回”'>删除</a>";

		items.appendChild(li);
		eval(itemIndexStr+'+=1');
		//alert(li.innerHTML);
		return li;
	}

	//动态移除运费项
	function removePostageItem(item) {
		if(confirm("删除后别忘记点击“保存并返回”")){
			item.parentNode.removeChild(item);
		}
	}
			
	//动态更新某个运费项item的ItemDestName和ItemDest域
	//输入: item=_$('ordItem2'), destCodes=Array(1,3,4)
	function updatePostageItem(item, destCodes) {	  
		var itemDestNames =destCodes;
		var prefix = item.getAttribute('prefix');
		var index = item.getAttribute('index');
		_$(prefix+'ItemDestName'+index).value = itemDestNames;
		_$(prefix+'ItemDestName'+index).title = itemDestNames;
		_$(prefix+'ItemDest'+index).value = destCodes.join(',');
	}
	
	//加载html时.prototype.js还未加载, 所以不能用它里面的方法_$(); 自己定义一个先
	var timeout = 100;
	function _$(id) {
		return document.getElementById(id);
	}
//-->
</script>
	
<form id="savePostageForm" METHOD="POST" ACTION="" onsubmit="return submitForm(this);" runat="server">
    <asp:HiddenField ID="deliverID" runat="server" />
    <asp:HiddenField ID="action" runat="server" />	
    <div class="pageTitle" style="border:solid 1px #4193EB; border-bottom:solid 0px #4193EB"><span>新增运费模版:</span></div>
    <div id="FreContent" style="background:#f4f9ff; border:solid 1px #4193EB; border-top:solid 0px #4193EB;background:#f4f9ff;">
       <h2 style="margin-left:25px">请输入运费模版名称:<span>(提示：您可以按照物品重量和体积来命名。比如“小于一公斤的物品”)</span></h2>
       <div class="AddBox1">
         <asp:TextBox ID="deliver_project_name" MaxLength="50" Columns="80" ToolTip="运费模版名称为必填项，并且不能超过25个字" runat="server" />	          
      </div>
      <hr />

      <h2 style="margin-left:25px">请选择并添加运费方式:<span>(提示：除指定地区外，其余地区的运费采用“默认运费”)</span></h2>
      <div class="AddBox">
        <ul>
          <li>
            <asp:Literal ID="hasOrdinary" runat="server" />
          
            <label for="hasOrdinary">平邮</label>
            <div id="ordArea" class="AddFreight">
              <div class="AddFre_Top"></div>
               <asp:literal ID="ordpost_update" runat="server" />
              <p><img src="../Images/Member/add.gif" />
			  <a itemsid="ordItems" href="#" onclick="return false;" onfocus="popupLocation(event);return false;" onkeydown="registerESCKey(event);">为指定地区设置运费</a></p>
              <div class="AddFre_Bottom"></div>
            </div>
			<script language="JavaScript" type="text/javaScript"> displayArea(_$('hasOrdinary'), _$('ordArea')); </script>
          </li>

          <li>
            <asp:Literal ID="hasCorpFast" runat="server" />
            <label for="hasCorpFast">快递公司</label>
            <div id="corpFastArea" class="AddFreight">
              <div class="AddFre_Top"></div>
              
                <asp:literal ID="corpfast_update" runat="server" />
                  
              <p><img src="../Images/Member/add.gif" />
			  <a itemsid="corpFastItems" href="#" onclick="return false;" onfocus="popupLocation(event);return false;" onkeydown="registerESCKey(event);">为指定地区设置运费</a></p>
              <div class="AddFre_Bottom"></div>
            </div>
			<script language="JavaScript" type="text/javaScript"> displayArea(_$('hasCorpFast'), _$('corpFastArea')); </script>
          </li>

          <li>
            <asp:Literal id="hasPostFast" runat="server" />
            <label for="hasPostFast">邮政快递</label>
            <div id="postFastArea" class="AddFreight">
              <div class="AddFre_Top"></div>
              
                 <asp:literal ID="postfast_update" runat="server" />
                 
              <p><img src="../Images/Member/add.gif" />
			  <a itemsid="postFastItems" href="#" onclick="return false;" onfocus="popupLocation(event);return false;" onkeydown="registerESCKey(event);">为指定地区设置运费</a></p>
              <div class="AddFre_Bottom"></div>
            </div>
			<script language="JavaScript" type="text/javaScript"> displayArea(_$('hasPostFast'), _$('postFastArea')); </script>
          </li>

          <li>
            <asp:Literal id="hasEms"  runat="server" />
            <label for="hasEms">EMS</label>
            <div id="emsArea" class="AddFreight">
              <div class="AddFre_Top"></div>
              
                  <asp:literal ID="ems_update" runat="server" />
              <p><img src="../Images/Member/add.gif" />
			  <a itemsid="emsItems" href="#" onclick="return false;" onfocus="popupLocation(event);return false;" onkeydown="registerESCKey(event);">为指定地区设置运费</a></p>
              <div class="AddFre_Bottom"></div>
            </div>
			<script language="JavaScript" type="text/javaScript"> displayArea(_$('hasEms'), _$('emsArea')); </script>
          </li>
        </ul>
      </div>
      <hr />
      <h2 style="margin-left:25px">请添加运费说明:<span>(提示：您可以设置发货时间、到货时间以及快递公司网址等内容，细致的说明有助于减少交易纠纷)</span></h2>
      <div class="AddBox">
	          <%--<textarea id="memo" name="deliver_msg" class="max-length-100" cols="80" rows="3" onfocus="clearMemo();" onblur="fillMemo();"></textarea>--%>
		      <asp:TextBox ID="deliver_msg" TextMode="MultiLine" Rows="3" Columns="80" runat="server"  onfocus="clearMemo();" onblur="fillMemo();"/>
		<script language="JavaScript" type="text/javaScript">
		  var DEFAULT_MEMO_TEXT = '请将说明文字限制在100字以内';
		  var DEFAULT_MEMO_CLASS = 'Gray';
		  var memo = _$('deliver_msg');
		  fillMemo();

		  function fillMemo() {
			if(0 == memo.value.length) {
				memo.value = DEFAULT_MEMO_TEXT;
				memo.className = DEFAULT_MEMO_CLASS;
			}
		  }

		  function clearMemo() {
			if(DEFAULT_MEMO_TEXT == memo.value) {
				memo.value = '';
				memo.className = 'max-length-100';
			}
		  }
		</script>
      </div>
      <hr />
      <div style="text-align:center">
        <input name="submit" type="submit" value=" 保存并返回 "   onclick="return checkSubmit();"/>
        <input name="back" type="button" value=" 取消 " onclick="returnToListPostages();" />
      </div>
     </div> 
	</form>
	<script language="JavaScript" type="text/javaScript">
	<!--
		
		function resetForm() {			
			return true;
		}

		//验证表单
		function submitForm(form) {
			if(!_$('hasOrdinary').checked && !_$('hasCorpFast').checked && !_$('hasPostFast').checked && !_$('hasEms').checked){
				alert('您至少要选择填写一种运费方式才能保存！');
				return false;
			}
			if(DEFAULT_MEMO_TEXT == memo.value) {
				memo.value = '';
			}
			return true;
		}
		
		//返回到ListPostages页面
		function returnToListPostages() {
			var url = "Shop_DeliverType.aspx";
			window.location = url;
		}
		function checkSubmit()
		{
              if(_$("deliver_project_name").value=="")
		     {
		        alert('请填写运费模版名称');
                _$("deliver_project_name").focus();
                return false;
		     } 
		     var itemTypeArray=["ord","corpfast","postfast","ems"];
		     var checkItemArray=["hasOrdinary","hasCorpFast","hasPostFast","hasEms"]
             for(var i=0;   i<document.forms[0].length;i++)   
             {   
                var obj=document.forms[0].elements[i];
                var objType=document.forms[0].elements[i].type;
                var objName=document.forms[0].elements[i].name;
                var objValue=document.forms[0].elements[i].value;
                var objID=document.forms[0].elements[i].id;
                objID=objID.toLowerCase();
                if(objType=="text" )
                { 
                    for(var j=0;j<itemTypeArray.length;j++)
                    {
                        if(objID.indexOf(itemTypeArray[j])!=-1)
                        {
                            if(_$(checkItemArray[j])!=null && _$(checkItemArray[j]).checked)
                            {
                                if(objValue==null || objValue=="")
                                {
                                   alert('运费不能为空');
                                   obj.focus();
                                   return false;                                  
                                }
                                else if(objID.toLowerCase().indexOf("itemdestname")==-1)
                                {
                                
                                    if(isNaN(objValue))
                                    {
                                       alert('运费必须为数字');
                                       obj.focus();
                                        return false;  
                                    }
                                }
                            }
                        }
                    }         
                   
                }
                   
             }
		}
		
		function checkIsNumber()
		{
		
		}
		
		function checkIsEmpty()
		{
		
		}
	//-->
	</script>
      
		<div id="location" isUpdate="false" itemid="" itemsid=""> <span><a onclick="hideLocation();"> <img src="../Images/Member/close.gif" /> </a></span>
		  <ul id="areas">
			<li><input id="areas_zjh" type="checkbox" value="310000,320000,330000" onclick="checkDivisions(this.value,this.checked);" /><label for="areas_zjh">江浙沪</label></li>
			<li><input id="areas_hd" type="checkbox" value="310000,320000,330000,340000,360000" onclick="checkDivisions(this.value,this.checked);" /><label for="areas_hd">华东</label></li>
			<li><input id="areas_hb" type="checkbox" value="110000,120000,140000,370000,130000,150000" onclick="checkDivisions(this.value,this.checked);" /><label for="areas_hb">华北</label></li>
			<li><input id="areas_hz" type="checkbox" value="430000,420000,410000" onclick="checkDivisions(this.value,this.checked);" /><label for="areas_hz">华中</label></li>
			<li><input id="areas_hn" type="checkbox" value="440000,450000,350000,460000" onclick="checkDivisions(this.value,this.checked);" /><label for="areas_hn">华南</label></li>
			<li><input id="areas_db" type="checkbox" value="210000,230000,220000" onclick="checkDivisions(this.value,this.checked);" /><label for="areas_db">东北</label></li>
			<li><input id="areas_xb" type="checkbox" value="610000,650000,620000,640000,630000" onclick="checkDivisions(this.value,this.checked);" /><label for="areas_xb">西北</label></li>
			<li><input id="areas_xn" type="checkbox" value="500000,530000,520000,540000,510000" onclick="checkDivisions(this.value,this.checked);" /><label for="areas_xn">西南</label></li>
			<li><input id="areas_gat" type="checkbox" value="810000,820000,710000" onclick="checkDivisions(this.value,this.checked);" /><label for="areas_gat">港澳台</label></li>
			<li><input id="areas_hw" type="checkbox" value="2" onclick="checkDivisions(this.value,this.checked);" /><label for="areas_hw">同城</label></li>
		  </ul>
		  <hr />
		  <ul id="divisions"></ul>
		  <hr />
		  <div>
			<button type="button" onclick="doSelectLocation();">确定</button>
			<button type="button" onclick="hideLocation();">取消</button>
		  </div>
		</div>
		<script type="text/javascript">
			
			//根据checked值选中/取消选中location中指定的省市项
			//输入: destCodes='1,3,4', checked=true/false
			function checkAreas(destCodes, checked) {
				var areas = _$('areas').getElementsByTagName('input');

//				$A(areas).each(function(area, index) {
//					var array = $A(area.value.split(','));
//					var isAllIn = array.all(function(code) {
//						//只要有一个不在area的value里面就说明不操作
//						if(-1 == destCodes.indexOf(code)) {
//							return false;
//						}
//						return true;
//					});
//					
//					if(isAllIn){
//						area.checked = checked;
//					}
//				});
			}
			
			//根据checked值选中/取消选中location中指定的省市项
			//输入: destCodes='1,3,4', checked=true/false
			function checkDivisions(destCodes, checked) {
				var divisions = _$('divisions').getElementsByTagName('input');
				var area_array=destCodes.split(',');
				for(var j=0;j<area_array.length;j++)
				{
				   var _id=	'divisions_'+area_array[j];	
				   _$('divisions_'+area_array[j]).checked=checked;	
				}

			}
			
			//使得所有的省市项不被选中
			function clearDivisions() {
				var divisions = _$('divisions').getElementsByTagName('input');
				
				for(var j=0;j<divisions.length;j++)
				{
				  divisions[j].checked=false;
				}

			}
			
			//使得所有的区域项不被选中
			function clearAreas() {
				var areas = _$('areas').getElementsByTagName('input');
				
				for(var j=0;j<areas.length;j++)
				{
				  areas[j].checked=false;
				}

			}
			
			//获取选中的省市项destCodes
			//输出: destCodes=Array(1,3,5)
			function getDestCodesByDivisions() {
				var destCodes = new Array();
				var divisions = _$('divisions').getElementsByTagName('input');
				for(var j=0;j<divisions.length;j++)
				{
				   if(divisions[j].checked){				 
				     destCodes.push(divisions[j].value);
				   }
				}
				
//				$A(divisions).each(function(division, index) {
//					if(division.checked) {
//						destCodes.push(division.value);
//					}
//				});

				return destCodes;
			}

			/**
			 * 获取页面元素的坐标
			 */
			function getPosXY(a, offset) {
				var p=offset?offset.slice(0):[0,0],tn;
				while(a) {
					tn=a.tagName.toUpperCase();
					if (tn == "DIV" && a.id == "Content") break;
					p[0]+=a.offsetLeft-(tn=="DIV"&&a.scrollLeft?a.scrollLeft:0);
					p[1]+=a.offsetTop-(tn=="DIV"&&a.scrollTop?a.scrollTop:0);
					if (tn=="BODY") break;
					a=a.offsetParent;
				}
				return p;
			}
			
			function popupLocation(evt) {
				var loc = document.getElementById('location');
				var target = evt.target || evt.srcElement;
				var pos = getPosXY(target, [0, target.offsetHeight]);
				loc.style.left = pos[0] + 'px';
				loc.style.top = pos[1] + 'px';
				loc.style.display = 'block';
				
				//显示前先时清空选择项
				clearAreas();
				clearDivisions();
				
				var isUpdate = "false";
				//根据target类型判断isUpdate(新增运费项还是更新某个运费项的目的地)
				if("INPUT" == target.tagName.toUpperCase()) {
					isUpdate = "true";
					
					//再利用target设置目标运费项itemid
					_$('location').setAttribute('itemid',target.getAttribute('itemid'));
					
					//选中相应的divisions项
					var itemid = _$('location').getAttribute('itemid');
					var itemDest = getItemDestByItemid(itemid);
					var itemAreaNameArray=(itemDest.value).split(',');
					var itemCodeArray="";
				
					for(var j=0;j< itemAreaNameArray.length;j++)
					{  					   
					   itemCodeArray+= GetCodeByName(itemAreaNameArray[j]);
					   if(j<itemAreaNameArray.length-1){
					      itemCodeArray+=",";
					      
					   }
					  
					}					
					checkDivisions(itemCodeArray, true);
					
					checkAreas(itemCodeArray, true);
				
				} else {
					isUpdate = "false";
					//再利用target设置目标运费itemsid
					_$('location').setAttribute('itemsid',target.getAttribute('itemsid'));
				}
				
				_$('location').setAttribute('isUpdate',isUpdate);
			}
			
			function GetCodeByName(AreaName){
			   for(var x in chinaDivision)
			   {
				   if(chinaDivision[x]==AreaName){
				      return x;
				   }
			   }
			   return "";
			
			}

			function hideLocation() {
				var loc = document.getElementById('location');
				loc.style.display = 'none';
				//关闭时清空选择项
				clearAreas();
				clearDivisions();
			}

			function registerESCKey(evt) {
				if (null != evt && 27 == evt.keyCode) {
					Try.these(hideLocation());
				}
				var target = evt.target || evt.srcElement;
				target.blur();
			}
			
			//选择目的地后
			function doSelectLocation() {
				//do select
				var destCodes = getDestCodesByDivisions();
				//如果没有选择省市项则提示并且返回
				if(null == destCodes || 0 == destCodes.length) {
					alert('请先选择地区项！');
					return;
				}
				
				var isUpdate = _$('location').getAttribute('isUpdate');
				if('true' == isUpdate) { //更新某个item
					var itemid = _$('location').getAttribute('itemid');
					var item = _$(itemid);
					updatePostageItem(item, destCodes);
				} else { //新增item
					var itemsid = _$('location').getAttribute('itemsid');
					var items = _$(itemsid);
					var prefix = items.getAttribute('prefix');
					createPostageItem(items, destCodes.join(','), '', '0.0', prefix);
				}

				//do close
				hideLocation();
			}
			
			function CreateAreaList(id){
                 var listObj=document.getElementById(id);
                 var area_str="";               
                 for(var x in chinaDivision){
                     var _areaName=chinaDivision[x];
                     area_str+="<li><input id=\"divisions_"+x+"\" type=\"checkbox\" value=\""+_areaName+"\" /><label for=\"divisions_"+x+"\">"+_areaName+"</label></li>\n\r";
              
                 }
                 area_str+="\n\r";
                 listObj.innerHTML=area_str;
             }   
		  CreateAreaList("divisions");
		 
	    

		</script>
    <div id="FreBottomBox"></div>
  </div>
</div>
</body>
</html>
