<%@ 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="线别"/></label>
                            <div class="col-md-1">
                                <select class="form-control" name="line">
                                    <option value="">所有</option>
                                    <option value="NONE" <c:if test='${line=="NONE"}'>selected</c:if>>未定义</option>
                                    <c:forEach begin="1" end="20" var="lineStr">
                                        <c:set var="lineValue" value="SMT${lineStr}"/>
                                        <option value="${lineValue}" <c:if test='${line == lineValue}'>selected</c:if>>${lineValue}</option>
                                    </c:forEach>
                                </select>
                            </div>

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

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

                            <div class="col-md-1">
                                <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="true" id="outInfo">
                        <display:setProperty name="export.csv.filename" value="outInfo.csv" />
                        <c:set var="endOutInfoClass" value=""/>
                        <c:if test="${outInfo.endOutInfo}">
                            <c:set var="endOutInfoClass" value="bg-yellow"/>
                        </c:if>
                        <display:column titleKey="需求单号" sortable="true" sortProperty="hSerial" media="html">
                            <a href="#" onclick="showDetail('${outInfo.hSerial}')">${outInfo.hSerial}</a>
                        </display:column>
                        <display:column titleKey="需求单号" property="hSerial" sortable="false" media="csv"/>
                        <display:column titleKey="动作" property="action" sortable="true" sortProperty="action" class="${endOutInfoClass}"/>
                        <display:column titleKey="工单" sortable="true" sortProperty="so">
                            ${outInfo.so}<c:if test="${outInfo.soseq != null}">(${outInfo.soseq})</c:if>
                        </display:column>
                        <display:column titleKey="线别" sortable="true" sortProperty="line" media="html">
                            <span id="${outInfo.hSerial}Line">${outInfo.line}</span>
                            <c:if test="${outInfo.firstExecuteTime <=0}">
                                [<a href="#" onclick="changeLine('${outInfo.hSerial}')">编辑</a>]
                            </c:if>

                        </display:column>
                        <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="taskNum">
                            ${outInfo.taskFinishNum}/${outInfo.taskNum}
                        </display:column>

                        <display:column titleKey="绑定数量" sortable="true" sortProperty="totalBindNum">
                            ${outInfo.totalBindNum}
                        </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="更新时间" sortable="true" sortProperty="updateDate">
                            <fmt:formatDate value="${outInfo.updateDate}" pattern="yyyy-MM-dd HH:mm"/>
                        </display:column>

                        <display:column titleKey="需求时间" sortable="true" sortProperty="taskNeedOutDate">
                            <fmt:formatDate value="${outInfo.taskNeedOutDate}" pattern="yyyy-MM-dd HH:mm"/>
                        </display:column>

                        <display:column titleKey="checkOut.operate" media="html" sortProperty="sendStatus" sortable="true">
                            <c:if test="${!outInfo.executing && stopJob}">
                                <c:if test="${(outInfo.urgentAction && outInfo.taskFinishNum != outInfo.taskNum) || (!outInfo.sendEnd && !outInfo.closed)}">
                                    <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>
                            </c:if>
                            <%--<c:if test="${!outInfo.sendEnd && !outInfo.closed && !outInfo.executing}">--%>
                                <%--<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>

<div id="lineModifyWindow" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="margin-top: 10%;width:50%;margin-left:25%;">
        <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="font-weight: 500;">线别修改</h4>
            </div>
            <div class="modal-body" style="height:80px;overflow-y:hidden;">
                <div class="row">

                    <label class="control-label col-md-2"><fmt:message key="线别:"/></label>
                    <div class="input-group">
                        <input type="hidden" id="hSerialToModify" value=""/>
                        <select class="form-control" id="lineToModify">
                            <option value="">--</option>
                            <c:forEach begin="1" end="20" var="line">
                                <option value="SMT${line}">SMT${line}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <h4>
                        <span id="lineErrorMsg" style="font-weight: 500;color:red;"></span>
                    </h4>

                </div>
            </div>
            <div class="modal-footer">
                <div>
                    <%--<a href="" class="btn yellow left" id="findAndOut"><i class="fa fa-sign-out"></i><fmt:message key="allBoxView.findAndOut"/></a>--%>

                    <button type="button" class="btn green" onclick="lineModifyOkClick();" >
                        <fmt:message key="button.save"/></button>
                    <button type="button" data-dismiss="modal" class="btn default" id="cancelAuthBtn"><fmt:message key="button.cancel"/></button>
                </div>
            </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/dcs/executeOut", {hSerial: hSerial}, function (data) {
                    alert(data);
                });
            }

            changeLine = function (hSerial){
                $("#hSerialToModify").val(hSerial);
                var oldLine = $("#lineToModify").text();
                $("#lineToModify").val(oldLine);
                $("#lineModifyWindow").modal("show");
            }

            lineModifyOkClick = function(){
                var line = $("#lineToModify").val();
                var hSerial = $("#hSerialToModify").val();
                $.post("${ctx}/rest/api/dcs/updateLine", {hSerial: hSerial, line: line}, function (data) {
                    $("#"+hSerial+"Line").html(line);
                    $("#lineModifyWindow").modal("hide");
                });
            }


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