<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<link href="${pageContext.request.contextPath }/common/admin/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/css/style.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<title>生产批次列表</title>
	<style>
		.zzsc{margin:0 auto;width:120px;}
		/* CSS注释：设置对象边框、宽度、高度 便于观察布局效果 */
        .logsClass{width: 100px; height: 0px;}
	</style>
</head>

<body>
	<nav class="breadcrumb">
		<i class="Hui-iconfont">&#xe67f;</i> 
		首页 <span class="c-gray en">&gt;</span>
		批次管理 <span class="c-gray en">&gt;</span>
		生产批次列表
		<a class="btn btn-success radius r mr-20" style="line-height: 1.6em; margin-top: 3px" href="javascript:location.replace(location.href);" title="刷新">
		<i class="Hui-iconfont">&#xe68f;</i></a>
	</nav>
	<div class="pd-20">
		<div class="text-c">
		<form action="${pageContext.request.contextPath }/admin/qrCode/listQrCodeLogs" method="post" id="myForm" name = "myForm">
			<input type="text" name="logsBatch" id="logsBatch" value="${logsBatch }" placeholder="批次号" style="width: 150px" class="input-text">
			日期范围： 
			<input type="text" readonly="readonly" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'endDate\')||\'2020-10-01\'}'})" id="beginDate" value="${beginDate }" name="beginDate" class="input-text Wdate" style="width: 120px;">
			- <input type="text" readonly="readonly" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'2020-10-01'})" id="endDate" value="${endDate }" name="endDate" class="input-text Wdate" style="width: 120px;">
			<button name="" id="submitBtn" class="btn btn-success" type="submit">
				<i class="Hui-iconfont">&#xe665;</i> 搜索
			</button>
			<input type="hidden" id="pageNO" value="${pageNO }">
		</form>
		</div>
		<div class="mt-20">
			<table class="table table-border table-bordered table-bg table-hover table-sort">
				<thead>
					<tr class="text-c">
						<th width="10">批次号</th>
						<th width="100">批次描述</th>
						<th width="100">数量</th>
						<th width="150px;">状态</th>
						<th width="50">时间</th>
						<th width="150">操作</th>
					</tr>
				</thead>
				<!-- href="${pageContext.request.contextPath }/order/getShopOrderByOrderId?orderId="+${order.salesOrderid } -->
				<tbody id="listid">
					<c:if test="${ !(empty list)}">
						<c:forEach items="${list}" var="list">
							<tr>
								<td class="text-c" width="10">${list.logsBatch }</td>
								<td class="text-c" width="100">${list.logsRemark }</td>
								<td class="text-c" width="100">${list.logsNumber }</td>
								<td class="text-c" width="100" height="">
									<c:if test="${list.qrCodeNumber == 100}">
										已完成
									</c:if>
									<c:if test="${list.qrCodeNumber < 100}">
										<div class="zzsc mousemoveTip" id="${list.logsBatch }" >
                                            <div id="tipDiv_${list.logsBatch }" class="logsClass">
                                                <%--已完成--%>
												<input type="hidden" value="${list.completedNumber }" class="completedNumber">

                                                <%--待完成--%>
                                                <input type="hidden" value="${list.logsNumber }" class="logsNumber">
                                            </div>
											<input type="hidden"  name="progressUpdate" value="${list.logsBatch }">
											<div class="div" w="${list.qrCodeNumber }"></div>
										</div>
									</c:if>
                                </td>
								<td class="text-c" width="150"><fmt:formatDate value="${list.logsCreateTime }" pattern="yyyy-MM-dd HH:mm" /></td>
								<!-- 遍历操作 -->
								<td class="td-manage text-c">
									<div id="${list.logsBatch }operation">
										<c:if test="${list.qrCodeNumber == 100}">
											<a onclick="listCode('${list.logsBatch }');" title="二维码列表" href="javascript:;"  class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe665;</i></a>
										</c:if>
										<a onclick="excel('${list.logsBatch }');" title="下载" href="javascript:;"  class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe640;</i></a>
									</div>
								</td>
							</tr>
						</c:forEach>
					</c:if>
					<c:if test="${(empty list)}">
					<tr>
						<td class="text-c" colspan="6" >暂无内容</td>
					</tr>
					</c:if>
				</tbody>
				</table>
				</div>


        <%--<div id="xxx" onmouseover="mousemoveTip('tipDiv_wqeqweq')">1</div>--%>

    <div align="" id="my" onclick="mousemoveTip()">

    </div>

				<div align="right">
					<%@include file="/common/other/paper/pager.jsp"%>
				</div>
				</div>
				<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/jquery/1.9.1/jquery.min.js"></script>
				<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/layer/1.9.3/layer.js"></script>
				<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/My97DatePicker/WdatePicker.js"></script>
				<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/H-ui.js"></script>
				<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/H-ui.admin.js"></script>
                <script type="text/javascript">
                    var progress = new Array();
                    var logsName;		//
					var coverFlag = true;	//全局检查 是否鼠标是否在div上， true :是
                </script>
				<script type="text/javascript">
                    var a="red";
                    var b="#dfdfdf";
                    var w="100px";
                    var h="15px";
                    var div=$(".div");
                    function progressUpdate() {
                        progress = new Array(); //重置
                        var array = $("[name='progressUpdate']");//单引号 的name替换为相应的name
                        var logsBatchs = new Array();
						 array.each(function(index,element){
                             logsBatchs[index] = $(element).val();
                         	})
                            $.ajax({
                                "type" : "post",
                                "url" : "/tooth/admin/qrCode/qrcodProgressUpdate",
								"traditional" : true,
                                "dataType" : "json",
                                "data" :{logsBatchs : logsBatchs},
                                "success" : function(data) {
                                        $.each(data.returnMsg.list,function(i,value) {

                                            progress.push(value);

                                            $("#"+value.logsBatch).html("");
											if(value.qrCodeNumber == 100){
                                                $("#"+value.logsBatch+"operation").html("");
                                                $("#"+value.logsBatch+"operation").append('<a onclick="listCode('+value.logsBatch +');" title="二维码列表" href="javascript:;"  class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe665;</i></a>'+
                                                    '<a onclick="excel('+value.logsBatch +');" title="下载" href="javascript:;"  class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe640;</i></a>');
                                                $("#"+value.logsBatch).append('已完成');
                                            }else{
                                                $("#"+value.logsBatch).append('<div id="tipDiv_'+ value.logsBatch +'" class="logsClass"></div><input type="hidden"  name="progressUpdate" value="'+value.logsBatch+'">'+
                                                    '<div class="div" w="'+value.qrCodeNumber+'"></div>');
                                            }


                                            /*** 更改layer的内容 开始  **/
                                            removeLayer();
											if(coverFlag){
												mousemoveTip(logsName);
											}
                                            /*** 更改layer的内容 结束  **/
                                        });
                                    //进度条渲染
                                    div=$(".div");
                                    barb();
                                    amimeat();
                                    barbCss(a,b);
                                },
                                "error":function(data){
                                    alert("操作失败，请联系管理员！");
                                }
                            });



                    }
                ref = setInterval(function(){
                    progressUpdate();
                },2000);


                function   formatDate(now)   {
                    var time = new Date(now);
                    var   year=time.getFullYear();
                    var   month=time.getMonth()+1;
                    var   date=time.getDate();
                    var   hour=time.getHours();
                    var   minute=time.getMinutes();
                    var   second=time.getSeconds();
                    if(month < 10){
                        month = "0"+month;
					}
                    if(date < 10){
                        date = "0"+date;
                    }
                    if(minute < 10){
                        minute = "0"+minute;
                    }
                    return   year+"-"+month+"-"+date+"   "+hour+":"+minute;
                }
                /**
                 * 打开二维码列表界面
                 */
                function listCode(logsBatch){
                    window.location.href = '${pageContext.request.contextPath }/admin/qrCode/listQrCodeNumber?logsBatch='+logsBatch;
                }
                    //a 底色，b 加载色 , w 展示宽度，h 展示高度
                    //进度条要插入的地方
                    function barb(){
                        div.each(function(){
                            var width=$(this).attr('w');
                            var barbox='<dl class="barbox"><dd class="barline"><div w="'+width+'" class="charts" style="width:0px"><d></d></div></dd></dl>';
                            $(this).append(barbox);
                        })
                    }
                    function amimeat(){
                        $(".charts").each(function(i,item){
                            var wi=parseInt($(this).attr("w"));
                            $(item).animate({width: wi+"%"},1,function(){
                                $(this).children('d').html(wi+"%");
                            });
                        });
                    }
                    function barbCss(a,b){
                        $(".barbox").css({
                            "height":h,
                            "line-height":h,
                            "text-align":"center",
                            "color":"#fff",
                        })
                        $(".barbox>dd").css({
                            "float":"left"
                        })
                        $(".barline").css({
                            "width":w,
                            "background":b,
                            "height":h,
                            "overflow":"hidden",
                            "display":"inline",
                            "position":"relative",
                            "border-radius":"8px",
                        })
                        $(".barline>d").css({
                            "position":"absolute",
                            "top":"0px",
                        })
                        $(".charts").css({
                            "background":a,
                            "height":h,
                            "width":"0px",
                            "overflow":"hidden",
                            "border-radius":"8px"
                        })
                    }
				//进度条渲染
                $(function(){
                    barb();
                    amimeat();
                    barbCss(a,b);

                })

                        //导出Excel
                        function excel(numberBatch){
                            document.myForm.action='${pageContext.request.contextPath }/admin/qrCode/downLoadBarcode?numberBatch='+numberBatch;
                            document.myForm.submit();
                        }
				</script>

    <script>
        //配置layer弹框内容
        function mousemoveTip(logsDomId) {
            logsName = logsDomId;
            for (var i = 0; i < progress.length; i++) {
                var myLogsId = "tipDiv_" + progress[i].logsBatch;
                if (logsDomId == (myLogsId)) {
                    var logIds = $("#tipDiv_" + progress[i].logsBatch);
                    var xValue = progress[i].completedNumber;               //已完成
                    var yValue = progress[i].logsNumber - progress[i].completedNumber;      //待完成
                    //tips层
                    layer.tips('已完成' + xValue + ',待完成' + yValue, logIds, {
                        tips: [1, '#393D49'], //还可配置颜色
                        time: -1
                    });
                }
            }
        }

        //关闭layer
        function removeLayer(){
            layer.closeAll();
        }

        $(function(){
            $(".mousemoveTip").each(function(index,element){
                var logsDomId = $(this).find(".logsClass").attr("id");
                var logsIds = logsDomId.split("_");
                var completedNumber = $(this).find(".completedNumber").val();
                var logsNumber = $(this).find(".logsNumber").val();

                var value = new Object();
                value.logsBatch = logsIds[1];
                value.completedNumber = completedNumber;
                value.logsNumber = logsNumber;
                progress.push(value);
            });

            $(".mousemoveTip").each(function(index,element){
                var logsDomId = $(this).find(".logsClass").attr("id");
                $(this).mouseover(function(){
					coverFlag = true;
                   mousemoveTip(logsDomId);
                })

                $(this).mouseout(function(){
                    removeLayer();
					coverFlag = false;
                })
            });
        });

    </script>

</body>
</html>