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

<style>
    .ui-autocomplete{

        z-index: 111111;

    }
</style>
<h3 class="page-title">
    <fmt:message key="menu.box.virtualStorage"/>
</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/scanCodeForVirtual", {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('取消成功');
                }
            });
        }

        function updateTasks(){
            var virtualStorageId = "${virtualStorage.id}";
            //任务列表
            $.post("${ctx}/service/store/tasks", {aid: "${aid}"}, function (data) {
                logTable.clear().draw();
                for(var item in data){
                    if(data[item].storageId == virtualStorageId){
                        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>