<div class="main">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2">
                    <div class="list-group mt-3">
                        <% for (let compilation of compilationList) { %>
                        <% if (compilation._id === 'all') { %>
                        <a href="/priceInfo/main"
                            class="list-group-item list-group-item-action <%= compilation.active %>">
                            所有
                        </a>
                        <% } else { %>
                        <a id="<%= compilation._id %>" href="/priceInfo/main?filter=<%= compilation._id %>"
                            class="list-group-item list-group-item-action <%= compilation.active %>">
                            <%= compilation.name %>
                        </a>
                        <% }} %>
                    </div>
                </div>
                <div class="col-md-10">
                    <div class="warp-p2 mt-3">
                        <table class="table table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th>材料信息价库名称</th>
                                    <th width="160">期数</th>
                                    <th width="160">费用定额</th>
                                    <th width="160">添加时间</th>
                                    <th width="70">操作</th>
                                    <th width="70">原始数据</th>
                                </tr>
                            </thead>
                            <tbody id="showArea">
                                <% for(let lib of libs){ %>
                                <tr class="libTr">
                                    <td id="<%= lib.ID%>"><a
                                            href="/priceInfo/edit/?libID=<%= lib.ID%>&locked=true"><%= lib.name%></a>
                                    </td>
                                    <td><%= lib.period %></td>
                                    <td><%= lib.compilationName%></td>
                                    <td><%= moment(lib.createDate).format('YYYY-MM-DD')%></td>
                                    <td>
                                        <a class="lock-btn-control disabled" href="javascript:void(0);"
                                            style="color: #0275d8" onclick='handleEditClick("<%= lib.ID%>")'
                                            title="编辑"><i class="fa fa-pencil-square-o"></i></a>
                                        <a class="text-danger lock-btn-control disabled" href="javascript:void(0);"
                                            onclick='handleDeleteClick("<%= lib.ID%>")' title="删除"><i
                                                class="fa fa-remove"></i></a>
                                        <a class="lock" data-locked="true" href="javascript:void(0);" title="解锁"><i
                                                class="fa fa-unlock-alt"></i></a>
                                    </td>
                                    <td>
                                        <a class="btn btn-secondary btn-sm import-data lock-btn-control disabled"
                                            onclick='handleImportClick("<%= lib.ID%>")' href="javacript:void(0);"
                                            title="导入数据"><i class="fa fa-sign-in fa-rotate-90"></i>导入</a>
                                    </td>
                                </tr>
                                <% } %>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--弹出添加-->
<div class="modal fade" id="add" data-backdrop="static" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加材料信息价库</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="add-lib-form" method="post" action="/priceInfo/addLib"
                    enctype="application/x-www-form-urlencoded">
                    <div class="form-group">
                        <label>材料信息价库名称</label>
                        <input id="name" name="name" class="form-control" placeholder="请输入库名称" type="text">
                        <small class="form-text text-danger" id="name-error" style="display: none">请输入库名称。</small>
                    </div>
                    <div class="form-group">
                        <label>编办名称</label>
                        <select class="form-control" name="compilationID">
                            <% for (let compilation of compilationList) { %>
                            <% if (compilation.name !== '所有') { %>
                            <option value="<%= compilation._id %>"><%= compilation.name %></option>
                            <% }} %>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>期数</label>
                        <input id="period" name="period" class="form-control" placeholder="请输入期数" type="text">
                        <small class="form-text text-danger" id="period-error" style="display: none">请输入有效期数(eg:
                            2020-01)。</small>
                    </div>
                    <input type="hidden" name="userAccount" value="<%= userAccount%>">
                </form>
            </div>
            <div class="modal-footer">
                <button id="add-lib" class="btn btn-primary">新建</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--弹出编辑-->
<div class="modal fade" id="edit" data-backdrop="static" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">材料信息价库</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label>材料信息价库名称</label>
                        <input id="rename-text" class="form-control" placeholder="输入名称" type="text" value="">
                        <small class="form-text text-danger" id="rename-error" style="display: none">请输入名称。</small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a id="rename" href="javascript: void(0);" class="btn btn-primary">确定</a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--弹出导入-->
<div class="modal fade" id="crawl" data-backdrop="static" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">材料信息价库</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-5 form-group">
                        <input id="period-start" class="form-control" name="from" placeholder="起始期数" type="text"
                            value="" autocomplete="off">
                    </div>
                    <div class="col-2 form-group">
                        <label class="split">——</label>
                    </div>
                    <div class="col-5 form-group">
                        <input id="period-end" class="form-control" name="to" placeholder="结束期数" type="text" value=""
                            autocomplete="off">
                    </div>
                </div>
                <small class="form-text text-danger" id="crawl-error" style="display: none">请输入有效期数。</small>
                <small>期数格式：2020-01</label>
            </div>
            <div class="modal-footer">
                <a id="crawl-confirm" href="javascript: void(0);" class="btn btn-primary">确定</a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--弹出删除-->
<div class="modal fade" id="del" data-backdrop="static" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除确认</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <h5 class="text-danger">删除后无法恢复，确认是否删除？(需确认三次)</h5>
            </div>
            <div class="modal-footer">
                <a id="delete" href="javascript:void(0);" class="btn btn-danger">确认</a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--弹出导入数据-->
<div class="modal fade" id="import" data-backdrop="static" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">导入数据</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    导入操作会覆盖数据，请谨慎操作！！
                </div>
                <form>
                    <div class="form-group">
                        <label>请选择Excel格式文件</label>
                        <input class="form-control-file" type="file" accept=".xlsx,.xls" name="import_data" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="import-confirm">确定导入</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<script src="/public/web/lock_util.js"></script>
<script src="/public/web/PerfectLoad.js"></script>
<script src="/public/constants/price_info_constant.js"></script>
<script src="/web/maintain/price_info_lib/js/main.js"></script>