<%@ page import="com.myproject.webapp.controller.webService.DataCache" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>

<!-- BEGIN PAGE HEADER--><%--
<h3 class="page-title">
    <fmt:message key="menu.cloud.storage"/>
    <small><fmt:message key="area.view.subtitle"/></small>
</h3>--%>

<style>
    #errorTxt{
        line-height: 50px;
        font-size: 20px;
        color: #f36969;
    }
    #msgTxt{
        line-height: 50px;font-size: 20px;color:#ffde5d;
    }
</style>

<div class="row">

    <div class="col-md-3" style="padding-right:0px;">
        <div class="portlet box red" style="padding-right:0px;border-right:none;">
            <div class="portlet-title">
                <div class="caption" onclick="showAuthDialog(null);">
                    <i class="fa fa-bell-o"></i><fmt:message key="areaView.stockWaring"/>
                </div>
            </div>
            <div class="portlet-body">
                <div class="scroller" style="height: 634px;" data-always-visible="1" data-rail-visible="0">
                    <ul class="feeds" id="inventory">

                    </ul>
                </div>
                <div class="scroller-footer">
                    <div class="btn-arrow-link pull-right">
                        <a href="${ctx}/component/alarmInventory.html?aid=${area.id}">more</a>
                        <i class="icon-arrow-right"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9" style="padding-left:0px;">
        <div class="clearfix">
        </div>
        <div class="row">
            <div class="col-md-12" >
                <div class="dashboard-stat purple-plum" id="box" style="margin-bottom: 0">
                    <div class="details" style="height: 100px;overflow: hidden;">
                        <div id="errorTxt">
                        </div>
                    </div>
                    <div class="more" style="height: 100px;opacity: 1;overflow: hidden;">
                            <span id="msgTxt">
                            </span>
                    </div>
                    <div class="details" style="height: 100px;overflow: hidden;">
                        <div class="box-status" id="statusTxt">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <input type="text" id="scan-code" class="form-control" style="width: 100%;float:left;" autofocus/><button class="btn" style="width: 10%;right:-500px;position: fixed;" id="printBtn">打印站位</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="portlet box green-haze tasks-widget">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-tasks"></i><fmt:message key="areaView.batch"/>
                        </div>

                    </div>
                    <div class="portlet-body">
                        <div class="task-content">
                            <div class="slimScrollDiv"
                                 style="position: relative; overflow: hidden; width: auto; height: 305px;">
                                <div class="scroller" style="height: 305px; overflow: hidden; width: auto;"
                                     data-always-visible="1" data-rail-visible1="1" data-initialized="1">
                                    <!-- START TASK LIST -->
                                    <ul class="task-list" id="task">
                                    </ul>
                                    <!-- END START TASK LIST -->
                                </div>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="btn-arrow-link pull-right">
                                <a href="${ctx}/workOrder/feederSearch.html">more</a>
                                <i class="icon-arrow-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--操作日志 -->
            <div class="col-md-6 col-sm-6">
                <div class="portlet box blue-steel">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-check"></i><fmt:message key="areaView.tasks"/>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="scroller" style="height: 300px;" data-always-visible="1" data-rail-visible="0">
                            <ul class="feeds" id="logs">

                            </ul>
                        </div>
                        <div class="scroller-footer">
                            <div class="btn-arrow-link pull-right">
                                <a href="${ctx}/dataLog/search.html">more</a>
                                <i class="icon-arrow-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="auth" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <%--<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>--%>
                <h4 class="modal-title">出库授权</h4><span id="authResult" style="color:red;"></span>
            </div>
            <div class="modal-body">
                <p id="authInfo">
                </p>
                <div class="form-group">
                    <input class="form-control" type="text" id="authCode">
                </div>
                <p>

                </p>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn default" id="cancelAuthBtn">放弃出库</button>
                <button type="button" data-dismiss="modal" class="btn green" id="authBtn">授权出库</button>
            </div>
        </div>
    </div>
</div>


<c:set var="scripts" scope="request">
<script>
    jQuery(document).ready(function () {
        function PrintPos(posStr){//idstr 要打印内容
            var iframe = document.createElement('IFRAME');
            var doc = null;
            iframe.setAttribute('style', 'position:absolute;left:-500px;top:-500px;');
            document.body.appendChild(iframe);
            doc = iframe.contentWindow.document;
            doc.write("<style>@page {size: 30mm 20mm;}</style>");
            doc.write('<div style="line-height:20px;font-weight: 800;text-align:center;">' + posStr + '</div>');
            doc.close();
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
            if (navigator.userAgent.indexOf("MSIE") > 0){
                document.body.removeChild(iframe);
            }
        }


        var feederInfo = "";
        var feederPosInfo= "";

        $("#printBtn").click(function(){
            PrintPos(feederInfo+"<br/>"+feederPosInfo);
        });

        $("#scan-code").change(function (){
            //$("#code-errors").text("");
            var codeValue = $(this).val();
            //TCL的条码规则:用*号隔开,[物料编号]*[数量]*[供应商编号]*[批次]*[日期码]*[Reel Id]
            //Reel Id 的前六位是供应商编号
            $(this).attr("placeholder",codeValue);
            $(this).val("");
            var barcode = "";
            var strs= codeValue.split("*"); //字符分割
            if(strs.length == 6){
                var partNumber = strs[0];
                var amount = strs[1];
                var supplierCode = strs[2];
                var reelId = strs[5];
                //if(reelId.indexOf(supplierCode) == 0){
                    barcode = reelId;
                //}
            }
            if(barcode == ""){
                barcode = codeValue;
            }
            findLastOut("${area.id}",barcode);
            //$("#code-errors").text("格式为  [物料编号]*[数量]*[供应商编号]*[批次]*[日期码]*[Reel Id]  的条码信息才可以正确解析");
        })

        function findLastOut(areaId, barcode){
            $.post("${ctx}/service/store/findLastOut", {aid: areaId,bc:barcode}, function (data) {
                var result = "未找到相关信息";
                var subStatusTxt = "条码: "+barcode +"   ";
                if(data){
                    subStatusTxt = subStatusTxt + " 物料: " + data.partNumber + " ";
                    result = data.sourceName+" 站位号: "+data.subSourceInfo+"";
                }
                $("#statusTxt").html(subStatusTxt+"<br/>"+result);
                feederInfo = data.sourceName;
                feederPosInfo = data.subSourceInfo;
                //PrintPos(data.sourceName+"<br/>"+data.subSourceInfo);
                return;
            });
        }


        /**
         * 取消任务集合
         */
        cancelTaskSet= function (areaId, key){
            $.post("${ctx}/service/store/cancelTaskSet", {aid:areaId, skey: key}, function (data) {
                if(data){
                    alert('取消成功');
                }
            });
        }


        /**
         * 暂停任务集合
         */
        pauseTaskSet= function (areaId, key){
            $.post("${ctx}/service/store/pauseTaskSet", {aid:areaId, skey: key}, function (data) {
                if(data){
                    alert('暂停成功');
                }
            });
        }

        /**
         * 执行任务集合
         */
        executeTaksSet = function executeTaksSet(areaId, key){
            $.post("${ctx}/service/store/executeTaksSet", {aid: areaId, skey: key}, function (data) {
                if(data){
                    alert('执行成功');
                }
            });
        }

        cancelTask = function (tid){
            $.post("${ctx}/service/store/cancelTask", {tid: tid}, function (data) {
                if(data){
                    alert('取消成功');
                }
            });
        }

        /**
         * 出库授权
         */
        authOut = function (taskId){
            var authCodeValue = $("#authCode").val();
            $(this).attr("placeholder",authCodeValue);
            $.post("${ctx}/service/store/authOut", {aid: "${area.id}", tid: taskId, ac:authCodeValue}, function (data) {
                if(data){
                    $("#authResult").html(data);
                }else{
                    $('#auth').hide();
                }
            });
        }

        showAuthDialog = function(authTask){
            $('#auth').modal();
            $("#authCode").focus();
            var taskId = "";
            var partNumber = "";
            if(authTask){
                taskId = authTask.id;
                partNumber = authTask.partNumber;
                //$("#authResult").text("授权失败");
                $("#cancelAuthBtn").click(function (){
                    cancelTask(taskId);
                });
                $("#authBtn").click(function (){
                    authOut(taskId);
                });
                $("#authCode").change(function (){
                    authOut(taskId);
                })
            }
            $("#authInfo").text("【"+partNumber+"】的出库任务需要进行授权,请输入授权码或者取消该任务");
        }


        function updateTasks(){
            //任务列表
            $.post("${ctx}/service/store/tasks", {aid: "${area.id}"}, function (data) {

                $("ul#logs").html("");
                var authTask;
                for(var item in data){
                    var status = data[item].status.toLowerCase();
                    //入库
                    var typeIcon = "<div class='label label-sm label-"+status+"'><i class='fa fa-database'></i></div>";
                    var msg = data[item].showStr;
                    if(data[item].type == 2){//出库
                        typeIcon = "<div class='label label-sm label-"+status+"'><i class='fa fa-sign-out'></i></div>";
                    }

                    var authColor = "";
                    if(data[item].needAuth){
                        authColor = "red-flamingo";
                        if(!authTask){
                            //任务需要授权才能执行
                            authTask = data[item];
                            showAuthDialog(authTask);
                        }
                    }
                    var statusMsg ="";

                    var operate = '';

                    if(data[item].cancel){
                        statusMsg ="<span class='label label-sm label-"+status+"'>[已取消]</span>";
                    } else if(data[item].executing){
                        statusMsg ="<span class='label label-sm label-"+status+"'>[正在执行]</span>";
                        operate = '<a class="btn btn-xs default" href="#" onclick=cancelTask('+data[item].id+');><i class="fa fa-trash-o"></i> 取消 </a>';
                    }else if(data[item].finished){
                        statusMsg ="<span class='label label-sm label-"+status+"'>[已完成]</span>";
                    }else if(data[item].wait){
                        statusMsg ="<span class='label label-sm label-"+status+"'>[等待中]</span>";
                        operate = '<a class="btn btn-xs default" href="#" onclick=cancelTask('+data[item].id+');><i class="fa fa-trash-o"></i> 取消 </a>';
                    }
                    var operatorStr = '<div class="task-config" style="display: block;"><div class="task-config-btn btn-group">' +
                            operate +'</div></div>';


                    var itemStr = "<li>" +
                            "<div class='col1'><div class='cont'>"
                            + "<div class='cont-col1'>"+typeIcon+"</div>"
                            +"<div class='cont-col2'><div class='desc "+ authColor +"'>" + msg +"</div></div>" +
                            "</div></div>"
                            +"<div class='col2'><div class='date'>"+ statusMsg +"</div>"+operatorStr+"</div>"
                            +"</li>";
                    $("ul#logs").append(itemStr);
                }

            });
        }

        function updateFeeders(){
            //站位列表
            $.post("${ctx}/service/store/taskSetList", {aid: "${area.id}"}, function (data) {
                var hasExecutingTask = false;
                for(var item in data){
                    if(data[item].executing){
                        hasExecutingTask = true;
                        break;
                    }
                }
                $("ul#task").html("");
                for(var item in data){
                    var status = data[item].status.toLowerCase();
                    var url = "";
                    if(data[item].feeder){
                        url = "${ctx}/workOrder/feederView.html?fid="+ data[item].id;
                    }else{
                        url = "${ctx}/component/storagePosFind.html?lockId="+ data[item].id;
                    }
                    var titleStr = "<span class='task-title-sp'>["+data[item].finishOpNum+"/"+data[item].opNum+"] "
                            +"<a href='"+ url +"'>"+ data[item].title +"</a>"+
                            "</span>";

                    var statusStr = "";
                    var operate = '<a class="btn btn-xs default" href="#" onclick=cancelTaskSet("'+data[item].areaId+'","'+data[item].key+'");><i class="fa fa-trash-o"></i>取消</a>';
                    if(data[item].executing){
                        operate = '<a class="btn btn-xs default" href="#" onclick=pauseTaskSet("'+data[item].areaId+'","'+data[item].key+'");><i class="fa fa-pause"></i>暂停</a>' + operate;
                        statusStr = "<span class='label label-sm label-"+status+"'>[执行中]</span>";
                    }else if(data[item].wait){
                        if(!hasExecutingTask){
                            operate = '<a class="btn btn-xs default" href="javascript:void(0);" onclick=executeTaksSet("'+data[item].areaId+'","'+data[item].key+'");><i class="fa fa-play"></i>出库</a>' + operate;
                        }
                        statusStr = "<span class='label label-sm label-"+status+"'>[等待执行]</span>";
                    }else if(data[item].pause){
                        if(!hasExecutingTask){
                            operate = '<a class="btn btn-xs default" href="javascript:void(0);" onclick=executeTaksSet("'+data[item].areaId+'","'+data[item].key+'");><i class="fa fa-play"></i>出库</a>' + operate;
                        }
                        statusStr = "<span class='label label-sm label-"+status+"'>[已暂停]</span>";
                    } else if(data[item].finished){
                        statusStr = "<span class='label label-sm label-"+status+"'>[已完成]</span>";
                        operate = "";
                    }else if(data[item].cancel){
                        statusStr = "<span class='label label-sm label-"+status+"'>[已取消]</span>";
                        operate = "";
                    }


                    var operatorStr = '<div class="task-config" style="display: block;"><div class="task-config-btn btn-group">' +
                            operate +'</div></div>';

                    var itemStr = "<li><div class='task-title'>"+ titleStr+ statusStr+ "</span></div>"+operatorStr+"</li>";
                    $("ul#task").append(itemStr);
                }

            });
        }

        function updateInventory(){
            //库存预警
            $.post("${ctx}/service/store/alarmInventory", {aid: "${area.id}"}, function (data) {
                $("ul#inventory").html("");
                for(var item in data){
                    var titleStr = "<span class='task-title-sp'>"
                            +"<b style='font-size:16px;'>" +data[item].partNumber + "</b> ["+data[item].needReel + "/" + data[item].stockReel
                            + "]</span>";

                    var itemStr = "<li><div class='task-title alert-danger'>"+ titleStr+"</div></li>";
                    $("ul#inventory").append(itemStr);
                }
            });
        }


        function updateAreaMsg(){
            $.post("${ctx}/service/store/areaMsg", {aid: "${area.id}"}, function (data) {
                if(data != ""){
                    $("#msgTxt").html(data);
                }
            });
        }


        /**
         * 客户端错误消息提醒
         */
        function updateAreaClientMsg(){
            $.post("${ctx}/service/store/areaClientMsg", {aid: "${area.id}"}, function (data) {
                $("#errorTxt").html(data);
            });
        }

        function flushStatus(){
            //输入框获得焦点
            $("#scan-code").focus();
            updateAreaClientMsg();
            updateAreaMsg();
            updateTasks();
            updateFeeders();
            updateInventory();
            //定时执行，2秒
            window.setTimeout(flushStatus, 1200);
        }

        $('#auth').on('hidden.bs.modal', function () {
            $("#scan-code").focus();
        })

        flushStatus();
    });
</script>
</c:set>