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

<style type="text/css">

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

</style>
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
    <fmt:message key="menu.workOrder"/>
</h3>


<!-- BEGIN PAGE CONTENT-->
<div class="row">
    <div class="col-md-12">

        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-list-alt"></i>
                </div>
            </div>
            <div class="portlet-body">
                <form id="searchCriteria" class="form-horizontal form-bordered" action="" method="post">
                    <div class="form-group">

                        <label class="control-label col-md-1"><fmt:message key="workOrder.name"/></label>

                        <div class="col-md-2">
                            <div style="text-align:left" class="input-group">
                                <input type="text" name="orderNo" class="form-control" value="${orderNo}"/>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <button class="btn purple" type="submit"><i class="fa fa-search"></i>
                                <fmt:message key="button.search"/>
                            </button>
                        </div>
                    </div>

                </form>
                <display:table name="searchCriteria.pageList" requestURI=""
                               sort="external"
                               defaultsort="1" class="table table-striped table-bordered table-hover" export="false" id="liteOrder">
                    <display:column titleKey="workOrder.name" sortable="true" sortProperty="orderNo">
                        <a href="#" onclick="showOrderDetail('${liteOrder.orderNo}')">${liteOrder.orderNo}</a>
                    </display:column>
                    <display:column titleKey="workOrder.date" sortable="true" sortProperty="createDate">
                        <fmt:formatDate value="${liteOrder.createDate}" pattern="yyyy-MM-dd HH:mm"/>
                    </display:column>

                </display:table>

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

<div id="orderDetail" 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="orderDetailTitle">&nbsp</span>
                </h4>
                <input type="text" class="form-control filterInput" id="searchOrderItemPn"/>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-hover" id="orderItemsTable">
                    <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            <fmt:message key="barcode.partNumber"/>
                        </th>
                        <th>
                            <fmt:message key="checkOut.pos"/>
                        </th>
                        <th>
                            <fmt:message key="component.amount"/>
                        </th>
                        <th>
                            <fmt:message key="order.inventory"/>
                        </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>

<c:set var="scripts" scope="request">
    <script type="text/javascript">
        $(document).ready(function(){
            showOrderDetail = function(orderNo){
                $("#orders").modal("hide");
                $(".filterInput").val("");
                $("#orderDetailTitle").html(orderNo);
                $.post("${ctx}/service/store/orderDetail", {orderNo: orderNo}, function (order) {
                    var itemHtml = "";
                    var data = order.orderItems;
                    var table = $('#orderItemsTable').DataTable();
                    table.clear();

                    for(var i in data){
                        table.row.add( [ i, data[i].pn, data[i].feederInfo,data[i].outNum+"/"+data[i].needNum,data[i].inventoryNum] );
                    }
                    table.order( [ 3, 'asc' ] ).draw();

                });
                $("#orderDetail").modal("show");
            }

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

            $(".filterInput").on('input propertychange',function(){
                var searchStr = $(this).val();
                $(".theItems").children().each(function(){
                    if(!searchStr || $(this).text().indexOf(searchStr) >= 0){
                        $(this).show();
                    }else{
                        $(this).hide();
                    }
                });
            });

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