<%@ 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;
    }
    .td-item{
         display: block;
    }

</style>
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
    <fmt:message key="DN单"/>
</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="DN单号"/></label>

                        <div class="col-md-2">
                            <div style="text-align:left" class="input-group">
                                <input type="text" name="dnNo" class="form-control" value="${dnNo}"/>
                            </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="dnInfo">
                    <display:column titleKey="DN单号" sortable="true" sortProperty="dnNo">
                        <a href="#" onclick="showDetail('${dnInfo.dnNo}')">${dnInfo.dnNo}</a>
                    </display:column>
                    <display:column titleKey="时间" sortable="true" sortProperty="createDate">
                        <fmt:formatDate value="${dnInfo.createDate}" pattern="yyyy-MM-dd HH:mm"/>
                    </display:column>

                </display:table>

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

<div id="detail" 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="detailTitle">&nbsp</span>
                </h4>
                <input type="text" class="form-control filterInput" id="filterStr"/>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-hover" id="itemsTable">
                    <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            <fmt:message key="barcode.partNumber"/>
                        </th>
                        <th>
                            <fmt:message key="Facility"/>
                        </th>
                        <th>
                            <fmt:message key="Company"/>
                        </th>
                        <th>
                            <fmt:message key="已收/扫描"/>
                        </th>
                        <th>
                            <fmt:message key="已收/DN单数量"/>
                        </th>

                        <th>
                            <fmt:message key="差异"/>
                        </th>

                        <th>
                            <fmt:message key="日期"/>
                        </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(){
            showDetail = function(dnNo){
                $(".filterInput").val("");
                $("#detailTitle").html(dnNo);
                $.post("${ctx}/service/store/qisda/dnDetail", {dnNo: dnNo}, function (dnInfo) {
                    var itemHtml = "";
                    var data = dnInfo.items;
                    var table = $('#itemsTable').DataTable();
                    table.clear();

                    for(var i in data){
                        var index = parseInt(i) + 1;
                        var dnQty = data[i].dnQty;
                        var inQty = data[i].inQty;
                        var diff = inQty - dnQty;
                        var diffColor = "";
                        if(diff < 0){
                            diffColor = "bg-red";
                        }else if(diff > 0){
                            diffColor = "bg-yellow";
                        }
                        var diffInfoStr = "<span class='"+diffColor+" td-item'>"+diff+"</span>";

                        var scanNum = data[i].scanNum;
                        var inNum = data[i].inNum;

                        table.row.add( [ index, data[i].pn, data[i].facility, data[i].company, inNum+"/"+scanNum,inQty+"/"+dnQty,diffInfoStr,data[i].dnDateStr] );
                    }
                    table.order( [ 0, 'asc' ] ).draw();

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

            $('#itemsTable').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>