<%@ 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">
                    手动入库到 <input type="text" class="form-control" id="posName"/>
                </div>

                <div class="actions">
                </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>



<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("");
            var posName = $("#posName").val();
            $(this).attr("placeholder", codeValue);
            $.post("${ctx}/service/store/manual/putIn", {pos: posName, code: codeValue}, function (data) {
                if(data.code == 0){
                    $("#posName").val(data.data);
                    showMsg("OK"+data.msg);
                }else{
                    showMsg(data.msg);
                }

            });
        });




        setInterval(function(){
            //$("#scan-code").focus();
        }, 1000);







        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('',-10*60);
        }, 1000);

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


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

        }
    </script>
</c:set>