<%@ 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;
    }

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

    .panel-move {
        border-color: #055cfb;
        margin-left: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 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="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>
                                [首盘] 需求单: 80 工单: 879235 备料单: F001_879235N_1 <span class="right">建议时间: 2019-11-18 08:59</span>
                            </a>
                        </h4>
                    </div>
                    <div id="executingOrder" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>料号</th>
                                    <th>厂别</th>
                                    <th>料站</th>
                                    <th>数量</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-11</td>
                                    <td>2006</td>
                                </tr>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-12</td>
                                    <td>1000</td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-group accordion" id="accordion3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion3" href="#collapse_3_1">
                                <i class="icon-cursor-move"></i>
                                [首盘] 需求单: 81 <span class="right">建议时间: 2019-11-18 08:59</span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapse_3_1" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul class="list-inline">
                                <li>
                                    <i class="fa fa-tasks"></i>工单: 879235
                                </li>
                                <li>
                                    <i class="fa fa-briefcase"></i>备料单: F001_879235N_1
                                </li>
                                <li>
                                    <i class="fa fa-calendar"></i>建议时间:2019-11-18 08:59
                                </li>
                                <li>
                                    <i class="fa fa-star"></i>必须出仓日期:2019-11-18 08:59
                                </li>
                            </ul>
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>料号</th>
                                    <th>厂别</th>
                                    <th>料站</th>
                                    <th>分盘料</th>
                                    <th>需求数量</th>
                                    <th>绑定数量</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-11</td>
                                    <td>否</td>
                                    <td>2006</td>
                                    <td>2006</td>
                                </tr>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-12</td>
                                    <td>是</td>
                                    <td>1000</td>
                                    <td>800</td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion3" href="#collapse_3_2">
                                <i class="icon-cursor-move"></i>
                                [首盘] 需求单: 82 工单: 879235 备料单: F001_879235N_1 <span class="right">建议时间: 2019-11-18 08:59</span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapse_3_2" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>料号</th>
                                    <th>厂别</th>
                                    <th>料站</th>
                                    <th>数量</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-11</td>
                                    <td>2006</td>
                                </tr>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-12</td>
                                    <td>1000</td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion3" href="#collapse_3_3">
                                <i class="icon-cursor-move"></i>
                                [首盘] 需求单: 83 工单: 879235 备料单: F001_879235N_1 <span class="right">建议时间: 2019-11-18 08:59</span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapse_3_3" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>料号</th>
                                    <th>厂别</th>
                                    <th>料站</th>
                                    <th>数量</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-11</td>
                                    <td>2006</td>
                                </tr>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-12</td>
                                    <td>1000</td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion3" href="#collapse_3_4">
                                <i class="icon-cursor-move"></i>
                                [首盘] 需求单: 84 工单: 879235 备料单: F001_879235N_1 <span class="right">建议时间: 2019-11-18 08:59</span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapse_3_4" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>料号</th>
                                    <th>厂别</th>
                                    <th>料站</th>
                                    <th>数量</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-11</td>
                                    <td>2006</td>
                                </tr>
                                <tr>
                                    <td>7H.47134.1F1</td>
                                    <td>SU</td>
                                    <td>1-12</td>
                                    <td>1000</td>
                                </tr>

                                </tbody>
                            </table>
                        </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">
        endFunc = function(evt){
            var targetSort = "";
            $(evt.to).find(".panel-collapse").each(function(){
                targetSort = targetSort + $(this).attr('id') + ",";
            });
            alert(targetSort);
        }
        var dragOptions = {
            animation: 150,
            handle: '.panel-heading',
            ghostClass: 'panel-move',
            onEnd:endFunc
        };
        var el = document.getElementById('accordion3');
        var sortable = Sortable.create(el,dragOptions);

    </script>
</c:set>