<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./layui/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<blockquote class="layui-elem-quote">
  LayIM 是基于 layui 的一款用于开发网页端聊天系统的纯静态 UI 界面解决方案，其包含的只是一套前端源代码素材和相关的模拟示例，没有后端程序及数据库存储等服务。
</blockquote>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>面板外的操作示例</legend>
</fieldset>

<div class="site-demo-button">
  <button class="layui-btn site-demo-layim" data-type="chat">自定义会话</button>
  <button class="layui-btn site-demo-layim" data-type="message">接受好友的消息</button>
  <button class="layui-btn site-demo-layim" data-type="messageAudio">接受音频消息</button>
  <button class="layui-btn site-demo-layim" data-type="messageVideo">接受视频消息</button>
  <button class="layui-btn site-demo-layim" data-type="messageTemp">接受临时会话消息</button>

  <br>

  <button class="layui-btn site-demo-layim" data-type="add">申请好友</button>
  <button class="layui-btn site-demo-layim" data-type="addqun">申请加群</button>
  <button class="layui-btn site-demo-layim" data-type="addFriend">同意好友</button>
  <button class="layui-btn site-demo-layim" data-type="addGroup">增加群组到主面板</button>
  <button class="layui-btn site-demo-layim" data-type="removeFriend">删除主面板好友</button>
  <button class="layui-btn site-demo-layim" data-type="removeGroup">删除主面板群组</button>

  <br>
  <button class="layui-btn site-demo-layim" data-type="setGray">置灰离线好友</button>
  <button class="layui-btn site-demo-layim" data-type="unGray">取消好友置灰</button>
  <button class="layui-btn site-demo-layim" style="background-color: #3FDD86" data-type="mobile">WAP
    版演示</button>
</div>


<script type="text/javascript" src="./layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
  layui.config({
    base: '/layui/modules/',
    layimAssetsPath: '/layui/modules/layim/dist/layim-assets/' //layim 资源文件所在目录
  }).extend({
    layim: 'layim/dist/layim' //配置 layim 组件所在的路径
  }).use('layim', function(layim) { //加载组件
    var layim = layui.layim;

    //演示自动回复
    var autoReplay = [
      '您好，我现在有事不在，一会再和您联系。',
      '你没发错吧？face[微笑] ',
      '这是一段演示消息 face[哈哈] ',
      '演示消息 face[心] face[心] face[心] ',
      'face[威武] face[威武] face[威武] face[威武] ',
      '<（@￣︶￣@）>',
      '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
      'face[黑线]  你慢慢说，别急……',
      '(*^__^*) face[嘻嘻]'
    ];

    //基础配置
    layim.config({
      //初始化接口
      init: {
        url: 'https://layui.yii666.com/layim/pro/demo/json/getList.json.js',
        data: {}
      }
      //查看群员接口
      ,
      members: {
        url: 'https://layui.yii666.com/layim/pro/demo/json/getMembers.json.js',
        data: {}
      }

      ,
      uploadImage: {
        url: '' //（返回的数据格式见下文）
        ,
        type: '' //默认post
      },
      uploadFile: {
        url: '' //（返回的数据格式见下文）
        ,
        type: '' //默认post
      }

      ,
      isAudio: true //开启聊天工具栏音频
      ,
      isVideo: true //开启聊天工具栏视频

      //扩展工具栏
      ,
      tool: [{
        alias: 'code',
        title: '代码',
        icon: '&#xe64e;'
      }]

      //,brief: true //是否简约模式（若开启则不显示主面板）

      //,title: 'WebIM' //自定义主面板最小化时的标题
      //,right: '100px' //主面板相对浏览器右侧距离
      //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
      ,
      initSkin: '3.jpg' //1-5 设置初始背景
      //,skin: ['aaa.jpg'] //新增皮肤
      //,isfriend: false //是否开启好友
      //,isgroup: false //是否开启群组
      //,min: true //是否始终最小化主面板，默认false
      //,notice: true //是否开启桌面消息提醒，默认false
      //,voice: false //声音提醒，默认开启，声音文件为：default.mp3

      ,
      msgbox: layui.cache.layimAssetsPath + 'html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
      ,
      find: layui.cache.layimAssetsPath + 'html/find.html' //发现页面地址，若不开启，剔除该项即可
      ,
      chatLog: layui.cache.layimAssetsPath + 'html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可

    });
    //监听在线状态的切换事件
    layim.on('online', function(status) {
      layer.msg(status);
    });

    //监听签名修改
    layim.on('sign', function(value) {
      layer.msg(value);
    });
    //监听自定义工具栏点击，以添加代码为例
    layim.on('tool(code)', function(insert) {
      layer.prompt({
        title: '插入代码 - 工具栏扩展示例',
        formType: 2,
        shade: 0
      }, function(text, index) {
        layer.close(index);
        insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
      });
    });

    //监听layim建立就绪
    layim.on('ready', function(res) {
      //console.log(res.mine);
      layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得
    });
    //监听发送消息
    layim.on('sendMessage', function(data) {
      var To = data.to;
      //console.log(data);

      if (To.type === 'friend') {
        layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
      }

      //演示自动回复
      setTimeout(function() {
        var obj = {};
        if (To.type === 'group') {
          obj = {
            username: '模拟群员' + (Math.random() * 100 | 0),
            avatar: layui.cache.layimAssetsPath + 'images/face/' + (Math.random() * 72 | 0) + '.gif',
            id: To.id,
            type: To.type,
            content: autoReplay[Math.random() * 9 | 0]
          }
        } else {
          obj = {
            username: To.name,
            avatar: To.avatar,
            id: To.id,
            type: To.type,
            content: autoReplay[Math.random() * 9 | 0]
          }
          layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
        }
        layim.getMessage(obj);
      }, 1000);
    });
    //监听查看群员
    layim.on('members', function(data) {
      //console.log(data);
    });

    //监听聊天窗口的切换
    layim.on('chatChange', function(res) {
      var type = res.data.type;
      console.log(res.data.id)
      if (type === 'friend') {
        //模拟标注好友状态
        //layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
      } else if (type === 'group') {
        //模拟系统消息
        layim.getMessage({
          system: true,
          id: res.data.id,
          type: "group",
          content: '模拟群员' + (Math.random() * 100 | 0) + '加入群聊'
        });
      }
    });


    //面板外的操作
    var $ = layui.jquery,
            active = {
              chat: function() {
                //自定义会话
                layim.chat({
                  name: '小测试',
                  type: 'friend',
                  avatar: '/other/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg',
                  id: 1008612
                });
                layer.msg('也就是说，此人可以不在好友面板里');
              },
              message: function() {
                //制造好友消息
                layim.getMessage({
                  username: "测试1",
                  avatar: "/static/images/fly/avatar/default.png",
                  id: "100001",
                  type: "friend",
                  content: "嗨，你好！这是一条测试内容。演示标记：" + new Date().getTime(),
                  timestamp: new Date().getTime()
                });
              },
              messageAudio: function() {
                //接受音频消息
                layim.getMessage({
                  username: "测试1",
                  avatar: "/static/images/fly/avatar/default.png",
                  id: "100001",
                  type: "friend",
                  content: "audio[http://gddx.sc.chinaz.com/Files/DownLoad/sound1/201510/6473.mp3]",
                  timestamp: new Date().getTime()
                });
              },
              messageVideo: function() {
                //接受视频消息
                layim.getMessage({
                  username: "测试1",
                  avatar: "/static/images/fly/avatar/default.png",
                  id: "100001",
                  type: "friend",
                  content: "video[http://www.w3school.com.cn//i/movie.ogg]",
                  timestamp: new Date().getTime()
                });
              },
              messageTemp: function() {
                //接受临时会话消息
                layim.getMessage({
                  username: "测试X",
                  avatar: "/static/images/fly/avatar/default.png",
                  id: "198909151014",
                  type: "friend",
                  content: "临时：" + new Date().getTime()
                });
              },
              add: function() {
                //实际使用时数据由动态获得
                layim.add({
                  type: 'friend',
                  username: '测试Y',
                  avatar: '/static/images/fly/avatar/default.png',
                  submit: function(group, remark, index) {
                    layer.msg('好友申请已发送，请等待对方确认', {
                      icon: 1,
                      shade: 0.5
                    }, function() {
                      layer.close(index);
                    });

                    //通知对方
                    /*
                    $.post('/im-applyFriend/', {
                      uid: info.uid
                      ,from_group: group
                      ,remark: remark
                    }, function(res){
                      if(res.status != 0){
                        return layer.msg(res.msg);
                      }
                      layer.msg('好友申请已发送，请等待对方确认', {
                        icon: 1
                        ,shade: 0.5
                      }, function(){
                        layer.close(index);
                      });
                    });
                    */
                  }
                });
              },
              addqun: function() {
                layim.add({
                  type: 'group',
                  username: '测试群组1',
                  avatar: '/static/images/fly/avatar/default.png',
                  submit: function(group, remark, index) {
                    layer.msg('申请已发送，请等待管理员确认', {
                      icon: 1,
                      shade: 0.5
                    }, function() {
                      layer.close(index);
                    });

                    //通知对方
                    /*
                    $.post('/im-applyGroup/', {
                      uid: info.uid
                      ,from_group: group
                      ,remark: remark
                    }, function(res){

                    });
                    */
                  }
                });
              },
              addFriend: function() {
                var user = {
                  type: 'friend',
                  id: 1234560,
                  username: '测试A' //好友昵称，若申请加群，参数为：groupname
                  ,
                  avatar: '/static/images/fly/avatar/default.png' //头像
                  ,
                  sign: '测试内容'
                }
                layim.setFriendGroup({
                  type: user.type,
                  username: user.username,
                  avatar: user.avatar,
                  group: layim.cache().friend //获取好友列表数据
                  ,
                  submit: function(group, index) {
                    //一般在此执行Ajax和WS，以通知对方已经同意申请
                    //……

                    //同意后，将好友追加到主面板
                    layim.addList({
                      type: user.type,
                      username: user.username,
                      avatar: user.avatar,
                      groupid: group //所在的分组id
                      ,
                      id: user.id //好友ID
                      ,
                      sign: user.sign //好友签名
                    });

                    layer.close(index);
                  }
                });
              },
              addGroup: function() {
                layer.msg('已成功把[测试群组33]添加到群组里', {
                  icon: 1
                });
                //增加一个群组
                layim.addList({
                  type: 'group',
                  avatar: "/static/images/fly/avatar/default.png",
                  groupname: '测试群组33',
                  id: "12333333",
                  members: 0
                });
              },
              removeFriend: function() {
                layer.msg('已成功删除[测试2]', {
                  icon: 1
                });
                //删除一个好友
                layim.removeList({
                  id: 100001222,
                  type: 'friend'
                });
              },
              removeGroup: function() {
                layer.msg('已成功删除[测试群组33]', {
                  icon: 1
                });
                //删除一个群组
                layim.removeList({
                  id: 12333333,
                  type: 'group'
                });
              }
              //置灰离线好友
              ,
              setGray: function() {
                layim.setFriendStatus(168168, 'offline');

                layer.msg('已成功将好友[测试4]置灰', {
                  icon: 1
                });
              }
              //取消好友置灰
              ,
              unGray: function() {
                layim.setFriendStatus(168168, 'online');

                layer.msg('成功取消好友[测试4]置灰状态', {
                  icon: 1
                });
              }
              //移动端版本
              ,
              mobile: function() {
                var device = layui.device();
                var mobileHome = 'https://layui.yii666.com/layim/pro/demo/mobile.html';
                if (device.android || device.ios) {
                  return location.href = mobileHome;
                }
                var index = layer.open({
                  type: 2,
                  title: '移动版演示 （或手机扫右侧二维码预览）',
                  content: mobileHome,
                  area: ['375px', '667px'],
                  shadeClose: true,
                  scrollbar: false,
                  shade: 0.8,
                  end: function() {
                    layer.close(index + 2);
                  }
                });
              }
            };
    $('.site-demo-layim').on('click', function() {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>

</body>
</html>