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




<link rel="stylesheet" type="text/css" href="${ctx}/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css"/>

<link href="${ctx}/assets/global/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
<link href="${ctx}/assets/global/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>

<style>
    td{
        padding:6px;
    }
    .btn-sm{
        padding: 1px 10px 1px 10px;
    }
    .ui-autocomplete{

        z-index: 111111;

    }
</style>
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
    <fmt:message key="menu.order.management"/>
</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><fmt:message key="feeder.search.subtitle"/>
                </div>

                <%-- 站位列表上传权限--%>
                <security:authorize ifAnyGranted="ROLE_MANAGE_FEEDER">
                    <%--<div class="actions">--%>
                        <%--<a href="#" class="btn btn-default btn-sm" id="AddNewBtn">--%>
                            <%--<i class="fa fa-plus"></i> <fmt:message key="button.add"/> </a>--%>
                    <%--</div>--%>
                </security:authorize>
            </div>
            <div class="portlet-body">

                <div class="table-toolbar">


                    <div class="tiles">
                        <c:forEach items="${lines}" var="feedLine">
                            <div class="tile bg-blue" style="height: 60px;width: 60px !important;">
                                <a href="${ctx}/workOrder/feederSearch.html?aid=${aid}&line=${feedLine}">
                                    <div class="tile-body" style="font-size: 30px;text-align: center;line-height: 35px;">
                                            ${feedLine}
                                    </div>
                                </a>
                            </div>
                        </c:forEach>
                    </div>
                </div>



                <div class="table-toolbar">

                    <div class="tiles">
                        <div class="form-group">
                            <label class="control-label col-md-2"><fmt:message key="feeder.name"/></label>

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

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

                <div class="table-scrollable">

                <display:table name="searchCriteria.pageList" cellspacing="0" cellpadding="0" requestURI=""
                               sort="external"
                               defaultsort="1" class="table table-striped table-bordered table-hover" export="false" id="feeder">
                    <display:column titleKey="feeder.name" sortProperty="name" sortable="true">
                        <a href="feederView.html?fid=${feeder.id}"><span id="feederName${feeder.id}">${feeder.name}</span></a>
                    </display:column>
                    <display:column titleKey="feeder.line" sortable="true" sortProperty="line" property="line"/>
                <display:column titleKey="menu.batch.specifiedBatch" sortable="true" sortProperty="specifiedBatchInfo" property="specifiedBatchInfo"/>
                    <display:column titleKey="feeder.amount" sortable="true" sortProperty="amount" property="amount"/>
                    <display:column titleKey="feeder.posNum" sortable="true" sortProperty="posNum" property="posNum"/>
                    <%--<display:column titleKey="任务" sortable="true" sortProperty="finishOpNum">--%>
                        <%--${feeder.finishOpNum}/${feeder.opNum}--%>
                    <%--</display:column>--%>
                    <display:column titleKey="specifiedBatch.status">
                        <span class='label label-sm label-${fn:toLowerCase(feeder.status)}' id="status${feeder.id}"><fmt:message key="op.status.${fn:toLowerCase(feeder.status)}"/></span>
                    </display:column>
                    <display:column titleKey="feeder.createDate" sortProperty="createDate" sortable="true">
                        <fmt:formatDate value="${feeder.createDate}" pattern="yyyy-MM-dd HH:mm"/>
                    </display:column>
                        <display:column title="">
                            <security:authorize ifAnyGranted="ROLE_MANAGE_STACK_OUT">

                                <c:if test="${!feeder.wait && !feeder.executing}">
                                    [<a href="#" onclick="assignBatch('${feeder.id}')"><fmt:message key="menu.batch.specifiedBatch"/></a>]
                                </c:if>
                                <c:if test="${feeder.wait || feeder.executing}">
                                    [<a href="#" onclick="cancelTaskSet('${feeder.areaId}','${feeder.key}')"><fmt:message key="button.cancel"/></a>]
                                </c:if>
                            </div>
                        </security:authorize>
                            <security:authorize ifAnyGranted="ROLE_MANAGE_FEEDER">

                            <c:if test="${!feeder.end && !feeder.wait && !feeder.executing}">
                                <button class="btn btn-sm default" type="button" id="end${feeder.id}" onclick="endFeeder('${feeder.id}')"><i
                                        class="fa fa-lock"></i><fmt:message
                                        key="button.end"/></button>
                            </c:if>
                            <c:if test="${feeder.canRemove}">
                                <button class="btn btn-sm red" style="float:right" type="button" onclick="removeFeeder('${feeder.id}')"><i
                                        class="fa fa-trash-o"></i><fmt:message
                                        key="button.delete"/></button>
                            </c:if>
                            </security:authorize>
                        </display:column>

                    <display:setProperty name="paging.banner.item_name"><fmt:message
                            key="feeder.item.name"/></display:setProperty>
                    <display:setProperty name="paging.banner.items_name"><fmt:message
                            key="feeder.item.name"/></display:setProperty>

                </display:table>
                </div>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
</div>
<!-- END PAGE CONTENT-->



<div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first" aria-hidden="true"
     style="display: none; margin-top: 0px;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">上传站位列表</h4>
    </div>
    <div class="modal-body">
        <label id="err"></label>
        <div class="form-group">
            <label>区域:</label>
            <select id="areaId" class="form-control">
                <c:forEach items="${areaList}" var="area">
                    <option value="${area.id}">${area.name}</option>
                </c:forEach>
            </select>
        </div>
        <div class="form-group">
            <label>生产线</label>
            <input id="feederLine" type="text" class="form-control"/>
        </div>
        <div class="form-group">
            <label>批量:</label>
            <input id="feederAmount" type="text" class="form-control"/>
        </div>

        <div class="form-group">
            <label>站位列表 TXT:</label>
            <div>
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="input-group input-large">
                        <div class="form-control uneditable-input" data-trigger="fileinput">
                            <i class="fa fa-file fileinput-exists"></i>&nbsp; <span class="fileinput-filename">
														</span>
                        </div>
													<span class="input-group-addon btn default btn-file">
													<span class="fileinput-new">
													选择文件 </span>
													<span class="fileinput-exists">
													更改 </span>
													<input type="file" name="..." id="file">
													</span>
                        <a href="#" class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput">
                            删除 </a>
                        <a href="#" id="uploadFile" class="input-group-addon btn green fileinput-exists" data-dismiss="fileinput">
                            Upload </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <%--<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>--%>
    </div>
</div>

<div id="asignBatchModal" class="modal fade" tabindex="-1" data-focus-on="input:first" aria-hidden="true"
     style="display: none; margin-top: 0px;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">为站位列表[<span id="assignFeederName"></span>]指定批次</h4>
    </div>
    <div class="modal-body">
        <label id="err"></label>
        <input type="hidden" id="assignFeederId" class="form-control" />
        <input type="hidden" id="asignBatchId" class="form-control" />
        <div class="form-group">
            <input id="asignBatchName" type="text" class="form-control"/>
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn default" data-dismiss="modal" ><i class="fa fa-history"></i><fmt:message key="button.cancel"/></button>
        <button class="btn green" type="button" onclick="assignBatchSave();"><i class="fa fa-save"></i><fmt:message
                key="button.save"/></button>
    </div>
</div>

<c:set var="scripts" scope="request">

    <script src="${ctx}/assets/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js" type="text/javascript"></script>

    <script src="${ctx}/assets/global/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>

    <script src="${ctx}/assets/admin/pages/scripts/ui-extended-modals.js"></script>

    <script type="text/javascript" src="${ctx}/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>

    <script src="${ctx}/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $("#search").click(function(){
            var name = $("#feederName").val();
            window.location.href="${ctx}/workOrder/feederSearch.html?aid=${aid}&line=${line}&name="+name;
        })

        $("#AddNewBtn").click(function(){
            $('#stack1').modal("show");
        })
        $('#stack1').on('hidden.bs.modal', function (e) {
            window.location.href="";
        })

        jQuery(document).ready(function() {
            $("#asignBatchName").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "${ctx}/service/store/fetchBatch",
                        dataType: "json",
                        data: {
                            batchName: request.term
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.name,
                                    id: item.id
                                };
                            }));
                        }
                    });
                },
                minLength: 0,
                select: function( event, ui ) {
                    $("#asignBatchId").val(ui.item.id);
                    $("#asignBatchName").val(ui.item.name);
                }
            }).focus(function() {
                $(this).autocomplete("search", "");
            }).click(function() {
                $(this).autocomplete("search", "");
            });
        });

        function removeFeeder(feederId){
            $.post("${ctx}/service/store/removeFeeder", {fid: feederId}, function (data) {
                alert(data);
                window.location.href="";
            });
        }

        function assignBatch(feederId){
            var feederName =$("#feederName"+feederId).text();
            $("#assignFeederName").text(feederName);
            $("#assignFeederId").val(feederId);
            $('#asignBatchModal').modal("show");
        }

        function assignBatchSave(){
            var feederId = $("#assignFeederId").val();
            var batchName = $("#asignBatchName").val();
            //var batchId = $("#asignBatchId").val();
            $.post("${ctx}/service/store/assignBatch", {feederId:feederId, batchName: batchName}, function (data) {
                if(data == ''){
                    alert('指定成功');
                    window.location.href="";
                }else{
                    alert(data);
                }
            });
        }

        cancelTaskSet= function (areaId, key){
            $.post("${ctx}/service/store/cancelTaskSet", {aid:areaId, skey: key}, function (data) {
                if(data){
                    alert('取消成功');
                    window.location.href="";
                }
            });
        }

        function endFeeder(feederId){
            $("#end"+feederId).hide();
            $.post("${ctx}/service/store/endFeeder", {fid: feederId}, function (data) {
                alert(data);
                $("#status"+feederId).attr("class","label label-sm label-end");
                $("#status"+feederId).text("已结束");
                //window.location.href="";
            });
        }

        $('#uploadFile').click(function(){
            $("#err").css("color","red")
            $("#msg").text("");
            var areaId = $("#areaId").val();
            if(!areaId){
                $("#err").text("请选择区域");
                return;
            }
            var line = $("#feederLine").val();
            if(!line){
                $("#err").text("生产线信息不能为空");
                return;
            }

            var amount = $("#feederAmount").val();
            if(!amount){
                $("#err").text("批量不能为空");
                return;
            }

            var fileName = $('#file').val();
            var index1=fileName.lastIndexOf(".");
            var index2=fileName.length;
            var suffix=fileName.substring(index1+1,index2);//后缀名
            if(suffix!="txt")
            {
                $("#err").text("站位列表只能是 txt 文件");
                return;
            }
            var formData = new FormData();
            formData.append('aid', areaId);
            formData.append('amount', amount);
            formData.append('line', line);
            formData.append('file', $('#file')[0].files[0]);
            Metronic.blockUI({
                target: '#stack1',
                overlayColor: 'gray',
                cenrerY: true,
                animate: true
            });
            $.ajax({
                url: '${ctx}/service/store/feederUpload.html',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function(res) {
                if(res == ""){
                    $("#err").css("color","green");
                    $("#err").text("上传成功");
                    alert("上传成功");
                }else{
                    $("#err").text(res);
                    alert(res);
                }
                Metronic.unblockUI('#stack1');
            }).fail(function(res) {
                $("#err").text(res);
                Metronic.unblockUI('#stack1');
            });
        })
    </script>
</c:set>