<!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" name="bookName" class="form-control searchTag" placeholder="搜索姓名关键字"/>
                            <a class="btn btn-success"  style="width:65px;margin-left: 10px;height: 36px;background-color: #185EFF;" onclick="$.table.search()">
                                搜索
                            </a>
                        </li>
                    </ul>
                </div>
                <input hidden type="text" name="addressGroup" id="addressGroup">
                <input hidden type="text" name="keyword" id="keyword">
            </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" id="deleteAddress" onclick="deleteAddress()">
                    删除联系人
                </a>
                <a class="btn btn-style2" onclick="addressgroupAdd()">
                    创建组
                </a>
                <a class="btn btn-style2" id="deleteGroup" onclick="deleteAddressGroup()">
                    删除组
                </a>
                <a class="btn btn-style2" onclick="copyAddress()">
                    复制到组
                </a>
                <a class="btn btn-style2" id="moveGroup" onclick="moveAddress()">
                    移动到组
                </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  class="click click-bg"  th:onclick="setOptionParam([[${item.id}]],[[${item.groupName}]])"   th:if="${rwkAddressGroups != null}" th:each="item : ${allddressGroups}">
                            <div>[[${item.groupName}]](<span >[[${item.num}]]</span>)</div>
                        </li>
                        <li class="click" th:onclick="setOptionParam([[${item.id}]],[[${item.groupName}]])"   th:if="${rwkAddressGroups != null}" th:each="item : ${rwkAddressGroups}">
                            <div>[[${item.groupName}]](<span >[[${item.num}]]</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();
        $('#deleteGroup').addClass("disabled");
        $('#moveGroup').addClass("disabled");
    });


    $('#click-all').click(function () {
        $('#delete').removeClass("disabled");
    });


    var operateflag=false;
    /**
     * 点击修改背景色 按钮权限控制器
     */
    $('.click').click(function () {
        $('.click-bg').removeClass("click-bg");
        this.classList.add("click-bg");
        $('.click-bg').each(function(){
            if ($(this).text().search("所有联系人")==-1){
                $('#deleteAddress').addClass("disabled");
                $('#moveGroup').removeClass("disabled");
                $('#deleteGroup').removeClass("disabled");
                operateflag=true;
            }else {
                $('#deleteAddress').removeClass("disabled");
                $('#moveGroup').addClass("disabled");
                $('#deleteGroup').addClass("disabled");
                operateflag=false;
            }
        });
    });

    //新增
    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) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
                $.modal.close(index);
                window.location.reload(true);
            }
        };
        $.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) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
                $.modal.close(index);
                window.location.reload(true);
            }
        };
        $.modal.openOptions(options);
    }


    //修改联系人
    function editAddress(id) {
        var options = {
            title: ['修改联系人','text-align:center;font-size:18px;color:white;height:60px;line-height:60px;background-color:#0042a4'],
            url: prefix + "/edit/"+id,
            type:1,
            btn: ['确定','取消'],
            closeBtn: 0,
            width: 750,
            height: 520,
            offset:'150px',
            anim:2,
            yes: function (index, layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
                $.modal.close(index);
                window.location.reload(true);
            }
        };
        $.modal.openOptions(options);
    }

    // 复制到组
    function copyAddress() {
        var rows = $.table.selectFirstColumns();
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }else {
            var options = {
                title: ['复制联系人','text-align:center;font-size:18px;color:white;height:60px;line-height:60px;background-color:#0042a4'],
                url: prefix + "/selectGroupsTree/"+rows,
                type:1,
                btn: ['确定','取消'],
                closeBtn: 0,
                width: 750,
                height: 520,
                offset:'150px',
                anim:2,
                yes: function (index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.submitHandler(index, layero);
                    $.modal.close(index);
                    window.location.reload(true);
                }
            };
            $.modal.openOptions(options);
        }
    }

    // 移动
    function moveAddress() {
        var rows = $.table.selectFirstColumns();
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }else {
            var options = {
                title: ['移动联系人','text-align:center;font-size:18px;color:white;height:60px;line-height:60px;background-color:#0042a4'],
                url: prefix + "/selectGroupsTreeMove/"+rows+"gId="+operateGroupId,
                type:1,
                btn: ['确定','取消'],
                closeBtn: 0,
                width: 750,
                height: 520,
                offset:'150px',
                anim:2,
                yes: function (index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.submitHandler(index, layero);
                    $.modal.close(index);
                    window.location.reload(true);
                }
            };
            $.modal.openOptions(options);
        }
    }


    var operateAddressGroupName='';
    var operateGroupId='';
    function setOptionParam(id,name){
        operateAddressGroupName=name;
        operateGroupId=id;
        $('#addressGroup').val(id);
        $('#keyword').val(name);
        $.table.search();
        $('#keyword').val('');
    }

    function queryUserList() {
        var options = {
            url: prefix + "/list",
            editUrl: prefix + "/edit/{id}",
            height: 580,
            pagination:false,
            sidePagination: "client",
            virtualScroll: true,
            modalName: "人员信息",
            showFooter: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            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="editAddress(\'' + row.id + '\')">编辑</a> ');
                        if (operateflag){
                            actions.push('|');
                            actions.push('<a class="btn-style3" href="javascript:void(0)" onclick="deleteGroup(\'' + row.id + '\')">删除关系</a>');
                        }
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }

    function deleteGroup(id) {
        var url=prefix + "/addgroup/delete";
        var data = { "ids": id };
        $.operate.submit(url, "post", "json", data);
        window.location.reload(true);
    }
    
    function deleteAddressGroup() {
        $.modal.confirm("确认要删除选中的[<span style='color: orange'>"+operateAddressGroupName+"</span>]吗?<br><span style='color: red'>注：其分组下的成员关系都将被删除</span>", function() {
            var url =prefix + "/addgroup/delete/all";
            var data = { "groupid": operateGroupId,"groupname":operateAddressGroupName };
            $.operate.submit(url, "post", "json", data);
            parent.location.reload(true);
        });
    }

    function deleteAddress() {
        var url =prefix + "/address/delete";
        var rows = $.table.selectFirstColumns();
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $.modal.confirm("确认要删除选中的" + rows.length + "条数据吗?", function() {
            var ids = { "ids": rows.join() };
            $.operate.submit(url, "post", "json", ids);
            parent.location.reload(true);
        });
    }
</script>
</html>