<%@ page import="com.myproject.util.StorageConstants" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>

<style type="text/css">
    .box{
        margin-top: 10px;
    }
    .alert{
        padding:8px;
    }

    .partnumber-box{
        height: 100px;text-align: center;
        padding-top:35px;
        margin-bottom:10px;
        font-size: 16px;
        vertical-align: middle;
        word-wrap:break-word ;
        cursor: pointer;
    }

    .portlet.box.yellow{
        border: 1px solid #FFFF00;
    }
    .portlet.box.yellow > .portlet-title {
        background-color: #FFFF00 !important;
    }

    .portlet.box.green{
        border: 1px solid #00FF00;
    }
    .portlet.box.green > .portlet-title {
        background-color: #00FF00 !important;
    }

    .modal-body {
        position: relative;
        padding: 15px;
        height: 360px;
        overflow-y: scroll;
    }

    .td-item{
        display: block;
    }

</style>

<link href="${ctx}/scripts/lobibox/css/lobibox.min.css?id=2" rel="stylesheet" type="text/css"/>

<div class="row" id="codeBox">
    <div class="col-md-6 col-sm-6">
        <div class="input-group">
            <input type="text" class="form-control" id="scan-code" />
        </div>
    </div>
    <div class="col-md-6 col-sm-6">
        <div class="" id="msg">
        </div>
    </div>
</div>

<div class="page-bar">
    <div class="page-toolbar">
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-fit-height default"  onclick="checkAllPos();">
                <fmt:message key="shelf.btn.dbCheck"/>
            </button>
            <button type="button" class="btn btn-fit-height grey-cascade"  onclick="closeAllLights();">
                <fmt:message key="shelf.btn.closeAllLights"/>
            </button>

            <%--<button type="button" class="btn btn-fit-height grey-gallery" onclick="toMinistock();">--%>
                <%--<fmt:message key="shelf.btn.ministock"/>--%>
            <%--</button>--%>

            <button type="button" class="btn btn-fit-height yellow" onclick="showInventory();">
                <i class="fa fa-sign-out"></i><fmt:message key="button.checkout"/>
            </button>
        </div>
    </div>
</div>
<div class="row">
    <%--<div class="col-md-12 col-sm-12 ">--%>
        <%--<div class="portlet box grey" style="margin-bottom: 0px;">--%>
            <%--<div class="portlet-title" style="text-align: center;color:black;font-size:30px;">--%>
                <%--${storage.name}--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</div>--%>
    <c:forEach items="${showLines}" var="lineInfo">
        <c:set var="hideClass" value=""/>
        <%--<c:if test="${lineInfo.key == 'lineBoxTemplate'}">--%>
            <%--<c:set var="hideClass" value="hide"/>--%>
        <%--</c:if>--%>
        <div class="col-md-6 col-sm-6 " id="${lineInfo.key}">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="portlet box ${lineInfo.value}">
                <div class="portlet-title">
                    <div class="caption" style="color: #000000;">
                        <fmt:message key="shelf.lineInfo"/>: ${lineInfo.key}
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="table-scrollable" style="height:430px;">
                        <table class="table table-striped table-hover table-bordered no-footer" role="grid" aria-describedby="sample_editable_1_info">
                            <thead>
                            <tr role="row">
                                    <%--<th><fmt:message key="产线"/></th>--%>
                                <th><fmt:message key="shelf.pn"/></th>
                                <th><fmt:message key="shelf.slot"/></th>
                                <th><fmt:message key="shelf.tableNo"/></th>
                                <th><fmt:message key="shelf.slotNum"/></th>
                                <th><fmt:message key="shelf.subslot"/></th>
                                <th><fmt:message key="shelf.remainingTime"/></th>
                                <th><fmt:message key="shelf.cabinet"/></th>
                            </tr>
                            </thead>
                            <tbody class="taskTable">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </c:forEach>
    <div class="col-md-6 col-sm-6 hide" id="lineBoxTemplate">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-scrollable" style="height:500px;">
                    <table class="table table-striped table-hover table-bordered no-footer" role="grid" aria-describedby="sample_editable_1_info">
                        <thead>
                        <tr role="row">
                            <%--<th><fmt:message key="产线"/></th>--%>
                            <th><fmt:message key="shelf.pn"/></th>
                            <th><fmt:message key="shelf.slot"/></th>
                            <th><fmt:message key="shelf.tableNo"/></th>
                            <th><fmt:message key="shelf.slotNum"/></th>
                            <th><fmt:message key="shelf.subslot"/></th>
                            <th><fmt:message key="shelf.remainingTime"/></th>
                            <th><fmt:message key="shelf.cabinet"/></th>
                        </tr>
                        </thead>
                        <tbody class="taskTable">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
</div>

<div id="shelfInventory" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="margin-top: 10%;width:80%;margin-left:10%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title"  style="margin:10px;">
                    <span id="detailTitle">&nbsp<fmt:message key="button.checkout"/></span>
                </h4>
                <div class="input-group">
                    <input type="text" class="form-control filterInput" id="filterInput"/>
                </div>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-hover" id="itemsTable">
                    <thead>
                    <tr>
                        <th>
                            <fmt:message key="barcode.barcode"/>
                        </th>
                        <th>
                            <fmt:message key="barcode.partNumber"/>
                        </th>
                        <th>
                            <fmt:message key="Line"/>
                        </th>
                        <th>
                            <fmt:message key="barcode.inStoreRemainTime"/>
                        </th>
                        <th>
                            <fmt:message key="checkOut.pos"/>
                        </th>
                        <th>
                            <fmt:message key="checkOut.operate"/>
                        </th>
                    </tr>
                    </thead>
                    <tbody class="theItems">
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <%--<button type="button" data-dismiss="modal" class="btn default" id="cancelAuthBtn">取消</button>--%>
            </div>
        </div>
    </div>
</div>

<div id="lineConfirm" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="margin-top: 10%;width:80%;margin-left:10%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" style="font-weight: 500;" id="choseLineTitle"></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <c:forEach items="${showLines}" var="lineInfo">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                            <div class="bg-blue-madison partnumber-box lineBox">${lineInfo.key}</div>
                        </div>
                    </c:forEach>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<div id="opUserConfirm" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="margin-top: 10%;width:50%;margin-left:25%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" style="font-weight: 500;"><fmt:message key="shelf.employeeNo"/></h4>
            </div>
            <div class="modal-body" style="height:80px;overflow-y:hidden;">
                <div class="row">
                    <div class="input-group">
                        <input type="hidden" id="outPosId" value=""/>
                        <input type="text" class="form-control" id="opUser" />
                    </div>
                    <h4>
                        <span id="authErrorMsg" style="font-weight: 500;color:red;"></span>
                    </h4>

                </div>
            </div>
            <div class="modal-footer">
                <div>
                    <%--<a href="" class="btn yellow left" id="findAndOut"><i class="fa fa-sign-out"></i><fmt:message key="allBoxView.findAndOut"/></a>--%>

                    <button type="button" class="btn green" onclick="opUserOk();" >
                        <fmt:message key="button.ok"/></button>
                    <button type="button" data-dismiss="modal" class="btn default" id="cancelAuthBtn"><fmt:message key="button.cancel"/></button>
                </div>
            </div>
        </div>
    </div>
</div>


<fmt:message key="shelf.ecall.status.0" var="ecall_status_0"/>
<fmt:message key="shelf.ecall.status.1" var="ecall_status_1"/>
<fmt:message key="shelf.ecall.status.2" var="ecall_status_2"/>
<fmt:message key="shelf.ecall.status.3" var="ecall_status_3"/>
<fmt:message key="shelf.ecall.status.4" var="ecall_status_4"/>
<fmt:message key="shelf.ecall.status.5" var="ecall_status_5"/>
<fmt:message key="shelf.ecall.status.6" var="ecall_status_6"/>
<fmt:message key="shelf.ecall.status.7" var="ecall_status_7"/>
<fmt:message key="shelf.ecall.status.8" var="ecall_status_8"/>
<fmt:message key="shelf.ecall.status.9" var="ecall_status_9"/>
<fmt:message key="shelf.subslot.0" var="subslot_0"/>
<fmt:message key="shelf.subslot.1" var="subslot_1"/>
<fmt:message key="alarm.inaction.title" var="inactionAlarmTitle"/>

<fmt:message key="network.error.failed" var="networkFailed"/>

<fmt:message key="runStatus.minutes" var="minuteLabel"/>
<fmt:message key="solder.hour" var="hourLabel"/>

<c:set var="scripts" scope="request">
    <script type="text/javascript">

        function showMsg(msg){
            if(msg == ""){
                $("#msg").attr("class","");
                $("#msg").text("");
            }else{

                var error = true;
                if(msg.indexOf("OK") == 0){
                    error = false;
                    msg = msg.substr(2);
                }
                if(error){
                    $("#msg").attr("class","alert alert-danger");
                }else{
                    $("#msg").attr("class","alert alert-success");
                }
                $("#msg").text(msg);
            }
        }

        $("#scan-code").change(function () {
            var codeValue = $(this).val();
            $(this).val("");
            showMsg("");
            $(this).attr("placeholder", codeValue);
            $.post("${ctx}/service/store/accshelf/putInCode", {cid: '${show}', code: codeValue}, function (data) {

                //$("#sizeConfirm").modal("show");
                if(data.indexOf("n") == 0){
                    //弹框选择线别信息后重新请求
                    data = data.substr(1);
                    $("#choseLineTitle").text(data);
                    $("#lineConfirm").modal("show");
                }
                showMsg(data);
            }).error(function(){showMsg("Error");});
        });

        $(".lineBox").click(function(){
            $("#lineConfirm").modal("hide");
            var codeValue = $("#scan-code").attr("placeholder");
            var lineStr = $(this).text();
            if(codeValue){
                $.post("${ctx}/service/store/accshelf/putInCode", {cid: '${show}', code: codeValue, line: lineStr}, function (data) {
                    showMsg(data);
                });
            }
        }).error(function(){showMsg("put in error");});


        showInventory = function(){
            $("#opUser").val("");
            $("#authErrorMsg").text("");

            $(".filterInput").val("");
            $("#theItems").html("");
            $.post("${ctx}/service/store/shelfInventory", {cid: '${show}'}, function (posList) {

                var table = $('#itemsTable').DataTable();
                table.clear();
                for(var i in posList){
                    //var index = parseInt(i) + 1;
                    var pos = posList[i];
                    var reelId = "<span class='td-item'>"+pos.barcode.barcode+"</span>";
                    var line = pos.barcode.lineInfoStr;
                    if(pos.barcode.lockId != null){
                        line = line + "("+pos.barcode.lockId+")";
                    }

                    var inStoreTime = "";
                    if(pos.inStoreHour >= 1){
                        inStoreTime = pos.inStoreHour + "${hourLabel}";
                    }
                    if(pos.inStoreMiniute != 0){
                        inStoreTime = inStoreTime + pos.inStoreMiniute + "${minuteLabel}";
                    }
                    var pn = "<span class='td-item'>"+pos.barcode.partNumber+"</span>";
                    var posName = pos.shortPosName;
                    var btn = '<button class="btn yellow " id="btn'+pos.id+'" onclick="checkoutPos(\''+pos.id+'\');">' +
                            '<i class="fa fa-sign-out"></i><fmt:message key="button.checkout"/></button>';
                    table.row.add( [ reelId,pn,line,inStoreTime,posName, btn] );
                }
                table.order( [ 0, 'asc' ] ).draw();
            });
            $("#shelfInventory").modal("show");
        }

        $('#itemsTable').dataTable( {
            "searching": false,
            "info": false,
            paging: false,
            "order": [[ 1, "asc" ]]
        } );

        filterItems = function(searchStr){
            $(".theItems").children().each(function(){
                if(!searchStr || $(this).text().indexOf(searchStr) >= 0){
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
        };

        checkoutPos = function(posId){
            $("#outPosId").val(posId);
            $("#authErrorMsg").text("");
            $("#opUser").val("");
            $("#opUserConfirm").modal("show");
        }

        setInterval(function(){
            if($("#opUserConfirm").is(':visible')){
                if($("#opUser_keyboard").is(':visible')){
                    $("#opUser_keyboard input.ui-keyboard-preview").focus();
                }else{
                    $("#opUser").focus();
                }
            }else if($('#shelfInventory').is(':visible')) {
                if($("#filterInput_keyboard").is(':visible')){
                    $("#filterInput_keyboard input").focus();
                    searchStr = $("#filterInput_keyboard input").val();
                    filterItems(searchStr);
                }else{
                    $("#filterInput").focus();
                    var searchStr = $("#filterInput").val();
                    filterItems(searchStr);
                }
            }
            else{
                if($("#scan-code_keyboard").is(':visible')){
                    $("#scan-code_keyboard input").focus();
                }else{
                    $("#scan-code").focus();
                }
            }
        }, 1000);



        opUserOk = function(type){
            var opUser = $("#opUser").val();
            var outPosId = $("#outPosId").val();
            $.post("${ctx}/service/store/accshelf/checkOut", {cid:'${show}', opUser: opUser, outPosId: outPosId}, function (data) {
                if(data.indexOf("OK") == 0){
                    $("#opUserConfirm").attr("style","z-index:100000");
                    $("#opUserConfirm").modal("hide");
                    $("#opUserConfirm").attr("style","");
                    showMsg(data);
                }else{
                    $("#authErrorMsg").text(data);
                }

            }).error(function(){showMsg("request check out error");});
        }


        closeAllLights = function(){
            $.post("${ctx}/service/store/accshelf/op", {opKey: 'closeAll', opValue:'true', cid: '${show}'}, function (data) {
                showMsg(data);
                waitting();
            }).error(function(){showMsg("close all request error");});
        }

        checkAllPos = function(){
            $.post("${ctx}/service/store/accshelf/checkAll", {cid: '${show}'}, function (data) {
                showMsg(data);
                waitting();
            }).error(function(){showMsg("check all request error");});
        }
        toMinistock = function(){
            if(window.confirm('确定要一键发送到MiniStock 吗?')){
                $.post("${ctx}/service/store/accshelf/toMinistock", {cid: '${show}'}, function (data) {
                    showMsg(data);
                    waitting();
                }).error(function(){showMsg("to ministock request error");});
            }

        }


        $(".taskTable").html("");


        closeVolume = function(guid){
            $.post("${ctx}/service/store/ignoreAlarm", {guid: guid}, function (data) {
                $("#allPartNumbers").modal("hide");
                showMsg(data);
            }).error(function(){showMsg("ignore alarm request error");});
        }


        var rows = {};
        flushTable = function(){
            $.post("${ctx}/service/store/accshelf/getData", {cid: '${show}'}, function (data) {
                var msgShow = $("#msg").text();
                if(msgShow == 'request error'){
                    showMsg("");
                }

                $(".taskTable").html("");
                var newRows = [];
                //data = [{"key":"12-160023-0-8909000864","tableNo":2,"lineNo":12,"colorClass":"red","shelfLoc":"1-1-2","status":1,"guid":"ABCDEF"}];
                for(var item in data) {
                    var remainingTime = data[item];
                    var key = remainingTime.key;

                    newRows.push(key);
                    rows[key]=key;
                    var tableNo = "F";
                    if(remainingTime.tableNo == 2){
                        tableNo = "R";
                    }
                    var lineBoxId= remainingTime.lineNo+"-"+tableNo;
                    var lineBox = $("#"+lineBoxId);
                    if(lineBox.length > 0){

                    }else{
                        //不存在
                        var boxTemplate = $("#lineBoxTemplate");
                        lineBox = boxTemplate.clone();
                        lineBox.removeClass("hide");
                        lineBox.attr("id",lineBoxId);
                        lineBox.addClass("lineBox");
                        lineBox.find(".caption").text("Line:  "  +remainingTime.lineNo+"-"+remainingTime.tableNo)
                        boxTemplate.parent().append(lineBox);
                    }

                    var trColor = remainingTime.colorClass;
                    var tdColor = '';
                    var shelfLoc = remainingTime.shelfLoc;
                    if(trColor == 'red' && shelfLoc == ''){
                        trColor = '';
                        tdColor = 'red';
                        //Ecall大于2代表的含义：3触发叫料，4仓库下架，5运送中，6失败，7Ministock）
                        //0=failure,1=sending,2=waiting,3=success,4=pick,5=smed,6=ministock,7=notEnough,8=cancel,9=spliced
                        //修改为0=失败 1=发送中 2=待发需求 3=待收 4=接收 5=运送 6=MiniStock 7=不足 8=取消 9=已接料
                        var status = remainingTime.status;
                        if(status == 0){
                            shelfLoc = "${ecall_status_0}";
                        }else if(status == 1){
                            shelfLoc = "${ecall_status_1}";
                        }else if(status == 2){
                            shelfLoc = "${ecall_status_2}";
                        }else if(status == 3){
                            shelfLoc = "${ecall_status_3}";
                        }else if(status == 4){
                            shelfLoc = "${ecall_status_4}";
                        }else if(status == 5){
                            shelfLoc = "${ecall_status_5}";
                        }else if(status == 6){
                            shelfLoc = "${ecall_status_6}";
                        }else if(status == 7){
                            shelfLoc = "${ecall_status_7}";
                        }else if(status == 8){
                            shelfLoc = "${ecall_status_8}";
                        }else if(status == 9){
                            shelfLoc = "${ecall_status_9}";
                        }else{
                            shelfLoc = status;
                        }
                    }
                    var subSlotLabel = "${subslot_0}";
                    if(remainingTime.subslot == 1){
                        subSlotLabel = "${subslot_1}";
                    }

                    if(trColor == 'red' || tdColor == 'red'){
                        if(!remainingTime.ignoreAlarm){
                            var guid = remainingTime.guid;
                            shelfLoc = shelfLoc + "<span class='icon-volume-off right' onclick='closeVolume(\""+guid+"\");'></span>";
                        }
                    }

                    var trLine = $("#"+key);
                    var tdStr =
                        //"<td>"+remainingTime.lineNo+"</td>"+
                            "<td>"+remainingTime.partNo+"</td>"+
                            "<td>"+remainingTime.slot+"</td>"+
                            "<td>"+remainingTime.tableNo+"</td>"+
                            "<td>"+remainingTime.slotNum+"</td>"+
                            "<td>"+subSlotLabel+"</td>"+
                            "<td>"+remainingTime.remainingTime+"</td>"+
                            "<td style='background-color:"+tdColor+"'>"+shelfLoc+"</td>"+
                                //"<td>"+remainingTime.sendTimeStr+"</td>"+
                                //"<td>"+remainingTime.partTimeOnStr+"</td>"+
                                //"<td>"+remainingTime.status+"</td>"+
                            "";
                    if(trLine.length > 0){
                        //已存在,更新
                        trLine.html(tdStr);
                        trLine.attr("style","color:"+trColor);
                    }else{
                        var trStr = "<tr id='"+key+"' style='background-color:"+trColor+"'>" + tdStr +"</tr>";
                        lineBox.find(".taskTable").append(trStr);
                    }
                }

                for(var rowKey in rows){
                    if(newRows.indexOf(rowKey) < 0){
                        delete rows[rowKey];
                        $("#"+rowKey).remove();
                    }
                }
            }).error(function(){showMsg("request error");});
        }
        //flushTable();

        ///呆滞物料提醒
        var inactionAlarmWindow;
        flushInactionAlarm = function(){
            $.post("${ctx}/service/store/inactionAlarmMsg", {cid: '${show}'}, function (data) {
                var position = "bottom left";
                inactionAlarmWindow = showAlarmWindow(position, inactionAlarmWindow,"${inactionAlarmTitle}",data);
            });
        };



        function showAlarmWindow(position, alarmWindow, title, msg){
            var windowOptions = {
                delay: false,
                position: position,
                closeOnClick: false,
                sound: false,
                title: title,
                closable: false,
                messageHeight:null,
                icon:false,
                size: 'normal',
            };

            if(msg == ''){//无报警,清除报警框
                if(alarmWindow){
                    alarmWindow.remove();
                    alarmWindow = null;
                }
            }else{
                if(!alarmWindow){
                    windowOptions.msg = msg;
                    alarmWindow =Lobibox.notify('warning', windowOptions);
                }else{

                    //if(alarmWindow.$el){
                        alarmWindow.$el.find(".lobibox-notify-msg").html(msg);
                    //}

                }
            }
            return alarmWindow;
        }

        setInterval(function(){
            testNet();
            flushTable();
            flushInactionAlarm();
        }, 1000);

        var netErrorWindow;
        testNet = function(){
            var ajaxTimeoutTest = $.ajax({

                url:'${ctx}/service/store/testNet',  //请求的URL

                timeout : 200, //超时时间设置，单位毫秒

                type : 'get',  //请求方式，get或post

                data :{},  //请求所传参数，json格式

                dataType:'json',//返回的数据格式

                success:function(data){ //请求成功的回调函数
                    var position = "top left";
                    netErrorWindow = showAlarmWindow(position, netErrorWindow,"","");

                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    var position = "top left";
                    netErrorWindow = showAlarmWindow(position, netErrorWindow,"Network Error","Request error");
                },

                complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数

                    if(status=='timeout'){//超时,status还有success,error等值的情况
                        ajaxTimeoutTest.abort();
                        var position = "top left";
                        netErrorWindow = showAlarmWindow(position, netErrorWindow,"Network Error","${networkFailed}");
                    }

                }

            });
        }

        setInterval(function(){
            flushTable();
            flushInactionAlarm();
        }, 1000);

        waitting = function(){
            Metronic.blockUI({
                iconOnly: true,
                overlayColor: '#4b8df8'
            });


            window.setTimeout(function() {
                Metronic.unblockUI();
            }, 1500);

        }
    </script>
</c:set>