<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>群组管理</title>
	<meta name="decorator" content="default"/>
	<link href="${ctxStatic}/common/css/animate.css" rel="stylesheet">
	<script type="text/javascript">
		$(document).ready(function() {
			top.$.jBox.closeTip();
		});
	    function searchFriend(layGroupId){
			top.layer.open({
			    type: 2,  
			    area: ['80%','80%'],
			    title:"添加群组成员",
			    name:'friend',
			    content: "${ctx}/iim/contact/searchUsers?comId=comId" ,
			    btn: ['确定', '关闭'],
			    yes: function(index, layero){
			    	 var iframeWin = layero.find('iframe')[0].contentWindow; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
			    	 var ids = iframeWin.getSelectedIds();

			    	 if(ids == "-1"){
				    	 return;
			    	 }
			    	 window.location = "${ctx}/iim/layGroup/addUser?ids="+ids+"&groupid="+layGroupId+"&comId=comId";
					 top.layer.close(index);//关闭对话框。
				  },
				  cancel: function(index){ 
	    	       }
			}); 
		};

		function addGroup(){
			openDialog("创建群组","${ctx}/iim/layGroup/form","800px", "500px");

		}
	</script>
    <style>
        body{
            background-color:transparent;
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26FFFFFF, endColorstr=#26FFFFFF);
            color:#ffffff;
            background-color:rgba(255,255,255,0);
            height:100%;
        }
        .contact-box a,
        .contact-box a:hover{
            color:#333333;
        }
        .contact-box a.white,
        .contact-box a.white:hover{
            color:#ffffff;
        }
    </style>
</head>
<body>
<div class="wrapper wrapper-content">
    <div class="layui-row">
        <div class="full-width fl">
            <div id="queryDiv">
            </div>
        </div>
        <div class="full-width fl">
            <div class="contentShadow layui-form contentDetails">

                <br class="row">
            
                <c:forEach items="${layGrouplist}" var="layGroup">
                        <div class="col-sm-4" style="padding: 0">
                            <div style="padding: 0 15px 15px 15px;">
                        <div class="contact-box">
                            <div class="ibox-title">
                                 <a href="javascript:void(0)"><img alt="member" class="img-circle" src="${layGroup.avatar}" width="50px" height="50px">
                                    ${layGroup.groupname}</a>

                                <span class=" pull-right">
                                <c:if test="${layGroup.createBy.name == fns:getUser().name}">
                                    <a href="${ctx}/iim/layGroup/delete?id=${layGroup.id}" onclick="return confirmx('确认要解散该群组吗？', this.href)"   class="btn btn-danger white btn-xs"> 解散</a>
                                </c:if>
                                 <c:if test="${layGroup.createBy.name != fns:getUser().name}">
                                        <a href="${ctx}/iim/layGroup/logout?user.id=${fns:getUser().id}&group.id=${layGroup.id}" onclick="return confirmx('确认要退出该群组吗？', this.href)"   class="btn btn-danger btn-xs white"> 退出</a>
                                </c:if>
                                </span>
                            </div>
                            <div class="ibox-content">
                                <div class="team-members">

                                        <%--<a href="javascript:void(0)" style="float:left"><img  class="img-circle" src="${layGroup.createBy.photo}">
                                        ${layGroup.createBy.name}(群主)</a>--%>
                                     <c:forEach items="${layGroup.layGroupUserList}" var="layGroupUser">

                                        <c:if test="${layGroup.createBy.id == fns:getUser().id}">
                                            <c:choose>
                                                <c:when test="${layGroup.createBy.id != layGroupUser.user.id}">
                                                    <div class="ibox-tools" style="float:left">
                                                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)"><img  class="img-circle" src="${layGroupUser.user.photo}">
                                                                ${layGroupUser.user.name}</a>
                                                        <ul class="dropdown-menu dropdown-user">
                                                            <li>
                                                                <a href="${ctx}/iim/layGroup/logout?user.id=${layGroupUser.user.id}&group.id=${layGroup.id}" onclick="return confirmx('确认要删除该成员吗？', this.href)" > 删除</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </c:when>
                                                <c:otherwise>
                                                    <div class="ibox-tools" style="float:left">
                                                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)"><img  class="img-circle" src="${layGroupUser.user.photo}">
                                                                ${layGroupUser.user.name}(群主)</a>
                                                    </div>
                                                </c:otherwise>
                                            </c:choose>
                                        </c:if>
                                        <c:if test="${layGroup.createBy.id != fns:getUser().id}">
                                                <a href="javascript:void(0)"><img  class="img-circle" src="${layGroupUser.user.photo}">
                                                ${layGroupUser.user.name}</a>
                                        </c:if>
                                      </c:forEach>
                                     <c:if test="${layGroup.createBy.name == fns:getUser().name}">
                                        <a href="javascript:void(0)" onclick="searchFriend('${layGroup.id}')"><img  class="img-circle" src="${ctxStatic}/images/add_user.jpg">
                                            添加</a>
                                    </c:if>
                                </div>
                                <h4>群组简介</h4>
                                <p>
                                        ${layGroup.remarks}
                                </p>

                            </div>
                        </div>
                            </div>
                        </div>
                </c:forEach>
                 <div class="col-sm-4" style="padding: 0">
                         <div style="padding: 0 15px 15px 15px;">
                            <div class="contact-box">
                                <a href="javascript:void(0)" onclick="addGroup()">
                                    <div class="col-sm-4">
                                        <div class="text-center">
                                            <img alt="image" style="height:140px;width:140px" class="img-circle m-t-xs img-responsive" src="${ctxStatic}/images/add_user.jpg">
                                            <div class="m-t-xs font-bold"></div>
                                        </div>
                                    </div>
                                    <div class="col-sm-8">
                                        <br/>
                                        <h1><strong>创建群组</strong></h1>
                                    </div>
                                    <div class="clearfix"></div>
                                </a>
                            </div>
                         </div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
    </div>
</div>
<script>
    resizeListWindow3();
    $(window).resize(function(){
        resizeListWindow3();
    });
</script>
</body>
</html>