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

<style type="text/css">

    .icon-cursor-move{
        margin-right:10px;
    }
    .portlet-body {
        min-height:60px;
    }

    .panel-body {
        position: relative;
        padding: 15px;
        height: 300px;
        overflow-y: scroll;
    }

    .panel-move {
        border-color: #055cfb;
        margin-left:10px;
    }

    .row{
        margin-bottom: 10px;
    }

    .grey-salsa.btn:hover, .grey-salsa.btn:focus, .grey-salsa.btn:active, .grey-salsa.btn.active {
        color: #fafcfb;
        background-color: #94a0b2;
    }


</style>

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

<div class="row">
    <div class="col-md-12">
        <div class="portlet box light">
            <div class="portlet-title tabbable-line">
                <div class="caption">

                    <div>
                        <span id="currentOp"> </span>
                        <%--当前料架:<span id="vmiRFID"></span>--%>
                    </div>
                </div>
                <ul class="nav nav-tabs">
                    <li class="active btn btn-circle btn-transparent grey-salsa">
                        <a href="#portlet_tab_1" data-toggle="tab" id="dnTab">优先和等待队列</a>
                    </li>
                    <li class="btn btn-circle btn-transparent grey-salsa">
                        <a href="#portlet_tab_2" data-toggle="tab" id="facilityTab">未完成队列</a>
                    </li>
                </ul>
            </div>
            <div class="portlet-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="portlet_tab_1">
                        <div class="row">
                            <div class="portlet box green">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <i class="fa fa-gift"></i>执行队列
                                    </div>
                                    <div class="tools">
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div class="panel-group accordion" id="executing">
                                        <div class="panel panel-success">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#executing" href="#executingOrder">
                                                        <i class="icon-cursor-move"></i>
                                                        [首盘] 需求单: 40 工单: 879235 备料单: F001_879235N_1 <span class="right">建议时间: 2019-11-18 08:59</span>
                                                    </a>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="portlet box blue">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <i class="fa fa-gift"></i>优先队列
                                    </div>
                                    <div class="tools">
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div class="panel-group accordion" id="priority">
                                        <div class="panel panel-success">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#executing" href="#priorityOrder">
                                                        <i class="icon-cursor-move"></i>
                                                        [首盘] 需求单: 808 工单: 879235 备料单: F001_879235N_1 <span class="right">建议时间: 2019-11-18 08:59</span>
                                                    </a>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="portlet box yellow">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <i class="fa fa-gift"></i>等待队列
                                    </div>
                                    <div class="tools">
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div class="panel-group accordion" id="wait">
                                        <div class="panel panel-success">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#executing" href="#priorityOrder">
                                                        <i class="icon-cursor-move"></i>
                                                        [首盘] 需求单: 808 工单: 879235 备料单: F001_879235N_1 <span class="right">建议时间: 2019-11-18 08:59</span>
                                                    </a>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="tab-pane" id="portlet_tab_2">
                        <div class="row">
                            <div class="portlet box green">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <i class="fa fa-gift"></i>未完成队列
                                    </div>
                                    <div class="tools">
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div class="panel-group accordion" id="unfinished">
                                        <div class="panel panel-success">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#executing" href="#executingOrder">
                                                        <i class="icon-cursor-move"></i>
                                                        [首盘] 需求单: 40 工单: 879235 备料单: F001_879235N_1 <span class="right">建议时间: 2019-11-18 08:59</span>
                                                    </a>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>







<c:set var="scripts" scope="request">
    <script src="${ctx}/scripts/Sortable.min.js"></script>
    <script type="text/javascript">


        escapeHtml = function (str){
                         var temp = "";
                          if(str.length == 0) return "";
                          temp = str.replace(/&/g,"&amp;");
                          temp = temp.replace(/</g,"&lt;");
                          temp = temp.replace(/>/g,"&gt;");
                          temp = temp.replace(/\s/g,"&nbsp;");
                          temp = temp.replace(/\'/g,"&#39;");
                          temp = temp.replace(/\"/g,"&quot;");
                          return temp;
                     }
        function getOutInfoHtml(outInfo){
            //var index = parseInt(i) + 1;
            //var outItems = outInfo.outItems;
            var moveHandle = '';
//            if(outInfo.firstExecuteTime >= 0){
//                //moveHandle = '<span class="glyphicon glyphicon-arrow-up" style="width:30px;display:none;"></span>';
//            }

            var bgClass = '';

            var pannelColor = 'panel-default';
            if(outInfo.executing){
                pannelColor = 'panel-success';
            }

            var bindShelfInfo = outInfo.lineBindShelfInfo;
            if(bindShelfInfo){
                //bgClass = 'bg-red';
            }else{
                if(outInfo.firstExecuteTime > 0 && outInfo.taskNum <=0){
                    bgClass = "bg-blue";
                }
            }


            var mdate = new Date(outInfo.mdate).Format("yyyy-MM-dd hh:mm:ss");
            var sdate = new Date(outInfo.sdate).Format("yyyy-MM-dd hh:mm:ss");
            var createDate = new Date(outInfo.createDate).Format("yyyy-MM-dd hh:mm:ss");

            var collapseClass = "";
//            if($("#"+outInfo.hSerial).hasClass("in")){
//                collapseClass = " in";
//            };
            var infoHtml = '<div title="'+escapeHtml(outInfo.lineBindShelfInfo)+'" class="panel '+ pannelColor+' '+ bgClass + '">' +
                    '<div class="panel-heading">' +
                    '<h4 class="panel-title">' +
                    '<a class="accordion-toggle" data-toggle="collapse" href="#'+outInfo.hSerial+'">' +
                    moveHandle + //outInfo.firstExecuteTime +
                    '需求单:'+ outInfo.hSerial+' ['+outInfo.action+'] 工单: ' + outInfo.so +' 备料单: ' + outInfo.refno + '[' + outInfo.sendStatus +'] 工单序号:' + outInfo.soseq +
                    //'<span class="right">创建时间: '+createDate+'</span>' +
//                    '<span class="right">建议时间: '+sdate+'</span>' +
                    '<span class="right">必须时间: '+mdate+'</span>' +
                    //'<span class="right">['+outInfo.firstExecuteTime+']</span>' +
                    '</a></h4></div>' +
                    '<div id="'+outInfo.hSerial+'" class="panel-collapse collapse '+collapseClass+'">' +
                    '<div class="panel-body bg-grey">' +
                    '<ul class="list-inline">' +
                    '<li><i class="fa fa-tasks"></i>工单: '+outInfo.so+'</li>' +
                    '<li><i class="fa fa-briefcase"></i>备料单: '+outInfo.refno+'</li>' +
                    '<li><i class="fa fa-calendar"></i>建议时间:'+sdate+'</li>' +
                    '<li><i class="fa fa-star"></i>必须出仓日期:'+mdate+'</li>' +
                    '<li><i class="fa fa-star"></i>创建时间:'+createDate+'</li>' +
                    '</ul>' +
                    '<h4 class="list-inline '+bgClass+'">' +
                    '线体['+outInfo.line+']未解绑料架信息: '+outInfo.lineBindShelfInfo+'' +
                    '</h4>' +
                    '</div></div></div></div>';
            return infoHtml;
        }
        function flushOutInfos(){
            $.post("${ctx}/rest/api/qisda/device/currentOutLine", {}, function (currentOutLine) {

                var currentOutHSerial = "";
                if(currentOutLine){
                    currentOutHSerial = currentOutLine.data.hSerial;
                }
                $.post("${ctx}/service/store/qisda/outInfoList", {}, function (data) {

                    var executingHtml = '';
                    var priorityHtml = '';
                    var waitHtml = '';
                    var unfinishedHtml = '';

                    //第一个等待列表中的需求单,用于优先队列无任务时,将第一个等待列表中的需求单显示到优先队列中
                    var firstWaitHtml = '';
                    for(var i in data){
                        var outInfo = data[i];
                        if(outInfo.preTailAction){
                            continue;
                        }
                        var infoHtml = getOutInfoHtml(outInfo);
                        if(outInfo.executing || outInfo.sendLess || outInfo.firstExecuteTime > 0){
                            if(!outInfo.taskEnd && (outInfo.firstReelAction || outInfo.tailAction)){
                                if(outInfo.firstExecuteTime > 0 && outInfo.taskNum <=0){
                                    waitHtml = waitHtml + infoHtml;
                                }else{
                                    if(outInfo.executing){
                                        if(currentOutHSerial == outInfo.hSerial){
                                            executingHtml = executingHtml + infoHtml;
                                        }else{
                                            //priorityHtml = priorityHtml + infoHtml;
                                            unfinishedHtml = unfinishedHtml + infoHtml;
                                        }
                                    }else{
                                        unfinishedHtml = unfinishedHtml + infoHtml;
                                    }
                                }

                            }else{
                                unfinishedHtml = unfinishedHtml + infoHtml;
                            }

                        }else if(outInfo.priority){
                            if(outInfo.reelCutAction){
                                unfinishedHtml = unfinishedHtml + infoHtml;
                            }else{
                                if(priorityHtml == ''){
                                    priorityHtml = priorityHtml + infoHtml;
                                }else{
                                    waitHtml = waitHtml + infoHtml;
                                }
                            }
                        }else{
                            if(firstWaitHtml == ''){
                                firstWaitHtml = infoHtml;
                            }else{
                                waitHtml = waitHtml + infoHtml;
                            }
                        }
                    }

                    //优先队列为空,将等待列表中的第一个需求单显示到优先队列中,不为空时还显示在等待队列中
                    if(priorityHtml == ''){
                        priorityHtml = firstWaitHtml;
                    }else{
                        waitHtml = firstWaitHtml + waitHtml;
                    }

                    $("#executing").html(executingHtml);
                    $("#priority").html(priorityHtml);
                    $("#wait").html(waitHtml);
                    $("#unfinished").html(unfinishedHtml);


                    $(".panel-default").mouseover(function(){
                        <%--$(this).find(".glyphicon-arrow-up").unbind();--%>
                        <%--$(this).find(".glyphicon-arrow-up").show();--%>
                        <%--var hSerial = $(this).parent().attr("href");--%>
                        <%--$(this).find(".glyphicon-arrow-up").click(function(event){--%>
                        <%--event.stopPropagation();--%>
                        <%--var hSerial = $(this).parent().attr("href").replace("#","");--%>
                        <%--alert('该功能已关闭');--%>
                        <%--&lt;%&ndash;$.post("${ctx}/service/store/qisda/moveOutInfoToFirst", {hSerialToMove: hSerial}, function (data) {&ndash;%&gt;--%>
                        <%--&lt;%&ndash;//moving = false;&ndash;%&gt;--%>
                        <%--&lt;%&ndash;alert(data);&ndash;%&gt;--%>
                        <%--&lt;%&ndash;});&ndash;%&gt;--%>

                        <%--});--%>
                    });
                    $(".panel-default").mouseout(function(){
                        $(this).find(".glyphicon-arrow-up").hide();
                    });

                });
            });

        }

        flushOutInfos();

        //var moving = false;
        setInterval(function(){
            //if(!moving){
                flushOutInfos();
            //}
        }, 3000);


//        var dragOptions = {
//            animation: 150,
//            handle: '.panel-heading',
//            ghostClass: 'panel-move',
//            onEnd:endFunc
//        };
//        var el = document.getElementById('accordion3');
//        var sortable = Sortable.create(el,dragOptions);


        <%--onSort = function(evt){--%>
            <%--moving = true;--%>
            <%--var targetSort = "";--%>
            <%--$(evt.to).find(".panel-collapse").each(function(){--%>
                <%--targetSort = targetSort + $(this).attr('id') + ";";--%>
            <%--});--%>

            <%--$.post("${ctx}/service/store/qisda/changePriority", {hSerialList: targetSort}, function (data) {--%>
                <%--moving = false;--%>
            <%--});--%>
        <%--}--%>
        <%--onStart = function(evt){--%>
            <%--moving = true;--%>
        <%--}--%>

        <%--onEnd = function(evt){--%>
            <%--moving = false;--%>
        <%--}--%>

        <%--var waitBox = document.getElementById('wait');--%>
        <%--var executingBox = document.getElementById("executing");--%>
        <%--var priorityBox = document.getElementById('priority');--%>
        <%--new Sortable(waitBox, {--%>
            <%--group: {--%>
                <%--name: 'shared',--%>
                <%--put: false // 不允许拖拽进这个列表--%>
            <%--},--%>
            <%--animation: 150,--%>
            <%--sort: false, // 设为false，禁止sort--%>
            <%--onStart:onStart,--%>
            <%--onEnd: onEnd,--%>
        <%--});--%>

        <%--new Sortable(priorityBox, {--%>
            <%--group: 'shared',--%>
            <%--animation: 150,--%>
            <%--ghostClass: 'panel-move',--%>
            <%--onSort:onSort,--%>
            <%--onStart:onStart,--%>
            <%--onEnd: onEnd,--%>
        <%--});--%>
    </script>
</c:set>