<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>

<head>

    <title>通讯录</title>
    <meta name="decorator" content="default"/>


	<script type="text/javascript">
	
		function search(n,s){
			$("#searchForm").attr("action","${ctx}/iim/contact/index");
			$("#searchForm").submit();
	    	return false;
	    }
	</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%;
        }
    </style>
</head>

<body>
<div class="wrapper wrapper-content">
    <sys:message content="${message}"/>
    <div class="layui-row">
        <div class="full-width fl">
            <div class="contentShadow layui-row" id="queryDiv">
                <div class="commonQuery">
                    <form:form id="searchForm" modelAttribute="user" action="${ctx}/iim/contact/index" method="post" class="input-group">
                    <div class="layui-item query athird">
                        <label class="layui-form-label">查找联系人：</label>
                        <div class="layui-input-block">
                            <form:input path="name" htmlEscape="false" maxlength="50" placeholder="请输入联系人" class="layui-input form-control"/>
                        </div>
                    </div>
                        <div class="layui-item athird fr">
                            <div class="input-group">
                                <button id="searchReset" style="margin-right: 0px;" class="fixed-btn searchReset fr" onclick="resetSearch()">重置</button>
                                <button id="searchQuery" class="fixed-btn searchQuery fr" onclick="search()">查询</button>
                            </div>
                        </div>
                    <div style="    clear:both;"></div>
                    </form:form>
                </div>

            </div>
        </div>
        <div class="full-width fl">
            <div class="contentShadow layui-form contentDetails">
                <span style="margin-bottom: 5px;" class="pull-right small text-muted">${fn:length(list)} 个联系人</span>
                <table class="oa-table layui-table" id="contentTable" lay-filter="contentTableFilter"></table>

                <!-- 分页代码 -->
                <%--<table:page page="${page}"></table:page>--%>
                <div style="clear: both;"></div>

                        <%--<div class="clients-list">--%>
                            <%--<ul class="nav nav-tabs">--%>
                                <%--<span class="pull-right small text-muted">${fn:length(list)} 个联系人</span>--%>
                            <%--</ul>--%>
                            <%--<div class="tab-content">--%>
                                <%--<div id="tab-1" class="tab-pane active">--%>
                                    <%--<div class="full-height-scroll">--%>
                                        <%--<div class="table-responsive">--%>
                                            <%--<table class="table table-striped table-hover">--%>
                                                <%--<tbody>--%>
                                              <%----%>
                                               <%--<c:forEach items="${list}" var="user">--%>
													<%--<tr>--%>
														<%--<td class="client-avatar"><img alt="image" src="${user.photo}"> </td>--%>
														<%--<td><a data-toggle="tab" href="#contact-1" class="client-link">${user.name}</a>--%>
														<%--<td>${user.office.name}</td>--%>
														<%--<td class="contact-type"><i class="fa fa-envelope"> </i>--%>
                                                        <%--</td>--%>
                                                        <%--<td> ${user.email}</td>--%>
                                                        <%--<td class="contact-type"><i class="fa fa-mobile"> </i>--%>
                                                        <%--</td>--%>
                                                        <%--<td>${user.mobile}</td>--%>
                                                        <%--<td class="contact-type"><i class="fa fa-phone"> </i>--%>
                                                        <%--</td>--%>
                                                        <%--<td>${user.phone}</td>--%>
                                                         <%--<td class="contact-type">--%>
                                                        <%--</td>--%>
                                                          <%--<td class="contact-type">--%>
                                                        <%--</td>--%>
                                                         <%--<td class="client-status">--%>
                                                         <%--<c:if test="${user.loginFlag == '1'}">--%>
                                                         	<%--<span class="label label-primary">激活</span>--%>
                                                         <%--</c:if>--%>
                                                          <%--<c:if test="${user.loginFlag == '0'}">--%>
                                                         	<%--<span class="label label-error">未激活</span>--%>
                                                         <%--</c:if>--%>
                                                        <%----%>
                                                        <%--</td>--%>
													<%--</tr>--%>
												<%--</c:forEach>--%>
                                                <%--</tbody>--%>
                                            <%--</table>--%>
                                        <%--</div>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                   <%----%>
                            <%--</div>--%>

                        <%--</div>--%>
            </div>
        </div>
    </div>
    <div id="changewidth"></div>
</div>
<script src="${ctxStatic}/layer-v2.3/layui/layui.all.js" charset="utf-8"></script>
<script>
    layui.use('table', function(){
        layui.table.render({
            limit:${fn:length(list)}
            ,elem: '#contentTable'
            ,page: false
            ,cols: [[
                // {title:"头像",align:'center', width:50,templet:function(d){
                //         return "<img alt=\"image\" width=\"40px\" height=\"40px\" src=\""+d.photo+"\">";
                //     }}
                // ,
                {field:'name',align:'center', title: '姓名',width:150,templet:function(d){
                        var xml = "<a class=\"attention-info\" href=\"#\" >" +
                            d.name +
                            "</a>";
                        return xml;
                    }}
                ,{field:'depart',align:'center', title: '部门',minWidth:150}
                ,{field:'email',align:'center', title: '电子信箱', minWidth:150}
                ,{field:'phone', align:'center',title: '手机号',width:150}
                ,{field:'tel', align:'center',title: '固定电话',width:150}
                ,{field:'op',align:'center',title:"操作",width:250,templet:function(d){
                        ////对操作进行初始化
                        var xml = "<a href=\"${ctx}/iim/mailCompose/sendLetter?id="+ d.id +"\" class=\"op-btn op-btn-view\"><i class=\"fa fa-envelope\"> 站内信</i></a>";
                        xml+="<a class=\"op-btn op-btn-add\"><i class=\"fa fa-qq\"> 即时聊天</i></a>";
                        if(d.active != undefined && d.active == "1")
                            xml +="<a href=\"javascript:void(0);\" class=\"op-btn op-btn-edit\" ><i class=\"fa fa-edit\"></i> 激活</a>"
                        else
                            xml +="<a href=\"javascript:void(0);\"  class=\"op-btn op-btn-delete\"><i class=\"fa fa-trash\"></i> 未激活</a>";
                        return xml;
                    }}
            ]]
            ,data: [
                <c:if test="${ not empty list}">
                <c:forEach items="${list}" var="user" varStatus="index">
                <c:if test="${index.index != 0}">,</c:if>
                {
                    "id":"${user.id}"
                    ,"photo":"${user.photo}"
                    ,"name":"${user.name}"
                    ,"depart":"${user.office.name}"
                    ,"email":"${user.email}"
                    ,"phone":"${user.mobile}"
                    ,"tel":"${user.phone}"
                    <c:if test="${user.loginFlag == '1'}">,"active":"1"</c:if>
                }
                </c:forEach>
                </c:if>
            ]
        });
    })

    resizeListTable(250);/*消除由于有竖向滚动条造成table出现横向滚动条*/
</script>


    <!-- 全局js -->

    <script>
        $(function () {
            $('.full-height-scroll').slimScroll({
                height: '100%'
            });
        });
    </script>

<script type="text/javascript">
    resizeListWindow1();
    $(window).resize(function(){
        resizeListWindow1();
    });
</script>

</body>

</html>