<%@ page import="com.myproject.util.StorageConstants" %>
<%@ 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;
    }


</style>

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

<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>


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

        function getOutInfoHtml(outInfo){
            //var index = parseInt(i) + 1;
            //var outItems = outInfo.outItems;
            var moveHandle = '';
            if(!outInfo.executing && !outInfo.sendLess){
                moveHandle = '<i class="icon-cursor-move"></i>';
            }

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

            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 infoHtml = '<div class="panel '+pannelColor+'">' +
                    '<div class="panel-heading">' +
                    '<h4 class="panel-title">' +
                    '<a class="accordion-toggle" data-toggle="collapse" href="#'+outInfo.hSerial+'">' +
                    moveHandle +
                    '需求单:'+ outInfo.hSerial+' ['+outInfo.action+'] 工单: ' + outInfo.so +' 备料单: ' + outInfo.refno + '[' + outInfo.sendStatus +'] 工单序号:' + outInfo.soseq +
                    '<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">' +
                    '<div class="panel-body">' +
                    '<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>' +
                    '</ul>' +
                    '</div></div></div></div>';
            return infoHtml;
        }
        function flushOutInfos(){
            $.post("${ctx}/service/store/qisda/outInfoList", {}, function (data) {

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

                for(var i in data){
                    var outInfo = data[i];
                    var infoHtml = getOutInfoHtml(outInfo);
                    if(outInfo.executing || outInfo.sendLess || outInfo.firstExecuteTime > 0){
                        executingHtml = executingHtml + infoHtml;
                    }else if(outInfo.priority){
                        priorityHtml = priorityHtml + infoHtml;
                    }else{
                        waitHtml = waitHtml + infoHtml;
                    }
                }
                $("#executing").html(executingHtml);
                $("#priority").html(priorityHtml);
                $("#wait").html(waitHtml);

            });
        }

        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>