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

<style type="text/css">
    .box{
        margin-top: 10px;
    }
    .alert{
        padding:8px;
    }

    .partnumber-box{
        height: 100px;text-align: center;
        padding-top:35px;
        margin-bottom:10px;
        font-size: 16px;
        vertical-align: middle;
        word-wrap:break-word ;
        cursor: pointer;
    }

    .table-scrollable{
        overflow-y: auto;
    }

    /* 核心修改：标签页容器恢复为块级布局，支持上下排列 */
    .main-tabs {
        margin-bottom: 15px;
        border-bottom: 1px solid #e7ecf1;
        padding-bottom: 8px;
        display: block; /* 取消flex，改为块级布局，支持上下排列 */
    }
    /* 标签列表样式（保持原有，仅微调底部间距） */
    .main-tabs > .nav-tabs {
        margin-bottom: 10px; /* 标签列表和下方输入框的间距 */
    }
    .main-tabs > .nav-tabs > li {
        margin-bottom: -1px;
    }
    .main-tabs > .nav-tabs > li > a {
        padding: 10px 18px;
        font-size: 14px;
        color: #666;
        border: none;
        border-bottom: 2px solid transparent;
    }
    .main-tabs > .nav-tabs > li.active > a,
    .main-tabs > .nav-tabs > li.active > a:hover {
        color: #4b8df8;
        border-bottom: 2px solid #4b8df8;
        background: transparent;
    }
    .main-tabs > .nav-tabs > li > a:hover {
        background: transparent;
        border-bottom: 2px solid #eee;
    }
    /* 工单号输入框容器样式（放在标签页下方，左对齐） */
    .work-order-box {
        display: flex;
        align-items: center;
        gap: 8px; /* 文字和输入框间距 */
        margin-left: 8px; /* 和标签页左对齐（微调） */
    }
    /* 工单号输入框样式（和scan-code统一） */
    #work-order-input {
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 200px; /* 可自定义宽度 */
    }

</style>

<link href="${ctx}/scripts/lobibox/css/lobibox.min.css?id=2" rel="stylesheet" type="text/css"/>

<!-- 2. 定义国际化变量（可放在页面任意位置，建议在标签页上方） -->
<fmt:message key="tab.zhongzhuanIn" var="tab_zhongzhuanIn"/> <!-- 中转仓入库 -->
<fmt:message key="tab.return2003" var="tab_return2003"/>     <!-- 2003退库 -->
<fmt:message key="tab.return2006" var="tab_return2006"/>     <!-- 2006退库 -->

<fmt:message key="storagePosFind.workOrderNo" var="workOrder_label"/>       <!-- 工单号（标签文字） -->
<fmt:message key="storagePosFind.enterWorkOrderNo" var="workOrder_placeholder"/> <!-- 请输入工单号（占位符） -->

<!-- 3. 标签页主体（data-tab标识与type参数值一致） -->
<div class="main-tabs">
    <ul class="nav nav-tabs" id="businessTab">
        <!-- 中转仓入库：data-tab=zhongzhuanIn 对应type=zhongzhuanIn -->
        <li class="tab-item" data-tab="zhongzhuanIn" data-url="${ctx}/storage/accShelf/${show}?type=zhongzhuanIn">
            <a href="javascript:;">${tab_zhongzhuanIn}</a>
        </li>
        <!-- 2003退库：data-tab=return2003 对应type=return2003 -->
        <li class="tab-item" data-tab="return2003" data-url="${ctx}/storage/accShelf/${show}?type=return2003">
            <a href="javascript:;">${tab_return2003}</a>
        </li>
        <!-- 2006退库：data-tab=return2006 对应type=return2006 -->
        <li class="tab-item" data-tab="return2006" data-url="${ctx}/storage/accShelf/${show}?type=return2006">
            <a href="javascript:;">${tab_return2006}</a>
        </li>
    </ul>

    <!-- 工单号输入框（移至标签列表下方） -->
    <div class="work-order-box">
        <span>${workOrder_label}:</span>
        <input type="text" id="work-order-input" class="form-control" placeholder="${workOrder_placeholder}">
    </div>
</div>

<div class="row" id="codeBox">
    <div class="col-md-6 col-sm-6">
        <input type="text" class="form-control" id="scan-code"/>
    </div>
    <div class="col-md-6 col-sm-6">
        <div class="alert alert-success" id="msg">&nbsp;
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 col-sm-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box blue">
            <div class="portlet-title">

                <div class="caption">
                    ${storage.name}
                </div>

                <div class="actions">

                    <button type="button" class="btn btn-fit-height default"  onclick="checkAllPos();">
                        <fmt:message key="shelf.btn.posCheck"/>
                    </button>
                    <button type="button" class="btn btn-fit-height default"  onclick="closeAllLights();">
                        <fmt:message key="shelf.btn.closeAll"/>
                    </button>

                    <button type="button" class="btn btn-fit-height yellow" onclick="showPartNumbers();">
                        <i class="fa fa-sign-out"></i><fmt:message key="button.checkout"/>
                    </button>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-scrollable" style="height:400px;">
                    <table class="table table-striped table-hover table-bordered no-footer" role="grid" aria-describedby="sample_editable_1_info">
                        <thead>
                        <tr role="row">
                            <th><fmt:message key="barcode.barcode"/></th>
                            <th><fmt:message key="barcode.partNumber"/></th>
                            <th><fmt:message key="checkOut.pos"/></th>
                            <th><fmt:message key="dataLog.type"/></th>
                            <th><fmt:message key="dataLog.status"/></th>
                            <th><fmt:message key="dataLog.date"/></th>
                        </tr>
                        </thead>
                        <tbody class="dataTable">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
</div>

<div id="allPartNumbers" 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" id="modal-title" style="font-weight: 500;"><fmt:message key="button.checkout"/> </h4>
                <input type="text" class="form-control" id="searchPn"/>
            </div>
            <div class="modal-body">
                <div class="row" id="partNumberItems">
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <div class="bg-blue-madison partnumber-box">xxx</div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <div id="footerBtn">
                    <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="lastPage()" id="lastPage">
                        <fmt:message key="allBoxView.lastPage"/></button>
                    <button type="button" class="btn green" onclick="nextPage()" id="nextPage">
                        <fmt:message key="allBoxView.nextPage"/></button>
                </div>
                <%--<button type="button" data-dismiss="modal" class="btn default" id="cancelAuthBtn">取消</button>--%>
            </div>
        </div>
    </div>
</div>

<div id="sizeConfirm" 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="font-weight: 500;"><fmt:message key="shelf.size.title"/></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <c:forEach items="${storage.usageMap}" var="usageEntry">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                            <div class="bg-blue-madison partnumber-box psizeBox">${usageEntry.value.sizeStr}</div>
                        </div>
                    </c:forEach>
                </div>
            </div>
            <div class="modal-footer">
                <%--<button type="button" data-dismiss="modal" class="btn default" id="cancelAuthBtn">取消</button>--%>
            </div>
        </div>
    </div>
</div>


<fmt:message key="op.1" var="op.1"/>
<fmt:message key="op.2" var="op.2"/>

<fmt:message key="inOutList.in" var="in_label"/>
<fmt:message key="inOutList.out" var="out_label"/>


<fmt:message key="op.status.wait" var="op_status_wait"/>
<fmt:message key="op.status.executing" var="op_status_executing"/>
<fmt:message key="op.status.pause" var="op_status_pause"/>
<fmt:message key="op.status.finished" var="op_status_finished"/>
<fmt:message key="op.status.cancel" var="op_status_cancel"/>
<fmt:message key="op.status.end" var="op_status_end"/>

<c:set var="scripts" scope="request">
    <script type="text/javascript">

        // ========== 新增：URL参数解析函数（用于获取type参数） ==========
        function getUrlParam(paramName) {
            var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
            var paramValue = window.location.search.substr(1).match(reg);
            return paramValue ? decodeURIComponent(paramValue[2]) : null;
        }

        // ========== 新增：初始化标签选中状态（根据type参数） ==========
        function initActiveTab() {
            // 1. 获取URL中的type参数，无参数默认选中zhongzhuanIn（中转仓入库）
            var targetType = getUrlParam("type") || "zhongzhuanIn";
            // 2. 匹配标签并设置选中状态
            $(".tab-item").each(function() {
                var currentTabKey = $(this).data("tab");
                if (currentTabKey === targetType) {
                    $(this).addClass("active");
                } else {
                    $(this).removeClass("active");
                }
            });
        }

        function showMsg(msg){
            if(msg == ""){
                $("#msg").attr("class","");
                $("#msg").text("");
            }else{

                var error = true;
                if(msg.indexOf("OK") == 0){
                    error = false;
                    msg = msg.substr(2);
                }
                if(msg.indexOf("0") == 0){
                    error = false;
                    msg = msg.substr(1);
                }
                if(msg.indexOf("x") == 0){
                    msg = msg.substr(1);
                }
                if(error){
                    $("#msg").attr("class","alert alert-danger");
                }else{
                    $("#msg").attr("class","alert alert-success");
                }
                $("#msg").text(msg);
            }
        }

        $("#scan-code").change(function () {
            var codeValue = $(this).val();
            var workOrder = $.trim($("#work-order-input").val());
            var checkType = $(".tab-item.active").find("a").text();
            $(this).val("");
            showMsg("");
            $(this).attr("placeholder", codeValue);
            $.post("${ctx}/service/store/accShelf/putInCode", {cid: '${show}', code: codeValue,workOrderNumber:workOrder,checkType:checkType}, function (data) {
                showMsg(data);
                if(data.indexOf("x") == 0){
                    //弹框,添加=7x8=尺寸信息后重新请求
                    $("#sizeConfirm").modal("show");
                }
            });
        });

        $(".psizeBox").click(function(){
            $("#sizeConfirm").modal("hide");
            var codeValue = $("#scan-code").attr("placeholder");
            var sizeStr = $(this).text();
            if(codeValue){
                var newCodeStr = "="+sizeStr+"="+codeValue;
                $.post("${ctx}/service/store/accShelf/putInCode", {cid: '${show}', code: newCodeStr}, function (data) {
                    showMsg(data);
                });
            }
        });


        setInterval(function(){
            // 核心判断：如果工单号输入框正被聚焦（用户点击了），则不执行后续聚焦逻辑
            if ($("#work-order-input").is(":focus")) {
                return; // 直接返回，保留焦点在工单号输入框
            }

            if($('#allPartNumbers').is(':visible')) {
                $("#searchPn").focus();
            }else{
                $("#scan-code").focus();
            }
        }, 1000);


        // ========== 新增：标签点击事件（页面元素加载后绑定） ==========
        $(document).ready(function() {
            // 初始化标签选中状态
            initActiveTab();

            // 标签点击跳转（带type参数，替换历史记录+刷新页面，避免回退到上一个标签）
            $(".tab-item").click(function() {
                var targetUrl = $(this).data("url");
                if(targetUrl){
                    // 核心：替换当前历史记录，回退时不会保留本次点击的历史
                    history.replaceState(null, document.title, targetUrl);
                    // 刷新当前页面（加载新的type参数对应的内容）
                    window.location.reload();
                }
            });
        });


        //页码从0开始
        var pageIndex = 0;
        var partNumberItems = [];
        var itemPerPage = 12;

        var bgColors = ["bg-blue-madison","bg-green-haze","bg-purple-plum","bg-red-intense","bg-green","bg-yellow","bg-blue","bg-red","bg-purple","bg-blue-ebonyclay","bg-red-sunglo","bg-yellow-crusta"];

        showPartNumbers = function(type){

            var findAndOutHref = '${ctx}/component/storagePosFind.html';
            $("#findAndOut").attr("href",findAndOutHref);
            $("#searchPn").val("");

            $.post("${ctx}/service/store/storageTypeInventory", {type: type, cid: '${show}'}, function (data) {
                pageIndex = -1;
                partNumberItems = data;
                nextPage();
            });
        }

        nextPage=function(){
            pageIndex ++ ;
            pageShow();
        }

        lastPage = function(){
            pageIndex -- ;
            pageShow();
        }

        disableBtn = function(){
            $("#lastPage").show();
            $("#nextPage").show();
            $("#footerBtn").show();
            //上一页不可用
            if(pageIndex <= 0){
                $("#lastPage").addClass("disabled");
            }else{
                $("#lastPage").removeClass("disabled");
            }
            var totalPage = Math.ceil(partNumberItems.length/itemPerPage);
            if(pageIndex + 1 >= totalPage - 1){
                $("#nextPage").addClass("disabled");
            }else{
                $("#nextPage").removeClass("disabled");
            }
            if(totalPage <= 1){
                $("#lastPage").hide();
                $("#nextPage").hide();
            }
        }

        pageShow = function(){
            var itemStr = "";
            var endIndex = itemPerPage * (pageIndex+1);
            if(endIndex > partNumberItems.length){
                endIndex = partNumberItems.length;
            }
            for(var index = itemPerPage * pageIndex;index<endIndex;index++){
                var pn = partNumberItems[index].partNumber;
                itemStr = itemStr + "<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12' onclick='checkoutByPartNumber(\""+pn+"\");'> " +
                        "<div class='"+bgColors[index%itemPerPage]+" partnumber-box'>"+pn+"</div></div>";
            }
            if(itemStr == ""){
                itemStr = "<div style='font-size: 20px;text-align: center;'>${noReel_label}</div>";
            }
            $("#partNumberItems").html(itemStr);
            disableBtn();
            $("#allPartNumbers").modal("show");
        }

        $("#searchPn").on('input propertychange',function(){
            FilterPnItems();
        });

        function FilterPnItems(){
            $("#lastPage").hide();
            $("#nextPage").hide();
            var itemStr = "";
            var pnForSearch = $("#searchPn").val();
            if(pnForSearch == ""){
                pageShow();
                return;
            }

            $.post("${ctx}/service/store/resolveBarcode", {code: pnForSearch}, function (data) {
                var thePn = pnForSearch;
                if (data.error == null) {
                    thePn = data.barcode.partNumber;
                }
                for(var index in partNumberItems){
                    var pn = partNumberItems[index].partNumber;
                    if(pn.indexOf(thePn) >= 0){
                        itemStr = itemStr + "<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12' onclick='checkoutByPartNumber(\""+pn+"\");'> " +
                                "<div class='"+bgColors[index%itemPerPage]+" partnumber-box'>"+pn+"</div></div>";
                    }
                }
                if(itemStr == ""){
                    itemStr = "<div style='font-size: 20px;text-align: center;'>${noReel_label}</div>";
                }
                $("#partNumberItems").html(itemStr);
            });


        }

        closeAllLights = function(){
            $.post("${ctx}/service/store/accShelf/op", {opKey: 'closeAll', opValue:'true', cid: '${show}'}, function (data) {
                showMsg(data);
                waitting();
            });
        }

        checkAllPos = function(){
            $.post("${ctx}/service/store/accShelf/checkAll", {cid: '${show}'}, function (data) {
                showMsg(data);
                waitting();
            });
        }


        checkoutByPartNumber = function(partnumber) {
            $.post("${ctx}/service/store/checkout.html", {pn: partnumber, cid: '${show}',cl:'0'}, function (data) {
                $("#allPartNumbers").modal("hide");
                showMsg(data);
                waitting();
            });
        }


        function updateTasks(cid,seconds){
            //任务列表
            $.post("${ctx}/service/store/tasks", {cid: cid, seconds:seconds}, function (data) {
                $(".dataTable").html("");
                for(var item in data){

                    var taskId = data[item].id;
                    var partNumber = data[item].partNumber;
                    var barcode = data[item].barcode;
                    var posStr = data[item].posStr;
                    var typeStr = "${in_label}";

                    if(data[item].type == 2){//出库
                        typeStr = "${out_label}";
                    }

                    var statusStr = "";
                    if(data[item].cancel){
                        statusStr ="${op_status_cancel}";
                    } else if(data[item].executing){
                        statusStr ="${op_status_executing}";
                    }else if(data[item].finished){
                        statusStr ="${op_status_finished}";
                    }else if(data[item].wait){
                        statusStr ="${op_status_wait}";
                    }else if(data[item].end){
                        statusStr ="${op_status_end}";
                    }

                    var dateStr = data[item].updateDateStr;

                    var tdStr =
                            "<td>"+barcode+"</td>"+
                            "<td>"+partNumber+"</td>"+
                            "<td>"+posStr+"</td>"+
                            "<td>"+typeStr+"</td>"+
                            "<td><span class='label label-sm label-"+data[item].status.toLowerCase()+"'>"+statusStr+"</span></td>"+
                            "<td>"+dateStr+"</td>";
                    var trStr = "<tr>" + tdStr+ "</tr>";
                    $(".dataTable").append(trStr);
                }

            });
        }



        //updateTasks('${show}',-10*60);
       setInterval(function(){
            updateTasks('${show}',-10*60);
        }, 1000);

        waitting = function(){
            Metronic.blockUI({
                iconOnly: true,
                overlayColor: '#4b8df8'
            });


            window.setTimeout(function() {
                Metronic.unblockUI();
            }, 1500);

        }
    </script>
</c:set>