<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="<%=basePath %>resource/css/base.css" rel="stylesheet">
    <link rel="stylesheet" href="<%=basePath %>resource/easyui/uimaker/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>resource/easyui/uimaker/icon.css">
    <link rel="stylesheet" href="<%=basePath %>resource/css/providers.css">
    <link href="<%=basePath %>resource/css/bootstrap.css" rel="stylesheet" />
    <link href="<%=basePath %>resource/css/bs-is-fun.css" rel="stylesheet" />
	<link rel="stylesheet" href="<%=basePath %>resource/timeline/jquery.eeyellow.Timeline.css">
    
    <!-- validate 验证中英文 -->
    <script type="text/javascript" src="<%=basePath %>resource/validate/jquery.validate-${pageContext.response.locale}.js"></script>
    <style>
        .stutime{
            text-align: center;
            margin-left: 26%;
        }
    </style>

</head>
<body>
<div class="container">
    <div data-options="closable:true" style="padding:10px 5px 5px 10px;">
        <div id="tb" style="padding:0 30px;">
            <form id="searchForm">
               	<spring:message code="track.no" />:<input class="easyui-textbox" type="text" id="billNo" style="width:166px;height:35px;line-height:35px;">
                <a href="javascript:doSearch()" class="easyui-linkbutton" iconCls="icon-search" data-options="selected:true"><spring:message code="opt.search" /></a>
            </form>
        </div>
        
        <div class="col-md-12">
        		<br />
        		<div>
        			<img id="loading" src="<%=basePath %>resource/images/loading.gif" style="display:none;margin:0px auto;width:100px;height:100px;">
        		</div>
        		<div id="info_header" style='font-size:25px;'>
        			
        		</div>
                <div class="VivaTimeline"  id='vivatimeline'>
                       <!--  <dt>May 2016</dt>
                        <dd class="pos-right clearfix">
                            <div class="events">
                                <div class="events-header">Event Heading</div>
                                <div class="events-body">
                                    
                                </div>
                            </div>
                        </dd> -->
                        
                        
                        <!-- <dt>Jan 2016</dt>
                        <dt>Dec 2015</dt>
                        <dt>Oct 2015</dt>
                        <dt>Sep 2015</dt>
                        <dt>Aug 2015</dt> -->
                    
                </div>
            </div>
        
        <div id="step">
            <%--<ul class="nav nav-pills nav-justified step step-progress">
                <li id="step1">
                    <a>出港理货(海关)<span class="caret"></span></a>
                    <span>2017-05-01 13:24:56</span>
                </li>
                <li id="step2">
                    <a>出港货物离港<span class="caret"></span></a>
                    <span>2017-05-01 13:24:56</span>
                </li>
                <li id="step3">
                    <a>出港正式舱单<span class="caret"></span></a>
                    <span>2017-05-01 13:24:56</span>
                </li>
                <li id="step4">
                    <a>出港交单<span class="caret"></span></a>
                    <span>2017-05-01 13:24:56</span>
                </li>
                <li id="step5">
                    <a>出港运抵(海关)<span class="caret"></span></a>
                    <span>2017-05-01 13:24:56</span>
                </li>
                <li id="step6">
                    <a>出港收运<span class="caret"></span></a>
                    <span>2017-05-01 13:24:56</span>
                </li>
            </ul>--%>
        </div>

</div>
</div>
<script type="text/javascript" src="<%=basePath %>resource/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath %>resource/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath %>resource/easyui/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath %>resource/js/tools.js"></script>
<!--弹出层引入的JS-->
<script type="text/javascript" src="<%=basePath %>resource/layer-v3.0.3/layer/layer.js"></script>
<script src="<%=basePath %>resource/js/bootstrap.min.js"></script>
<script src="<%=basePath %>resource/js/brush.js"></script>
<%-- <script type="text/javascript" src="<%=basePath %>resource/timeline/jquery.eeyellow.Timeline.js"></script> --%>
    <script>
    	function FLoad(){
    		var is_load = false;
    		var obj = null;
    		this.setObject = function(o){obj = o;}
    		function logic(){
    			
    		}
    		function update(){
    			logic();
    			if(is_load)
    			{
    				setTimeout(update, 1000);
    			}
    		}
    		this.destroy = function(){
    			is_load = false;
    		}
    		this.start = function(){
    			is_load = true;
    			update();
    		}
    		this.init = function(){
    			
    		}
    	}
    	
    	 $.fn.updateLoad = function(obj){
    		var lo = new FLoad();
    		lo.setObject(this[0]);
    		lo.init();
    		lo.start();
    		return lo;
    	} 
    	var fload;
    	$(document).ready(function(){
    		fload = $("#fload").updateLoad();
    	});
    </script>
<script type="text/javascript">
    $(function(){
        $("#myModalNext .modal-footer button").each(function () {
            $(this).click(function () {
                if ($(this).hasClass("MN-next")) {
                    $("#myModalNext .carousel").carousel('next');
                    $("#myModalNext .step li.active").next().addClass("active");
                } else {
                    $("#myModalNext .carousel").carousel('prev');
                    if ($("#myModalNext .step li").length > 1) {
                        $($($("#myModalNext .step li.active"))[$("#myModalNext .step li.active").length - 1]).removeClass("active")
                    }
                }
            })
        })
    })
    var day_week = ["周日","周一","周二","周三","周四","周五","周六"];
    function doSearch(){
        $("#step").empty();
        var billNo = $("#billNo").val();
        if(billNo==''){
            layer.open({content:"请输入运单号!"});
            return;
        }
        $("#loading").show();
        //自动过滤非3号位置的字符"-"
        billNo = billNo.replace(/\-/g, function(k, v){
        	if(v != 3)
        	{
        		return "";
        	}
        	return k;
        });
        if(billNo.substr(3,1) != "-")
	        billNo = billNo.substr(0, 3) + "-" + billNo.substr(3, billNo.length);
        $.post("<%=basePath%>tracking/detail",{billNo:billNo},function(data){
        	$("#loading").hide();
            if(data.status==200){
                var content = "";
                var predate = 0;
                //添加重量和数量
                var header_title = "<span style='color:#5689ff'>重量:</span><span style='color:#aaa'>"+
                data.data.weight+"</span>&nbsp;&nbsp;&nbsp;<span style='color:#5689ff'>件数:</span><span style='color:#aaa'>"+
                data.data.pieceQuantity+"</span><br /><hr />";
                $("#info_header").html(header_title);
                
                if(data.data.status.statusClass.length>0){
                    content = "<dl>";//'<ul class="nav nav-pills nav-justified step step-progress">';
                    $.each(data.data.status.statusClass,function(k,v){
                    	
                    	var date = new Date(v.stutime.replace(/-/g, "/"));
                    	var new_date = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
                    	
                    	if(new_date != predate)
                    	{
                    		content += "<dt style='margin-bottom:20px;'>"+new_date+" "+day_week[date.getDay()]+"</td>";
                    		predate = new_date;
                    	}
                    	content += "<dd class='pos-right clearfix'>";
                    	content += "<div class='events'>";
                    	content += "<div class='events-header'>";
                    	content += v.stutime.substr(11, v.stutime.length) + "&nbsp;&nbsp;&nbsp;" + v.descrp;
                    	content += "</div>"
                    	content += "</div>";
                    	content += "</div>"
                    	content += "</dd>";
                    	/*
                    	<dd class="pos-right clearfix">
	                        <div class="circ"></div>
	                        <div class="time">Feb 03</div>
	                        <div class="events">
	                            <div class="events-header">Event Heading</div>
	                            <div class="events-body">
	                                
	                            </div>
	                            <div class="events-footer"></div>
	                        </div>
                    	</dd>*/
                    	//content +='<li class="active"> <a>'+v.descrp+'<span class="caret"></span></a> <span class="stutime">'+v.stutime+'</span> </li>'
                    });
                    content +='</dl>';
                }
                $("#vivatimeline").html(content);
            }else{
                layer.open({content:"无此单号!"});
            }
        })
    }
</script>
</body>
</html>