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

<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>
    .ui-autocomplete{

        z-index: 111111;

    }
</style>

<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
    <fmt:message key="menu.cloud.storage"/>
    <small><fmt:message key="仓位列表"/></small>
</h3>


        <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="storage.slotList"/>
                        </div>
    <security:authorize ifAnyGranted="ROLE_MANAGE_VIRTUAL">
                        <div class="actions">
                            <c:if test="${not empty storage && storage.virtual}">
                            <a href="#" class="btn btn-default btn-sm" id="AddNewBtn">
                                <i class="fa fa-plus"></i> <fmt:message key="增加仓位"/> </a>
                            </c:if>
                        </div>
    </security:authorize>
                    </div>
                    <div class="portlet-body">

                        <div class="table-scrollable">

                            <table id="posList"
                                   class="table table-striped table-hover table-bordered dataTable no-footer" role="grid"
                                   aria-describedby="sample_editable_1_info">
                                <thead>
                                <tr role="row">
                                    <th><fmt:message key="storagePos.name"/></th>

    <security:authorize ifAnyGranted="ROLE_MANAGE_VIRTUAL">
                                    <th><fmt:message key="操作"/></th>
    </security:authorize>
                                    <th><fmt:message key="限定物编"/></th>
                                    <th style="width:15%;"><fmt:message key="component.partNumber"/></th>
                                    <th style="width:15%;"><fmt:message key="barcode.barcode"/></th>
                                    <th><fmt:message key="barcode.amount"/></th>
                                    <th><fmt:message key="仓位尺寸"/></th>
                                    <th><fmt:message key="barcode.plateSize"/></th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:if test="${not empty posList}">
                                        <c:forEach items="${posList}" var="slot">
                                            <c:set var="enabledClass" value=""/>
                                            <c:if test="${!slot.enabled}">
                                                <c:set var="enabledClass" value="font-grey"/>
                                            </c:if>
                                            <tr class="${enabledClass}" id="tr${slot.id}">
                                                <td>
                                                    <c:out value="${slot.labelStr}"/>
                                                </td>

                                                <security:authorize ifAnyGranted="ROLE_MANAGE_VIRTUAL">
                                                <td id="td${slot.id}">
                                                    <c:if test="${loginUser.debug}">
                                                        <c:if test="${!slot.enabled}">
                                                            [
                                                            <a onclick="enablePos('${slot.id}',true);">
                                                                启用
                                                            </a>]
                                                        </c:if>
                                                        <c:if test="${slot.enabled}" >
                                                            [
                                                            <a onclick="enablePos('${slot.id}',false);">
                                                                禁用
                                                            </a>]
                                                        </c:if>
                                                    </c:if>
                                                    <c:if test="${!loginUser.debug}">
                                                        [
                                                        <a onclick="removePos('${slot.id}');">
                                                            删除
                                                        </a>]
                                                    </c:if>
                                                </td>
                                                </security:authorize>
                                                <td>
                                                    <c:out value="${slot.specifiedPartNumber}"/>
                                                </td>
                                                <td>
                                                    <c:out value="${slot.barcode.partNumber}"/>
                                                </td>
                                                <td>
                                                    <c:out value="${slot.barcode.barcode}"/>
                                                </td>
                                                <td>
                                                    <c:out value="${slot.barcode.amount}"/>
                                                </td>
                                                <td>
                                                        ${slot.w} x ${slot.h}
                                                </td>
                                                <td>
                                                    <c:if test="${not empty slot.barcode.plateSize}">
                                                        ${slot.barcode.plateSize} x ${slot.barcode.height}
                                                    </c:if>
                                                </td>
                                                <td>
                                                    <c:if test="${not empty slot.barcode.partNumber}">
                                                        <button class="btn yellow" id="btn${slot.id}" onclick="checkoutStorage('${slot.id}')">
                                                        <i class="fa fa-sign-out"></i><fmt:message key="button.checkout"/></button>
                                                    </c:if>
                                                </td>
                                            </tr>
                                        </c:forEach>

                                </c:if>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- END EXAMPLE TABLE PORTLET-->
            </div>
        </div>
        <!--End of update-->


<div class="modal fade" id="updatePosModal" tabindex="-1" role="basic" aria-hidden="true"
     style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title"><fmt:message key="storagePos.update"/></h4>
            </div>
            <div class="modal-body">
                <%--<%@include file="/common/success.jsp" %>--%>
                <%--<%@include file="/common/error.jsp" %>--%>
                <form method="get" action="${ctx}/storage/storagePosUpdate.html" id="storagePosForm" name="storagePos" cssClass="well">
                    <input type="hidden" id="storagePosId" name="id"/>

                    <label class="control-label col-md-2"><fmt:message key="storagePos.name"/></label>
                    <div style="text-align:left" class="input-group col-md-4">
                        <input type="text" id="posName" name="posName" class="form-control"/>
                    </div>

                    <label class="control-label col-md-2"><fmt:message key="storagePos.priority"/> </label>
                    <div style="text-align:left" class="input-group col-md-4">
                        <input type="text" id="posPriority" name="priority" class="form-control"/>
                    </div>

                    <label class="control-label col-md-2"><fmt:message key="storagePos.width"/> </label>
                    <div style="text-align:left" class="input-group col-md-4">
                        <input type="text" id="posW" name="w" class="form-control"/>
                    </div>

                    <label class="control-label col-md-2"><fmt:message key="storagePos.height"/></label>
                    <div style="text-align:left" class="input-group col-md-4">
                        <input type="text" id="posH" name="h" class="form-control"/>
                    </div>

                    <%--<label class="control-label col-md-2">是否可用</label>
                    <div style="text-align:left" class="input-group col-md-4">
                        <select id="enabled" name="enabled">
                            <option value="true">可用</option>
                            <option value="false">禁用</option>
                        </select>
                    </div>--%>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" name="saveStoragePos" class="btn btn-primary" onclick="saveStoragePos()">
                    <i class="icon-upload icon-white"></i> <fmt:message key="button.save"/>
                </button>
                <button type="button" name="cancel" class="btn btn-default"
                        onclick="$('#updatePosModal').modal('hide');">
                    <i class="icon-remove"></i> <fmt:message key="button.cancel"/>
                </button>
            </div>

            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>

<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">[${storage.name}]增加料格</h4>
    </div>
    <div class="modal-body">
        <label id="err"></label>
        <div class="form-group">
            <label>仓位编号:</label>
            <input id="newPosName" type="text" class="form-control"/>
        </div>
        <div class="form-group">
            <label>指定物编:</label>
            <input id="partNumber" type="text" class="form-control"/>
        </div>
        <div class="form-group">
            <label>可放料盘数量:</label>
            <input id="reelCount" 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="savePos();"><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 language="JavaScript" type="text/javascript">
            function enablePos(posId,enabled){
                $.post("${ctx}/service/store/enablePos", {pid: posId,enabled:enabled }, function (data) {
                    if(data != ''){
                        alert(data);
                    }else{
                        $("#tr"+posId).toggleClass("font-grey");
                        if(enabled){
                            $("#td"+posId).html("否[<a onclick='enablePos("+posId+",false);'>禁用</a>]");
                        }else{
                            $("#td"+posId).html("否[<a onclick='enablePos("+posId+",true);'>启用</a>]");
                        }
                        alert("操作成功");
                    }
                })
            }


            function removePos(posId){
                var result = confirm("确定删除?");
                if(result){
                    $.post("${ctx}/service/store/removePos", {pid: posId}, function (data) {
                        alert(data);
                        window.location.href="";
                    })
                }

            }


            var table = $('#posList');

            // begin first table
            table.dataTable({
                "bDestroy": true,
                //"aaSorting": [[ 2, "desc" ]],//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
                "sScrollXInner": "100%",
                //"bSort": false, //关闭排序
                "bLengthChange": false, //关闭每页显示多少条数据
                "bProcessing": true, //显示是否加载
                "sScrollX": "100%",
                "scrollY": "300px",
                "scrollCollapse": true,
                "order": [
                    [0, "asc"]
                ],
                paging: false,
                "language": {
                    "search": "查找: "
                }
            });



            function checkoutStorage(posId) {
                $("#btn"+posId).attr("disabled","true");
                $.post("${ctx}/service/store/checkout.html", {pids: posId}, function (data) {
                    alert(data);
                });
            }

            function savePos(){
                $("#err").css("color","red")
                $("#err").text("");
                var storageId = "${storage.id}";
                var posName = $("#newPosName").val();
                var partNumber = $("#partNumber").val();
                var reelCountStr = $("#reelCount").val();

                if(!posName){
                    $("#err").text("仓位编号不能为空");
                    return;
                }
                if(!partNumber){
                    $("#err").text("指定物编不能为空");
                    return;
                }
                if(!reelCountStr){
                    $("#err").text("可放料盘数量不能为空");
                    return;
                }
                var reelCount = parseInt(reelCountStr);
                if (isNaN(reelCount))
                {
                    $("#err").text("可放料盘数量必须为大于0的数字");
                    return;
                }
                $.post("${ctx}/service/store/saveVirtualPos", {sid: storageId,posName:posName,partNumber:partNumber,reelCount:reelCount }, function (data) {
                    alert(data);
                    window.location.href="";
                });
            }

            $("#partNumber").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "${ctx}/component/fetchComponent",
                        dataType: "json",
                        data: {
                            comp: request.term
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.partNumber
                                };
                            }));
                        }
                    });
                },
                minLength: 1
            });

            $("#AddNewBtn").click(function(){
                $('#stack1').modal("show");
            })

        </script>
    </c:set>