<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('通讯录')" />
    <link th:href="@{/css/use/css1.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/address.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
<div class="container-div">
    <div class="col-md-12 select-table" >
        <div class="col-md-12 search-collapse" style="border:none;padding-right: 0;padding-left: 0;margin-bottom: 10px;">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li style="margin-left: 20px;">
                            <label>通讯录：</label>
                        </li>
                        <li class="flexLayout" style="float: right;">
                            <input type="text" class="form-control searchTag" placeholder="搜索姓名关键字"/>
                            <button class="btn btn-success"  style="width:65px;margin-left: 10px;height: 36px;background-color: #185EFF;" onclick="$.table.search()">
                                搜索
                            </button>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-md-12">
            <div style="border-bottom: 3px solid #F1F3F7;">
                <a class="btn btn-style1">
                    我的联系人
                </a>
                <a class="btn btn-style1">
                    导入联系人
                </a>
                <a class="btn btn-style1">
                    导出联系人
                </a>
                <a class="btn btn-style1">
                    使用帮助
                </a>
            </div>
            <div style="margin-top: 10px;">
                <a class="btn btn-style2" onclick="addressAdd()">
                    新建联系人
                </a>
                <a class="btn btn-style2 multiple disabled">
                    删除联系人
                </a>
                <a class="btn btn-style2" onclick="addressgroupAdd()">
                    创建组
                </a>
                <a class="btn btn-style2">
                    复制到组
                </a>
                <a class="btn btn-style2">
                    移动到组
                </a>
                <a class="btn btn-style2" onclick="$.table.search()">
                    刷新
                </a>
            </div>
        </div>
        <div class="col-md-12"  style="margin-top: 5px;height: 6px">
            <div style="border: 6px solid #F1F3F7;"></div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3">
                <div id="groups" class="group-list">
                    <ul>
                        <li><div>所有联系人(<span id="manTotal">11</span>)</div></li>
                        <li><div>分组1(<span>4</span>)</div></li>
                        <li><div>分组2(<span>7</span>)</div></li>
                        <li><div>分组3(<span>1</span>)</div></li>
                        <li><div>分组4(<span>0</span>)</div></li>
                        <li><div>未分组联系人(<span id="notDivide">1</span>)</div></li>
                    </ul>
                </div>
            </div>
            <div class=" table-striped" style="float: right;width: 75%">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
</div>

</body>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    // 分组前缀
    // 通讯录人员前缀
    var prefix = ctx + "system/addressbook";
    var editFlag ="";

    $(function() {
        queryUserList();
        queryGroupTree();
    });

    //新增
    function addressgroupAdd() {
        var options = {
            title: ['创建组','text-align:center;font-size:18px;color:white;height:60px;line-height:60px;background-color:#0042a4'],
            url: prefix + "/addgroup",
            type:1,
            btn: ['确定','取消'],
            closeBtn: 0,
            width: 650,
            height: 260,
            offset:'150px',
            anim:2,
            yes: function (index, layero) {
                $.modal.close(index);
                $.table.refresh(); // 关闭后刷新表格数据（不刷新页面）
            }
        };
        $.modal.openOptions(options);
    }

    //新增
    function addressAdd() {
        var options = {
            title: ['新建联系人','text-align:center;font-size:18px;color:white;height:60px;line-height:60px;background-color:#0042a4'],
            url: prefix + "/addbook",
            type:1,
            btn: ['确定','取消'],
            closeBtn: 0,
            width: 750,
            height: 520,
            offset:'150px',
            anim:2,
            yes: function (index, layero) {
                $.modal.close(index);
                $.table.refresh(); // 关闭后刷新表格数据（不刷新页面）
            }
        };
        $.modal.openOptions(options);
    }

    function queryUserList() {
        var options = {
            url: prefix + "/list",
            height: 580,
            pagination:false,
            sidePagination: "client",
            virtualScroll: true,
            modalName: "人员信息",
            columns: [{
                checkbox: true,
            },
                {
                    field: 'id',
                    title: '主键id',
                    visible: false
                },
                {
                    field: 'bookName',
                    title: '姓名',
                    align:"center",
                    width: 10,
                    widthUnit:"%"
                },
                {
                    field: 'information',
                    title: '电话',
                    align:"center",
                    width: 20,
                    widthUnit:"%"
                },
                {
                    field: 'email',
                    title: '电子邮箱',
                    align:"center",
                    width: 20,
                    widthUnit:"%"
                },
                {
                    field: 'email',
                    title: '其他联系方式',
                    align:"center",
                    width: 20,
                    widthUnit:"%"
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn-style3 ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')">编辑</a> ');
                        actions.push('|');
                        actions.push('<a class="btn-style3" href="javascript:void(0)">详情</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }

    function queryGroupTree() {

    }
</script>
</html>