<?php
/*
 * @Team : 孜然云
 * @Author : 孜然
 * @Url : zrv7.com
 * @Date : 2021-12-27 21:56
 * @Project : 孜然授权系统
 * @Description : 基于ZR框架开发的授权系统
 * @Qq : 2937978586
 * @Wx : hhr2937978586 
 * @Email : 2937978586@qq.com
 * @Read me : 孜然授权系统，是一款多模板/多用途/多权限的授权系统
 * @Remind : 孜然授权系统受《劳动知识产权》和《计算机软件著作法》的法律保护，使用破解即违法法律
 * @Dbfk : 如果您已经使用了盗版，孜然可以通过上述两法告你，不过我是不会这么做的，如果是传播盗版那么就必定告上法院
 */
$title='在线聊天室';
require_once 'head.php';
?>
<link rel="stylesheet" type="text/css" href="../assets/chat/css/hui.css" />
<link type="text/css" href="../assets/chat/css/zr.css" rel="stylesheet" />
<link href="../assets/chat/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="../assets/chat/css/reset.css">
<script src="../chat/js/jquery.min.js"></script>
<script type="text/javascript" src="../assets/chat/js/jquery.qqFace.js"></script>
<script type="text/javascript" src="../assets/chat/js/hui.js"></script>
<style>
.qqFace { margin-top: 4px; background: #fff; padding: 2px; border: 1px #dfe6f6 solid; }
.qqFace table td { padding: 0px; }
.qqFace table td img { cursor: pointer; border: 1px #fff solid; }
.qqFace table td img:hover { border: 1px #0066cc solid; }
</style>

<div class="layui-fluid" id="LAY-component-timeline">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header"><img style="border-radius:50%;width:30px;height:30px;"src="../assets/img/logo.png" alt="ZR"/>&nbsp;<b><?=$conf['name']?></b></div>
<div class="layui-card-body"> 

<div id="divDetail" class="hui-wrap" style="height: 315px; overflow:scroll">
<div style="border: 1px#000000; width: 90%; margin: 0 auto;">
<div class="lite-chatbox"> 
<div id="ZRchat"></div>
</div>
</div>
</div>
<div class="hui-form-textarea">
<div class="layadmin-messag-icon">
<a href="javascript:chat_select();"><i class="layui-icon layui-icon-picture"style="font-size: 21px; color: #1E9FFF;"></i></a>&nbsp;
<a href="javascript:br();"><i class="layui-icon layui-icon-return"style="font-size: 20px; color: #1E9FFF;"></i></a>&nbsp;
<a href="javascript:move();"><i class="layui-icon layui-icon-senior"style="font-size: 22px; color: #1E9FFF;"></i></a>&nbsp;
<a href="javascript:u();"><i class="layui-icon layui-icon-fonts-u"style="font-size: 18px; color: #1E9FFF;"></i></a>&nbsp;
 
</div>
<textarea placeholder="开始你的表演..." id="con" name="con"></textarea>
</div>
<div style="padding:10px;">
<button lay-submit lay-filter="noticeBtn" class="hui-button hui-button-large hui-primary">发送消息</button>
</div>
<script>
//聊天室UI
layui.use('util', function () {
var util = layui.util;
util.fixbar({
bar2: '&#xe667;',
bar1: '&#xe60b;',
click: function (type) {
if (type === 'bar1') {
layer.alert('换行:[br]<br>链接:[url=http://链接地址]名称[/url]<br>图片:[img]图片链接地址[/img]<br>移动文字:[move]内容[/move]', {
title: '聊天室说明',
icon: '3',
btn: ['知道了']
});
}
}
});
});
//图片
function chat_select(){
hui.upToast('图片格式为：[img]图片地址[/img]',"success"); 
}
//获取系统信息
function chat(){
hui.loading("获取消息中...");
$.ajax({
type : "GET",
url : "ajax/chat_ajax.php?act=get_chat",
dataType : 'json',
timeout:10000,
success : function(data) {
hui.closeLoading();
if(data.code==0){
$("#ZRchat").html(data.data);

var div = document.getElementById('divDetail'); 
div.scrollTop = div.scrollHeight; 

}
},
error:function(data){
hui.closeLoading();
hui.iconToast("获取消息失败", "error");
}
});
}
chat();
window.canAutoScroll = true;
//只要滚动事件发生，就停止自动滚动定位方法的执行
var timeout = null;
var panel = $("#divDetail");
panel.scroll(function(){
if(timeout != null){
 window.clearTimeout(timeout);
}
window.canAutoScroll = false;
//500ms后，假定认为停止滚动
timeout = window.setTimeout(function(){
window.canAutoScroll = true;
},3000);
});


window.setInterval(function() {

$.ajax({
type : "GET",
url : "ajax/chat_ajax.php?act=get_chat",
dataType : 'json',
timeout:10000,
success : function(data) {
if(data.code==0){
$("#ZRchat").html(data.data);
if(window.canAutoScroll){
var div = document.getElementById('divDetail'); 
div.scrollTop = div.scrollHeight; 
 }
}
}
});

},3000);
function u(){
var con= $("#con").val();
hui.loading("正在将字体变粗中....");
$("#con").val('[u]'+con+'[/u]');
hui.closeLoading();
hui.upToast('执行成功！',"success"); 
}
function br(){
layer.closeAll();
var con= $("#con").val();
hui.loading("正在换行中....");
$("#con").val(con+'[br]');
hui.closeLoading();
hui.upToast('系统以为您换行！',"success"); 
}
function move(){
layer.closeAll();
var con= $("#con").val();
hui.loading("正在为字体添加移动效果中....");
$("#con").val('[move]'+con+'[/move]');
hui.closeLoading();
hui.upToast('移动效果添加成功！',"success"); 
}
function see_user(uid) {
var ii = layer.msg('正在用户信息中,请稍后...', {icon: 16, time: 10 * 1000});
$.ajax({
type : 'GET',
url : 'ajax/chat_ajax.php?act=see_user&uid='+uid,
dataType : 'json',
success : function(data) {
layer.close(ii);
if(data.code == 0){
var confirmobj = layer.confirm(data.data, {
btn: ['@他','了解'],
maxmin: true,
area:['98%','80%']
}, function(){
Addstr('@'+data.user+' ');
}, function(){
layer.close(confirmobj);
});
}else{
layer.msg(data.msg, {icon: 5});
}
} ,
error:function(data){
layer.close(ii);
layer.msg('服务器错误！', {icon: 5});
return false;
}
});
}
layui.use(['form', 'element','jquery', 'admin', 'tagsInput', 'notice'], function () {
    var form = layui.form;
    var $ = layui.jquery;
    var tagsInput = layui.tagsInput;
    var admin = layui.admin;
    var notice = layui.notice;
    form.on('submit(noticeBtn)', function (data) {
        var con = $("textarea[name='con']").val(); 
        admin.btnLoading('[lay-filter="noticeBtn"]',' 发布中');
        var ii = layer.load(2, {shade:[0.1,'#fff']});
        notice.destroy();
        $.ajax({
            type: "POST",
            url: "ajax/chat_ajax.php?act=chat",
            data : {con:con},
            dataType: "json",
            success: function(data) {
                layer.close(ii);
                admin.btnLoading('[lay-filter="noticeBtn"]', false);
                if (data.code == 0) {
					$("#con").val('');
                    notice.msg(data.msg, {animateInside: true, icon: 1});
                } else {
                    notice.msg(data.msg, {animateInside: true, icon: 2});
                }
            },
            error:function(data){
                notice.msg('代码错误！作者QQ2937978586', {animateInside: true, icon: 2});
                return false;
            }
        });
        return false;
    });
});
</script>