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


<h3 class="page-title">
    <c:if test="${type == 1}">
        <fmt:message key="menu.box.liteBox"/>
    </c:if>

    <c:if test="${type != 1}">
        <fmt:message key="menu.box.boxi"/>
    </c:if>
</h3>

<div class="row">
    <div class="col-md-12" style="padding-left:0px;">
        <div class="clearfix">
        </div>
        <div class="row">
            <div class="col-md-12" >
                <div class="dashboard-stat blue-steel" id="box" style="margin-bottom: 0">
                    <div class="more" style="height: 50px;opacity: 1;padding-top:24px;">

                            <span id="msgTxt" style="color:#ffff00;line-height: 50px;font-size: 20px; ">

                            </span>
                    </div>
                    <div class="details">
                        <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/>
                <input style="width: 1%;right:-500px;position: fixed;" type="text">
            </div>
        </div>
        <!-- BEGIN PAGE CONTENT-->
        <div class="row">
            <div class="col-md-12">

                <!-- BEGIN EXAMPLE TABLE PORTLET-->
                <div class="portlet box green-haze">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-list-alt"></i><fmt:message key="virtualStorage.taskList"/>
                        </div>

                        <c:if test="${not empty virtualStorage}">
                            <div class="actions">
                                <a href="storageView.html?id=${virtualStorage.id}" class="btn btn-default btn-sm">
                                    <i class="fa fa-list"></i> <fmt:message key="virtualStorage.positionList"/> </a>
                            </div>
                        </c:if>
                    </div>
                    <div class="portlet-body">
                        <table id="logTable"
                               class="table table-striped table-hover table-bordered dataTable no-footer" role="grid"
                               aria-describedby="sample_editable_1_info">
                            <thead>
                            <tr>
                                <th><fmt:message key="dataLog.storageName"/></th>
                                <th><fmt:message key="dataLog.type"/></th>
                                <th><fmt:message key="dataLog.status"/></th>
                                <th><fmt:message key="dataLog.orderSource"/></th>
                                <th><fmt:message key="dataLog.partNumber"/></th>
                                <th><fmt:message key="barcode.barcode"/></th>
                                <th><fmt:message key="inOutList.operate"/></th>
                            </tr>
                            </thead>
                        </table>

                    </div>
                </div>
                <!-- END EXAMPLE TABLE PORTLET-->
            </div>
        </div>
        <!-- END PAGE CONTENT-->
    </div>
</div>

<fmt:message var="opType1" key="op.1"/>
<fmt:message var="opType2" key="op.2"/>
<fmt:message var="cancelMsg" key="op.status.cancel"/>
<fmt:message var="waitMsg" key="op.status.wait"/>
<fmt:message var="executingMsg" key="op.status.executing"/>
<fmt:message var="finishedMsg" key="op.status.finished"/>

<c:set var="scripts" scope="request">
    <script>

        jQuery(document).ready(function () {

            $("#scan-code").change(function (){
                $("#statusTxt").html("");
                var codeValue = $(this).val();
                //TCL的条码规则:用*号隔开,[物料编号]*[数量]*[供应商编号]*[批次]*[日期码]*[Reel Id]
                //Reel Id 的前六位是供应商编号
                $(this).attr("placeholder",codeValue);
                $(this).val("");
                postToServer("${aid}",codeValue);
            })

            function postToServer(areaId, barcode){
                $.post("${ctx}/service/store/scanCodeForManual", {aid: areaId,bc:barcode}, function (data) {
                    $("#statusTxt").html(data);
                });
            }

            var logTable = $('#logTable').DataTable({
                "paging":   false,
                "ordering": false,
                "info":     false,
                searching: false
            } );


            var opTypeMsg={
                "1":"${opType1}",
                "2":"${opType2}"
            };
            var statusMsg={
                "cancelMsg":"${cancelMsg}",
                "finishedMsg":"${finishedMsg}",
                "waitMsg":"${waitMsg}",
                "executingMsg":"${executingMsg}"
            }


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

            var manualIds = new Array();

            <c:forEach items="${manualStorageIds}" var="storageId">
                manualIds.push("${storageId}");
            </c:forEach>

            function updateTasks(){
                var virtualStorageId = "${virtualStorage.id}";
                //任务列表
                $.post("${ctx}/service/store/tasks", {aid: "${aid}"}, function (data) {
                    logTable.clear().draw();
                    for(var item in data){

                        if($.inArray(data[item].storageId, manualIds)>=0){
                            var status = data[item].status.toLowerCase();
                            var operate = "";
                            if(data[item].wait){
                                operate = '<a class="btn btn-xs default" href="#" onclick=cancelTask('+data[item].id+');><i class="fa fa-trash-o"></i> 取消 </a>';
                            }
                            logTable.row.add( [
                                data[item].posStr,
                                opTypeMsg[data[item].type],
                                "<span class='label label-sm label-"+status+"'>"+statusMsg[status+'Msg']+"</span>",
                                data[item].partNumber,
                                data[item].barcode,
                                data[item].sourceStr,
                                operate
                            ] ).draw( false );
                        }
                    }
                });
            }

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

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