<div class="main">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-8">
                    <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="70">操作</th></tr></thead>
                            <tbody id="showArea">
                            <% for(let lib of mainColLibs){ %>
                            <tr class="libTr">
                                <td id="<%= lib.ID%>"><a href="/mainTreeCol/edit/<%= lib.ID%>?locked=true"><%= lib.name%></a></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='getMainColLib("<%= lib.ID%>")' title="编辑"><i class="fa fa-pencil-square-o"></i></a>
                                    <a class="text-danger lock-btn-control disabled" href="javascript:void(0);" style="color: #0275d8"  onclick='showDeleteModal("<%= 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>
                            </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="addMainLibForm" method="post" action="/mainTreeCol/add-lib" enctype="application/x-www-form-urlencoded21">
                    <div class="form-group">
                        <label>列设置名称</label>
                        <input id="name" name="name" class="form-control" placeholder="输入列设置名称" type="text">
                        <small class="form-text text-danger" id="nameError" style="display: none">请输入列设置名称。</small>
                    </div>
                    <div class="form-group">
                        <label>编办名称</label>
                        <select id="compilationSels" name="compilationId" class="form-control"></select>
                    </div>
                    <input type="hidden" name = "userAccount" value="<%= userAccount%>">
                </form>
            </div>
            <div class="modal-footer">
                <a id="addMainCol"  href="javascript:void(0);" class="btn btn-primary">新建</a>
                <button type="button" id="cancelBtn" 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>
                <input type="hidden" id="libID_del">
                <input type="hidden" id="delCount">
            </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="set-column" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">造价书列设置</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-addon" id="">列设置名称</span>
                            <input placeholder="输入名称" type="text" class="form-control input-sm" id="renameText"><br>
                            <input id="libID" type="hidden">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">空行</span>
                            <input type="number" class="form-control input-sm" value="3" id="empty-rows">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">数据绑定列数</span>
                            <input type="number" class="form-control input-sm" value="4" id="col-count">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">表头行数</span>
                            <input type="number" class="form-control input-sm" value="1" id="header-row-count">
                        </div>
                    </div>
                </div>
                <div class="row">  <small class="form-text text-danger" id="renameError" style="margin-left: 110px;display: none;">请输入模板名称。</small> </div>

                <div class="row">
                    <div class="col-md-2">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="is-tree" value> 是否包含树结构
                            </label>
                        </div>
                    </div>
                    <div class="col-md-3" id="tree-col-div" style="padding: 5px">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">树结构绘制列</span>
                            <input type="number" class="form-control input-sm" value="1" id="tree-col">
                        </div>
                    </div>
                </div>
                <div class="">
                    <div class="btn-toolbar" role="toolbar">
                        <div class="btn-group" role="group" >
                            <a href="#" class="btn btn-default btn-sm" id="merge">合并</a>
                            <a href="#" class="btn btn-default btn-sm" id="unmerge">拆分</a>
                        </div>
                        <div class="btn-group" role="group">
                            <a href="#" class="btn btn-default btn-sm" id="h-left">左对齐</a>
                            <a href="#" class="btn btn-default btn-sm" id="h-center">居中</a>
                            <a href="#" class="btn btn-default btn-sm" id="h-right">右对齐</a>
                        </div>
                        <div class="btn-group" role="group">
                            <a href="#" class="btn btn-default btn-sm" id="v-top">上对齐</a>
                            <a href="#" class="btn btn-default btn-sm" id="v-center">垂直居中</a>
                            <a href="#" class="btn btn-default btn-sm" id="v-bottom">下对齐</a>
                        </div>
                        <div class="btn-group" role="group">
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon1">字体</span>
                                <input type="text" class="form-control input-sm" id="font">
                                <div class="input-group-btn">
                                    <a href="#" class="btn btn-default btn-sm" id="set-font">设置</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="colEditSpread" style="height: 300px">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save-col-setting">确定</button>
            </div>
        </div>
    </div>
</div>
<script src = "/lib/spreadjs/sheets/gc.spread.sheets.all.11.1.2.min.js"></script>
<script>GC.Spread.Sheets.LicenseKey =  '<%- LicenseKey %>';</script>
<script src="/public/web/lock_util.js"></script>
<script src="/web/maintain/bills_lib/scripts/bills_lib_ajax.js"></script>
<script type="text/javascript" src="/web/maintain/main_col_lib/js/main_tree_col.js"></script>
<script type="text/javascript" src="/web/maintain/main_col_lib/js/main_col_lib.js"></script>