<#import "../../ftllib/spring_new.ftl" as spring />
<#import "../../ftllib/pagecom.ftl" as page />
<#import "../../ftllib/frame.ftl" as frame />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href='<@spring.url ""/>'/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>按菜品历史销售自动预估补货</title>
<link type="text/css" href="css/blue.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="javascript/jquery_easy_ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="javascript/jquery_easy_ui/themes/icon.css">
<link type="text/css" href="css/table.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="javascript/calendar/humanity.datepick.css"/>

<script type='text/javascript' src='javascript/myfunction.js'></script>
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="javascript/jquery_easy_ui/jquery.easyui.min.js" charset="utf-8"></script>
<script type="text/javascript" src="javascript/jquery_easy_ui/easyui-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript" src="javascript/jquery.utils.js" charset="utf-8"></script>
<script type='text/javascript' src="javascript/calendar/jquery.datepick.pack.js"></script>
<script type='text/javascript' src="javascript/calendar/jquery.datepick-zh-CN.js" charset="utf-8"></script>
</head>
<script language="javascript"> 
var $_select = false;
var V_STEP = 1;
//转向第一步
function go_step_1(){	
	V_STEP = 1;
	$(".step_2").hide();
	$(".step_1").show();	
	$(document.body).layout("panel","center").panel("setTitle","第一步 菜品预测");
	load_menus();
}
//转向第二步
function go_step_2(){
	if($("#days").val() == ""){
		alert("请选择参考日期!");
		return;
	}
	V_STEP = 2;
	$(".step_1").hide();
	$(".step_2").show();	
	$(document.body).layout("panel","center").panel("setTitle","第二步 原材料预测");
	load_materiels();
}
//转向第三步
function go_step_3(){
	V_STEP = 3;
	$(".step_1").hide();
	$(".step_2").hide();	
	$(".step_3").show();	
	$(document.body).layout("panel","center").panel("setTitle","第三步 已成功创建单据");
}
function openOrder(url){
	W.OW(url,1024,800);
}
//生成单据.
function complete(){
	if(!confirm("执行该操作会根据材料采购方式自动创建采购计划和请求配送单，是否继续？")){
		return false;
	}
	var param = {"command":"complete"};	
	param["obj_date"] = $("#obj_date").val();
	$.post("<@spring.url "kc/guide/sale_operate.html"/>",param,function(data){
		$("#info_body_div").html(data);
		go_step_3();
	});
}

function query_click(){
	var param = {"command":"query_menus"};
	param["days"] = $("#days").val();
	if($("#days").val() == ""){
		alert("请选择参考日期!");
		return;
	}
	param["days_type"] = $("#span_days").find(":radio[name='days_type']:checked").val();
	param["constant"] = $("#constant").val();
	$.post("<@spring.url "kc/guide/sale_operate.html"/>",param,function(data){
		if(data == "true"){
			go_step_1();
		}
	});
}
//载入菜品
function load_menus(){
	var param = {command:"load_menus"};
	param["widths"] = $("#menu_table_header").widths();	
	param["constant"] = $("#constant").val();
	$("#menu_table_div").load("<@spring.url "kc/guide/sale_operate.html"/>",param,function(data){
		$("#menu_table").find("input").focus(function(){
			$(this).select();
			var $tr = $(this).closest("tr");
			if($_select){$_select.removeClass("selected");}
			$_select = $tr;
			$tr.addClass("selected");
		}).change(function(){			
			var $tr = $(this).closest("tr");			
			var param = {command:"set_menu_number"};
			param["menu_name"] = encodeURI($tr.attr("menu_name"));
			param["menu_unit"] = encodeURI($tr.attr("menu_unit"));		
			param["number"] = $(this).val();									
			$.post("<@spring.url "kc/guide/sale_operate.html"/>",param,function(data){
				if(data != "true"){
					alert(data);
				}
			});				
		}).keydown(function(){
			if(event.keyCode==13){
				event.keyCode=9;
			}
		});
	});	
}
//载入原材料.
function load_materiels(){
	var param = {command:"load_materiels"};	
	param["widths"] = $("#materiel_table_header").widths();	
	param["type"] = "guide_sale";  // 补货类型   
	
	$("#materiel_table_div").load("<@spring.url "kc/guide/sale_operate.html"/>",param,function(data){
		$("#materiel_table").find("input").focus(function(){
			$(this).select();
			var $tr = $(this).closest("tr");
			if($_select){$_select.removeClass("selected");}
			$_select = $tr;
			$tr.addClass("selected");
		}).change(function(){
			var $tr = $(this).closest("tr");			
			var param = {command:"set_buy_number"};
			param["code"] = $tr.attr("code");			
			param["number"] = $(this).val();					
			$.post("<@spring.url "kc/guide/sale_operate.html"/>",param,function(data){
				if(data != "true"){
					alert(data);
				}
			});	
		}).keydown(function(){
			if(event.keyCode==13){
				event.keyCode=9;
			}
		});
	});
}

$(document.body).ready(function(){
	$.showAjaxAction({img:"images/control/ajaxLoader.gif"});
	//初始化参考日期控件.
	$("#days").datepick({
		multiSelect: 7, 
		multiSeparator: ',',
		monthsToShow: 2,
		monthsOffset:1,
		onClose:function(datas){
			query_click();
		}
	});
	//隐藏材料列表层
	$("#materiel_body_div").hide();		
	
	$("#constant").focus(function(){
		$(this).select();
	});
});
</script>
<body>
<body class="easyui-layout">
<div id="header_div" region="north" border="false" style="height:70px;width:100%;padding:5px;">
<@page.bodyTop>
	<@page.bodyTopLink>
		<@page.link "物流管理平台","kc/main_page.html"/>&nbsp;&gt;&nbsp;按销售自动补货
	</@page.bodyTopLink>
	<@page.bodyTopImage>
	<@page.topImageButton "back","history.go(-1);"/>
	</@page.bodyTopImage>
</@page.bodyTop>	
		<div style="width:99%;line-height:25px;height:25px;margin-top:5px;">
			<span id="span_days" class="step_1" style="margin:0px 5px;float:left;">
				<label style="font-size:12px;float:left;">参考日期:</label>
				<input type="text" id="days" style="margin-left:5px;width:400px;border:0px;border-bottom:1px solid #A4BED4;"/>
				<input name="days_type" type="radio" value="avg" checked/>平均 
				<input name="days_type" type="radio" value="sum"/>汇总	
				<label>| 补货系数</label>
				<input id="constant" type="text" value="1" size="4"/>
				<a id="create" href="javascript:void(0);" onclick="javascript:query_click();" class="easyui-linkbutton" icon="icon-ok" style="margin-left:20px;">查 询</a>
			</span>
			<span class="step_2" style="margin:0px 5px;float:left;display:none;">
				<label>单据日期:</label>						
				<input class="easyui-datebox" type="text" id="obj_date" name="obj_date" required="true" value="${obj_date?default("")}" style="margin-left:5px;width:100px;border:0px;border-bottom:1px solid #A4BED4;"/>
			</span>
		</div>
	</div>		
	<div id="body_div" region="center" border="false" title="第一步 菜品预测" style="overflow:auto;">
		<div id="menu_body_div" class="step_1" sytle="width:99%;height:99%;">
			<table id="menu_table_header" class="blue" style="width:100%;margin:0px;table-layout:fixed;">
    			<tr>
    				<th width="30%">菜品名称</th>
    				<th width="20%">单位</th>
    				<th width="20%">参考数量</th>
    				<th width="10%">预估数量</th>
    				<th width="20%">销售预估</th>    				
    				<th width="16"></th>
    			</tr>
 			</table>
 			<div id="menu_table_div" style="width:100%;height:90%;overflow-y:scroll;overflow-x:hidden;border-bottom:1px solid #ccc;"></div>				
		</div>
		<div id="materiel_body_div"  class="step_2" sytle="width:99%;height:99%;display:none;">		
			<table id="materiel_table_header" class="blue" style="width:100%;margin:0px;table-layout:fixed;">
    			<tr>    					
    				<th width="25%">材料名称</th>
    				<th width="20%">规格</th>
    				<th width="10%">单位</th>
    				<th width="10%">采购模式</th>
    				<th width="10%">销售预估</th>
    				<th width="10%">现有库存</th>
    				<th width="10%">计划采购数量</th>
    				<th width="16"></th>
    			</tr>    			
    		</table>
    		<div id="materiel_table_div" style="width:100%;height:90%;overflow-y:scroll;overflow-x:hidden;border-bottom:1px solid #ccc;"></div>	
		</div>
		<div id="info_body_div" class="step_3" sytle="width:99%;height:99%;display:none;">		
		</div>
	</div>
	<div region="south"  border="false" style="height:40px;padding-left:10px;padding-top:5px;">
		<div id="btn_div_1"  class="step_1">			
			<a href="javascript:void(0);" class="easyui-linkbutton"  style="float:left;margin-left:15px;" iconCls="icon-ok" onClick="go_step_2();">下一步 [原材料预测]</a>
		</div>		
		<div id="btn_div_2"  class="step_2" style="display:none;">
			<a href="javascript:void(0);" class="easyui-linkbutton"  style="float:left;margin-left:15px;" iconCls="icon-undo" onClick="go_step_1();">上一步 [菜品预测]</a>
			<a href="javascript:void(0);" class="easyui-linkbutton"  style="float:left;margin-left:15px;" iconCls="icon-ok" onClick="complete();">生成单据</a>
		</div>	
		<div id="btn_div_3" class="step_3" style="display:none;">						
		</div>		
	</div>
</body>
</html>
