<%@ 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="需求单"/>
</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="${ctx}/qisda/outInfoSearch.html" method="post">
                    <div class="form-group">

                        <label class="control-label col-md-1"><fmt:message key="需求单号"/></label>

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

                        <label class="control-label col-md-1"><fmt:message key="工单号"/></label>

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

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

                        <div class="col-md-2">
                            <div style="text-align:left" class="input-group">
                                <input type="text" name="reelId" class="form-control" value="${reelId}"/>
                            </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="outInfo">
                    <display:column titleKey="需求单号" sortable="true" sortProperty="hSerial">
                        <a href="#" onclick="showDetail('${outInfo.hSerial}')">${outInfo.hSerial}</a>
                    </display:column>
                    <display:column titleKey="动作" property="action" sortable="true" sortProperty="action"/>
                    <display:column titleKey="工单" property="so" sortable="true" sortProperty="so"/>
                    <display:column titleKey="备料单号" property="refno" sortable="true" sortProperty="refno"/>
                    <display:column titleKey="建议出仓时间" sortable="true" sortProperty="sdate">
                        <fmt:formatDate value="${outInfo.sdate}" pattern="yyyy-MM-dd HH:mm"/>
                    </display:column>
                    <display:column titleKey="必须出仓日期" sortable="true" sortProperty="mdate">
                        <fmt:formatDate value="${outInfo.mdate}" pattern="yyyy-MM-dd HH:mm"/>
                    </display:column>

                    <display:column titleKey="任务" sortable="true" sortProperty="mdate">
                        ${outInfo.taskFinishNum}/${outInfo.taskNum}
                    </display:column>
                    <display:column titleKey="创建时间" sortable="true" sortProperty="createDate">
                        <fmt:formatDate value="${outInfo.createDate}" pattern="yyyy-MM-dd HH:mm"/>
                    </display:column>

                    <display:column titleKey="checkOut.operate" media="html">
                        <c:if test="${outInfo.sendStatus != 2 && outInfo.taskNum == 0}">
                            <button class="btn yellow" id="btn${outInfo.hSerial}"
                                    onclick="executeOut('${outInfo.hSerial}')">
                                <i class="fa fa-sign-out"></i><fmt:message key="button.checkout"/></button>
                        </c:if>
                    </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>
                            <fmt:message key="料站序号"/>
                        </th>
                        <th>
                            <fmt:message key="料站"/>
                        </th>
                        <th>
                            <fmt:message key="barcode.partNumber"/>
                        </th>
                        <th>
                            <fmt:message key="Facility"/>
                        </th>

                        <th>
                            <fmt:message key="reelID"/>
                        </th>
                        <th>
                            <fmt:message key="分盘料"/>
                        </th>

                        <th>
                            <fmt:message key="数量"/>
                        </th>
                        <th>
                            <fmt:message key="已绑定"/>
                        </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(hSerial){
                $(".filterInput").val("");
                $("#detailTitle").html(hSerial);
                $("#theItems").html("");
                $.post("${ctx}/service/store/qisda/outDetail", {hSerial: hSerial}, function (outInfo) {

                    $("#detailTitle").html("需求单: "+ outInfo.hSerial + "  工单: " + outInfo.so + "  ["+outInfo.action+"]");
                    var data = outInfo.outItems;
                    var table = $('#itemsTable').DataTable();
                    table.clear();

                    for(var i in data){
                        //var index = parseInt(i) + 1;
                        var isFirstReelAction = data[i].firstReelAction;
                        var outColor = "bg-red";
                        if(data[i].outOk){
                            outColor = "bg-green";
                        }
                        var outQty = "<span class='"+outColor+" td-item'>"+data[i].outQty+"</span>";

                        var sendColor = "bg-red";
                        if(data[i].itemEnd){
                            sendColor = "bg-green";
                        }
                        var sendQty = "<span class='"+sendColor+" td-item'>"+data[i].sendQty+"</span>";

                        var realLockColor = "bg-red";
                        if(data[i].bindOk){
                            realLockColor = "bg-green";
                        }
                        var lockQty = data[i].realLockQty;
                        if(data[i].reelCutAction){
                            //分盘料,展示绑定/预绑定
                            lockQty = lockQty + "/" + data[i].lockQty;
                        }
                        var realLockQty = "<span class='"+realLockColor+" td-item'>"+lockQty+"</span>";


                        table.row.add( [ /*index,*/ data[i].slotlocation, data[i].slotStr, data[i].pn, data[i].facility,data[i].reelID,data[i].reelcut,data[i].qty,realLockQty,outQty,sendQty] );
                    }
                    table.order( [ 0, 'asc' ] ).draw();

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

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

            executeOut = function (hSerial){
                $("#btn"+hSerial).attr("disabled","true");
                $.post("${ctx}/rest/api/qisda/executeOut", {hSerial: hSerial}, function (data) {
                    alert(data);
                });
            }

            $(".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>