<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>聊天记录</title>

    <link rel="stylesheet" href="/im/layim-v3.9.6/dist/css/layui.css" />
    <style>
      body .layim-chat-main {
        height: auto;
      }
    </style>
  </head>
  <body>
    <div class="layim-chat-main">
      <ul id="LAY_view"></ul>
    </div>

    <div id="LAY_page" style="margin: 0 10px"></div>

    <textarea title="消息模版" id="LAY_tpl" style="display: none">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea
    >

    <!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->

    <script src="/im/layim-v3.9.6/dist/layui.js"></script>
    <script>
      layui.use(['layim', 'laypage'], function () {
        var layim = layui.layim,
          layer = layui.layer,
          laytpl = layui.laytpl,
          $ = layui.jquery,
          laypage = layui.laypage;

        const token = localStorage.getItem('t_token');
        const fromId = sessionStorage.getItem('currentUserId');

        //聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html

        //开始请求聊天记录
        const api = '/message/list';
        var BASE_URL = localStorage.getItem('IM_BASE_URL') || '//v5sit.51qqt.com/els/im'
        if (location.hostname.includes('localhost')) {
          BASE_URL = 'http://localhost:8888/els/im'
        }

        var param = location.search; //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据
        // console.log(param);
        param = param.replace('?id=', '?chatId=');
        param = param.replace('&type=', '&chatType=');
        $.ajax({
          headers: {
            'X-Access-Token': token
          },
          url: `${BASE_URL}${api}${param}&fromId=${fromId}&pageNo=1`,
          type: 'get',
          contentType: 'application/json',
          dataType: 'json',
          async: true,
          success: function (res) {
            console.log('ajax success', res);

            var html = laytpl(LAY_tpl.value).render({
              data: res.messageList
            });
            $('#LAY_view').html(html);
          },
          error: function () {
            console.log('ajax error');
          }
        });

      });
    </script>
  </body>
</html>
