<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>微信会话存档</title>
    <link rel="stylesheet" href="/css/information-system3.css?v=201508112" type="text/css"/>
    <script type="text/javascript" src="/min/?f=/js/information-system3.min.js,/js/common.js&v=20190128"></script>
    <link rel="shortcut icon" href="/bootstrap/img/glyphicons_290_skull.png">
    <style type="text/css">
        <?php echo empty($userid)?'':'.useridandhidden{display:none;}'; ?>
    </style>

</head>
<body>

<div class="container-fluid">
    <div class="row">

        <div class="col-md-5 useridandhidden">
            <h4>成员列表</h4>
            <div class="list-group" id="permit_user_list">
            </div>
        </div>

        <div class="col-md-5 useridandhidden">
            <H4>客户列表 <span class="badge" id="externalcontact_count">0</span> <small class="pull-right">
                    <a>私聊信息</a> |
                    <a>群聊信息</a>
                </small></h4>
            <div class="well well-sm">
                <form class="form-inline">
                    <div class="form-group">
                        <input type="text" class="form-control" id="contact_search_username" placeholder="搜索客人">
                    </div>
                    <button type="button" class="btn btn-default"
                            onclick="get_externalcontact_list(0,$('#contact_search_username').val());">搜索
                    </button>
                </form>
            </div>
            <div class="list-group" id="externalcontact_list" style="overflow-y: scroll;max-height: 680px;">
            </div>
        </div>

        <div class="col-md-14">
            <h4>聊天记录</h4>
            <div class="well well-sm useridandhidden">
                <form class="form-inline">
                    <a>近一周</a> |
                    <a>近一月</a>
                    <div class="form-group">
                        <input name="potential_customers_ApplydateStart" id="potential_customers_ApplydateStart"
                               type="text"
                               placeholder="开始日期"
                               class="form-control ShowMeTheDatePicker_cn"
                               value="<?php echo date('Y-m-d', strtotime('-1 week last monday')); ?>">
                    </div>
                    <div class="form-group">
                        <input name="potential_customers_ApplydateStart" id="potential_customers_ApplydateStart"
                               type="text"
                               placeholder="结束时间"
                               class="form-control ShowMeTheDatePicker_cn"
                               value="<?php echo date('Y-m-d', strtotime('-1 week last monday')); ?>">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="exampleInputName2" placeholder="搜索关键词">
                    </div>
                    <button type="button" class="btn btn-default" disabled>搜索</button>
                </form>
            </div>

            <div id="chat_msg_list" class="row" style="overflow-y: scroll;max-height: 680px;">
            </div>

            <nav aria-label="Page navigation" class="text-center">
                <ul class="pagination" id="chat_msg_list_page_nav">
                </ul>
            </nav>

        </div>

    </div>
</div>

<script type="text/javascript">
    //ES6转ES5，HT只能调用IE来显示  https://babeljs.io/repl
    $(document).ready(function () {
        <?php echo empty($userid) ? 'get_permit_user_list();' : "get_chat_msg_list('{$userid}',0);" ?>
    });

    let g_permit_user = '';//当前选择的顾问
    let g_externalcontact_user = '';//当前选中的客人


    //获取会话存档的用户列表
    function get_permit_user_list() {
        $.ajax({
            type: "post",
            dataType: "json",
            url: "<?php echo site_url('weixinchat/show_me_the_data')?>",
            data: {
                "url": '/weixin/wxwork/get_permit_user_list'
            },
            success: function (data, textStatus) {
                document.getElementById('permit_user_list').innerHTML = '';
                permit_user_list = '';
                data.Result && data.errcode == '0' && data.Result.forEach(function (item) {
                    permit_user_list += `
                             <a href="javascript:void(0);" onclick="get_externalcontact_list('${item.userid}');g_permit_user='${item.userid}';" class="list-group-item">
                            <div class="row">
                                <div class="col-md-4" style="padding: 0 0 0 15px;">
                                    <img src="${item.avatar}" class="img-responsive">
                                </div>
                                <div class="col-md-20">
                                    <div>
                                        <div class="list-group-item-heading">${item.username}</div>
                                        <p class="list-group-item-text">${item.userid}</p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    `;
                })
                document.getElementById('permit_user_list').innerHTML = permit_user_list;
            },
            error: function () {
                $.modaldialog.error("\u53d1\u751f\u9519\u8bef\uff0c\u8bf7\u8054\u7cfbYCC")
            }
        })
    }

    //获取客户列表
    function get_externalcontact_list(permit_user, username = '') {
        if (!permit_user && g_permit_user) {
            permit_user = g_permit_user;
        }
        $.ajax({
            type: "post",
            dataType: "json",
            url: "<?php echo site_url('weixinchat/show_me_the_data')?>",
            data: {
                "url": '/weixin/wxwork/get_externalcontact_list?userid=' + permit_user + '&searchstr=' + username,
            },
            success: function (data, textStatus) {
                document.getElementById('chat_msg_list').innerHTML = '';
                document.getElementById('externalcontact_count').innerHTML = '0';
                externalcontact_list = '';
                data.Result && data.errcode == '0' && data.Result.forEach(item => {
                    externalcontact_list += `
                             <a href="javascript:void(0);" onclick="get_chat_msg_list('${item.userid}',0);g_externalcontact_user='${item.userid}';" class="list-group-item">
                            <div class="row">
                                <div class="col-md-4" style="padding: 0 0 0 15px;">
                                    <img src="${item.avatar}" class="img-responsive">
                                </div>
                                <div class="col-md-20">
                                    <div>
                                        <div class="list-group-item-heading">${item.username}</div>
                                        <p class="list-group-item-text"></p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    `;
                })
                document.getElementById('externalcontact_list').innerHTML = externalcontact_list;
                document.getElementById('externalcontact_count').innerHTML = data.Result.length;
            },
            error: function () {
                $.modaldialog.error("\u53d1\u751f\u9519\u8bef\uff0c\u8bf7\u8054\u7cfbYCC")
            }
        })
    }

    //获取聊天记录
    const chat_page_count = 20;//每页消息数
    function get_chat_msg_list(user_id, chat_page) {
        $.ajax({
            type: "post",
            dataType: "json",
            url: "<?php echo site_url('weixinchat/show_me_the_data')?>",
            data: {
                "url": `/weixin/wxwork/GetChatmsg?external_userid=${user_id}&Page_count=${chat_page_count}&curr_page=${chat_page}`,
            },
            success: function (data, textStatus) {
                //消息框内容
                document.getElementById('chat_msg_list').innerHTML = '';
                let chat_msg_list = '';
                data.chatmsg && data.errcode == '0' && data.chatmsg.forEach(item => {
                    let content = '';//消息内容
                    switch (item.msgtype) {
                        case 'image':
                            content = `<img src="${item.content.imageurl}" class="img-responsive">`;
                            break;
                        case 'text':
                            content = item.content.text;
                            break;
                        case 'link':
                            content = `<a href="${item.content.link_url}" target="_blank" title="${item.content.description}">${item.content.title}</a>`;
                            break;
                        case 'revoke':
                            content = `<small>撤回了一条消息</small>`;
                            break;
                        case 'file':
                            content = `<a href="${item.content.fileurl}" target="_blank" title="${item.content.filename}">${item.content.filename}</a>`;
                            break;
                        case 'emotion':
                            content = `<img src="${item.content.emotion}" class="img-responsive">`;
                            break;
                        default://未识别的内容，提示识别
                            content = '未识别的消息类型:' + item.msgtype;
                    }

                    chat_msg_list += `
                    <div class="col-md-2" style="padding: 0 0 0 10px;">
                        <img src="${item.from_avatar}"
                             class="img-responsive">
                    </div>
                    <div class="col-md-22">
                        <p class="ptext-muted">${item.from_name} <small>${timestamp_to_date(item.msgtime)}</small></p>
                        <div class="panel panel-default">
                            <div class="panel-body">
                                ${content}
                            </div>
                        </div>
                    </div>
                    `;
                })
                document.getElementById('chat_msg_list').innerHTML = chat_msg_list;

                //滚动条到最底部
                document.getElementById('chat_msg_list').scrollTop = document.getElementById('chat_msg_list').scrollHeight;

                //分页导航
                let chat_msg_list_page_nav = '';
                document.getElementById('chat_msg_list_page_nav').innerHTML = '';
                if (data.chatpage && data.errcode == '0') {
                    let external_userid = data.external_userid;
                    let chat_page_curr = data.chatpage.currpage;
                    let chat_page_total = data.chatpage.totalpage;
                    for (let page_nav_index = 0; page_nav_index < chat_page_total; page_nav_index++) {
                        chat_msg_list_page_nav += `<li class="${chat_page_curr == page_nav_index + 1 ? 'active' : ''}"><a href="javascript:void(0);" onclick="get_chat_msg_list('${external_userid}',${page_nav_index + 1})">${page_nav_index + 1}</a></li>`;
                    }
                    document.getElementById('chat_msg_list_page_nav').innerHTML = chat_msg_list_page_nav;
                }

            },
            error: function () {
                $.modaldialog.error("\u53d1\u751f\u9519\u8bef\uff0c\u8bf7\u8054\u7cfbYCC")
            }
        })
    }

    function timestamp_to_date(timestamp) {
        let date = new Date(timestamp);
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
    }

</script>

</body>
</html>