<%@ 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;
    }

    .table-scrollable{
        overflow-y: auto;
    }

</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">
        <input type="text" class="form-control" id="scan-code"/>
    </div>
    <div class="col-md-6 col-sm-6">
        <div class="alert alert-success" id="msg">&nbsp;
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 col-sm-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box blue">
            <div class="portlet-title">

                <div class="caption">
                    ${storage.name}
                </div>

                <div class="actions">

                    <button type="button" class="btn btn-fit-height default"  onclick="checkAllPos();">
                        <fmt:message key="shelf.btn.posCheck"/>
                    </button>
                    <button type="button" class="btn btn-fit-height default"  onclick="closeAllLights();">
                        <fmt:message key="shelf.btn.closeAll"/>
                    </button>

                    <button type="button" class="btn btn-fit-height yellow" onclick="showPartNumbers();">
                        <i class="fa fa-sign-out"></i><fmt:message key="button.checkout"/>
                    </button>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-scrollable" style="height:400px;">
                    <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="barcode.barcode"/></th>
                            <th><fmt:message key="barcode.partNumber"/></th>
                            <th><fmt:message key="checkOut.pos"/></th>
                            <th><fmt:message key="dataLog.type"/></th>
                            <th><fmt:message key="dataLog.status"/></th>
                            <th><fmt:message key="dataLog.date"/></th>
                        </tr>
                        </thead>
                        <tbody class="dataTable">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
</div>

<div id="allPartNumbers" 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" id="modal-title" style="font-weight: 500;"><fmt:message key="button.checkout"/> </h4>
                <input type="text" class="form-control" id="searchPn"/>
            </div>
            <div class="modal-body">
                <div class="row" id="partNumberItems">
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <div class="bg-blue-madison partnumber-box">xxx</div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <div id="footerBtn">
                    <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="lastPage()" id="lastPage">
                        <fmt:message key="allBoxView.lastPage"/></button>
                    <button type="button" class="btn green" onclick="nextPage()" id="nextPage">
                        <fmt:message key="allBoxView.nextPage"/></button>
                </div>
                <%--<button type="button" data-dismiss="modal" class="btn default" id="cancelAuthBtn">取消</button>--%>
            </div>
        </div>
    </div>
</div>

<div id="sizeConfirm" 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;"><fmt:message key="shelf.size.title"/></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <c:forEach items="${storage.usageMap}" var="usageEntry">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                            <div class="bg-blue-madison partnumber-box psizeBox">${usageEntry.value.sizeStr}</div>
                        </div>
                    </c:forEach>
                </div>
            </div>
            <div class="modal-footer">
                <%--<button type="button" data-dismiss="modal" class="btn default" id="cancelAuthBtn">取消</button>--%>
            </div>
        </div>
    </div>
</div>


<fmt:message key="op.1" var="op.1"/>
<fmt:message key="op.2" var="op.2"/>

<fmt:message key="inOutList.in" var="in_label"/>
<fmt:message key="inOutList.out" var="out_label"/>


<fmt:message key="op.status.wait" var="op_status_wait"/>
<fmt:message key="op.status.executing" var="op_status_executing"/>
<fmt:message key="op.status.pause" var="op_status_pause"/>
<fmt:message key="op.status.finished" var="op_status_finished"/>
<fmt:message key="op.status.cancel" var="op_status_cancel"/>
<fmt:message key="op.status.end" var="op_status_end"/>

<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(msg.indexOf("0") == 0){
                    error = false;
                    msg = msg.substr(1);
                }
                if(msg.indexOf("x") == 0){
                    msg = msg.substr(1);
                }
                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) {
                showMsg(data);
                if(data.indexOf("x") == 0){
                    //弹框,添加=7x8=尺寸信息后重新请求
                    $("#sizeConfirm").modal("show");
                }
            });
        });

        $(".psizeBox").click(function(){
            $("#sizeConfirm").modal("hide");
            var codeValue = $("#scan-code").attr("placeholder");
            var sizeStr = $(this).text();
            if(codeValue){
                var newCodeStr = "="+sizeStr+"="+codeValue;
                $.post("${ctx}/service/store/accShelf/putInCode", {cid: '${show}', code: newCodeStr}, function (data) {
                    showMsg(data);
                });
            }
        });


        setInterval(function(){
            if($('#allPartNumbers').is(':visible')) {
                $("#searchPn").focus();
            }else{
                $("#scan-code").focus();
            }
        }, 1000);




        //页码从0开始
        var pageIndex = 0;
        var partNumberItems = [];
        var itemPerPage = 12;

        var bgColors = ["bg-blue-madison","bg-green-haze","bg-purple-plum","bg-red-intense","bg-green","bg-yellow","bg-blue","bg-red","bg-purple","bg-blue-ebonyclay","bg-red-sunglo","bg-yellow-crusta"];

        showPartNumbers = function(type){

            var findAndOutHref = '${ctx}/component/storagePosFind.html';
            $("#findAndOut").attr("href",findAndOutHref);
            $("#searchPn").val("");

            $.post("${ctx}/service/store/storageTypeInventory", {type: type, cid: '${show}'}, function (data) {
                pageIndex = -1;
                partNumberItems = data;
                nextPage();
            });
        }

        nextPage=function(){
            pageIndex ++ ;
            pageShow();
        }

        lastPage = function(){
            pageIndex -- ;
            pageShow();
        }

        disableBtn = function(){
            $("#lastPage").show();
            $("#nextPage").show();
            $("#footerBtn").show();
            //上一页不可用
            if(pageIndex <= 0){
                $("#lastPage").addClass("disabled");
            }else{
                $("#lastPage").removeClass("disabled");
            }
            var totalPage = Math.ceil(partNumberItems.length/itemPerPage);
            if(pageIndex + 1 >= totalPage - 1){
                $("#nextPage").addClass("disabled");
            }else{
                $("#nextPage").removeClass("disabled");
            }
            if(totalPage <= 1){
                $("#lastPage").hide();
                $("#nextPage").hide();
            }
        }

        pageShow = function(){
            var itemStr = "";
            var endIndex = itemPerPage * (pageIndex+1);
            if(endIndex > partNumberItems.length){
                endIndex = partNumberItems.length;
            }
            for(var index = itemPerPage * pageIndex;index<endIndex;index++){
                var pn = partNumberItems[index].partNumber;
                itemStr = itemStr + "<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12' onclick='checkoutByPartNumber(\""+pn+"\");'> " +
                        "<div class='"+bgColors[index%itemPerPage]+" partnumber-box'>"+pn+"</div></div>";
            }
            if(itemStr == ""){
                itemStr = "<div style='font-size: 20px;text-align: center;'>${noReel_label}</div>";
            }
            $("#partNumberItems").html(itemStr);
            disableBtn();
            $("#allPartNumbers").modal("show");
        }

        $("#searchPn").on('input propertychange',function(){
            FilterPnItems();
        });

        function FilterPnItems(){
            $("#lastPage").hide();
            $("#nextPage").hide();
            var itemStr = "";
            var pnForSearch = $("#searchPn").val();
            if(pnForSearch == ""){
                pageShow();
                return;
            }

            $.post("${ctx}/service/store/resolveBarcode", {code: pnForSearch}, function (data) {
                var thePn = pnForSearch;
                if (data.error == null) {
                    thePn = data.barcode.partNumber;
                }
                for(var index in partNumberItems){
                    var pn = partNumberItems[index].partNumber;
                    if(pn.indexOf(thePn) >= 0){
                        itemStr = itemStr + "<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12' onclick='checkoutByPartNumber(\""+pn+"\");'> " +
                                "<div class='"+bgColors[index%itemPerPage]+" partnumber-box'>"+pn+"</div></div>";
                    }
                }
                if(itemStr == ""){
                    itemStr = "<div style='font-size: 20px;text-align: center;'>${noReel_label}</div>";
                }
                $("#partNumberItems").html(itemStr);
            });


        }

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

        checkAllPos = function(){
            $.post("${ctx}/service/store/accShelf/checkAll", {cid: '${show}'}, function (data) {
                showMsg(data);
                waitting();
            });
        }


        checkoutByPartNumber = function(partnumber) {
            $.post("${ctx}/service/store/checkout.html", {pn: partnumber, cid: '${show}',cl:'0'}, function (data) {
                $("#allPartNumbers").modal("hide");
                showMsg(data);
                waitting();
            });
        }


        function updateTasks(cid,seconds){
            //任务列表
            $.post("${ctx}/service/store/tasks", {cid: cid, seconds:seconds}, function (data) {
                $(".dataTable").html("");
                for(var item in data){

                    var taskId = data[item].id;
                    var partNumber = data[item].partNumber;
                    var barcode = data[item].barcode;
                    var posStr = data[item].posStr;
                    var typeStr = "${in_label}";

                    if(data[item].type == 2){//出库
                        typeStr = "${out_label}";
                    }

                    var statusStr = "";
                    if(data[item].cancel){
                        statusStr ="${op_status_cancel}";
                    } else if(data[item].executing){
                        statusStr ="${op_status_executing}";
                    }else if(data[item].finished){
                        statusStr ="${op_status_finished}";
                    }else if(data[item].wait){
                        statusStr ="${op_status_wait}";
                    }else if(data[item].end){
                        statusStr ="${op_status_end}";
                    }

                    var dateStr = data[item].updateDateStr;

                    var tdStr =
                            "<td>"+barcode+"</td>"+
                            "<td>"+partNumber+"</td>"+
                            "<td>"+posStr+"</td>"+
                            "<td>"+typeStr+"</td>"+
                            "<td><span class='label label-sm label-"+data[item].status.toLowerCase()+"'>"+statusStr+"</span></td>"+
                            "<td>"+dateStr+"</td>";
                    var trStr = "<tr>" + tdStr+ "</tr>";
                    $(".dataTable").append(trStr);
                }

            });
        }



        //updateTasks('${show}',-10*60);
       setInterval(function(){
            updateTasks('${show}',-10*60);
        }, 1000);

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


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

        }
    </script>
</c:set>