<%@include file="/WEB-INF/common/layouts/common.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>
<html>
<head>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>项目动态</title>

        <meta http-equiv="Cache-Control" content="no-store">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Expires" content="0">
        <!-- 字体样式 -->
        <%--<link href="./sytlesheet/font-awesome.min.css" type="text/css" rel="stylesheet">--%>
        <%--<!-- 日期时间控件样式 -->--%>
        <%--<link href="./sytlesheet/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet">--%>
        <%--<!-- 开关控件样式 -->--%>
        <%--<link href="./sytlesheet/bootstrap-switch.min.css" type="text/css" rel="stylesheet">--%>
        <%--<link href="./sytlesheet/flat-ui-fonts.css" type="text/css" rel="stylesheet">--%>
        <%--<!-- BootStrap基础控件样式 -->--%>
        <%--<link href="./sytlesheet/bootstrap.min.css" type="text/css" rel="stylesheet">--%>
        <%--<!-- chosen样式 -->--%>
        <%--<link href="./sytlesheet/chosen.min.css" type="text/css" rel="stylesheet">--%>
        <%--<!-- 自定义基础控件样式 -->--%>
        <%--<link href="./sytlesheet/house365-default.css" type="text/css" rel="stylesheet">--%>
        <%--<link href="./sytlesheet/select2.css" type="text/css" rel="stylesheet">--%>
        <%--<link rel="stylesheet" href="./sytlesheet/uploadify.css" type="text/css">--%>
        <%--<link href="./sytlesheet/pace-theme-center-atom.css" type="text/css" rel="stylesheet">--%>
        <link rel="icon" href="http://hgs.house365.com/house365-hgs-web/resources/img/favicon.ico" type="image/x-icon">
        <script type="text/javascript">
            var ctx = '/house365-hgs-web';
        </script>
        <%--<script src="./sytlesheet/jquery-1.10.2.min.js" type="text/javascript"></script>--%>
        <%--<script src="./sytlesheet/jquery.validate.min.js" type="text/javascript"></script>--%>

        <%--<link href="./sytlesheet/WdatePicker.css" rel="stylesheet" type="text/css">--%>
        <style type="text/css">
            @keyframes fadeInOpacity {
                0% {
                    opacity: 0
                }
                to {
                    opacity: 1
                }
            }

            :hover>*>.fbvd--wrapper {
                animation-name: fadeInOpacity;
                animation-duration: .3s;
                opacity: 1
            }

            .fbvd--wrapper {
                position: absolute;
                top: 10px;
                left: 10px;
                opacity: 0;
                text-align: center;
                margin: 0;
                z-index: 5
            }

            .fbvd--wrapper a {
                background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzRiNGY1NiIgZD0iTTggMTUuNWw3LjUtNy41aC00LjV2LThoLTZ2OGgtNC41eiI+PC9wYXRoPjwvc3ZnPg==) no-repeat 3px 4.55px;
                background-color: #fff;
                display: inline-block;
                font: 700 14px Helvetica, Arial, sans-serif;
                color: #4b4f56;
                text-decoration: none;
                vertical-align: middle;
                padding: 0px 8px 0px;
                margin-right: 8px;
                border-radius: 2px;
                line-height: 22px;
                padding-left: 19px;
                border: 1px solid #e7e7e7;
                background-size: 13px
            }

            .fbvd--wrapper a:last-child {
                margin-right: 0
            }

            .fbvd--wrapper a:hover {
                text-decoration: none
            }

            .fbvd--wrapper a:focus {
                box-shadow: 0 0 1px 2px rgba(88, 144, 255, .75), 0 1px 1px rgba(0, 0, 0, .15);
                outline: none
            }

            .fbvd--wrapper b {
                font-size: 13px;
                position: relative;
                top: 1px;
                color: #3b5998;
                font-weight: 400
            }
        </style>
    </head>
</head>
<body class="  pace-done" youdao="bind">
<div class="pace  pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
        <div class="pace-progress-inner"></div>
    </div>
    <div class="pace-activity"></div>
</div>


<script>
    $(function() {
        $("#currentDept").on("change", function(e) {
            var deptId = $(this).val();
            //    var cityName = $("#currentCity option[@selected]").text();
            //    console.log(cityCode+","+cityName);
            $.ajax({
                url: '/house365-hgs-web/changeDept/' + deptId,
                type: "GET",
                success: function() {
                    // console.log(deptId);
                    window.location = "/house365-hgs-web/";
                }
            });

        });
    });
</script>
<!-- HEADER END -->

<!-- BEGIN JAVASCRIPTS -->
<!-- Load javascripts at bottom, this will reduce page load time -->

<!-- 数字自动格式化 -->
<%--<script type="text/javascript" src="./sytlesheet/autoNumeric.js"></script>--%>
<%--<script type="text/javascript" src="./sytlesheet/bootstrap.min.js"></script>--%>
<%--<!-- 日历控件脚本 -->--%>
<%--<script type="text/javascript" src="./sytlesheet/bootstrap-datetimepicker.js"></script>--%>
<%--<script type="text/javascript" src="./sytlesheet/bootstrap-datetimepicker.zh-CN.js"></script>--%>
<%--<!-- 开关控件脚本 -->--%>
<%--<script type="text/javascript" src="./sytlesheet/bootstrap-switch.js"></script>--%>
<%--<!-- jQuery验证脚本 -->--%>
<%--<script src="./sytlesheet/jquery.validate.js" type="text/javascript"></script>--%>
<%--<!-- jQuery验证提示本地化 -->--%>
<%--<script src="./sytlesheet/messages_zh.js" type="text/javascript"></script>--%>
<%--<!-- 自定义jQuery验证脚本 -->--%>
<%--<script src="./sytlesheet/jquery-validation-custom-rules.js" type="text/javascript"></script>--%>
<%--<!-- chosen脚本 -->--%>
<%--<script src="./sytlesheet/chosen.jquery.min.js" type="text/javascript"></script>--%>

<%--<script type="text/javascript" src="./sytlesheet/ajaxfileupload.js"></script>--%>

<%--<script type="text/javascript" src="./sytlesheet/bootstrap-typeahead.js"></script>--%>
<%--<script type="text/javascript" src="./sytlesheet/underscore-min.js"></script>--%>
<%--<script type="text/javascript" src="./sytlesheet/select2.js"></script>--%>
<%--<!-- 自定义初始化工具 -->--%>
<%--<script type="text/javascript" src="./sytlesheet/house365.js"></script>--%>
<%--<script type="text/javascript" src="./sytlesheet/pace.min.js"></script>--%>

<script type="text/javascript">
    jQuery(document).ready(function() {
        // 初始化页面
        House365.init();
    });
</script>

<div class="container-fluid" style="margin-top: 50px; min-height: 540px;">

    <%--<link rel="stylesheet" href="./sytlesheet/jquery.qtip.min.css" type="text/css">--%>
    <style>
        tr.header {
            cursor: pointer;
        }

        .header .sign:after {
            content: "-";
            display: inline-block;
        }

        .header.expand .sign:after {
            content: "+";
        }
    </style>
    <!-- 面包屑 begin -->
    <div class="row-fluid">
        <div class="span12">
            <ul class="breadcrumb">
                <li>
                    <a href="${ctx}/index">首页</a>
                    <span class="divider" style="color:#26a0da;font-weight:bold;"> &gt; </span>项目动态
                </li>
            </ul>
        </div>
    </div>
    <!-- zk edit START HERE !!!!!!!!!!!!!!!!!!! -->
    <style>
        .tool-bar{}
        .tool-bar #filterForm input{
            height: 20px;
            line-height: 20px;
        }
        .tool-bar #filterForm .Search-btn{
            width: 24px;
            height: 24px;
            display: inline-block;
            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAjVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADqhzP4AAAALnRSTlMA+g7x6sqEYkM+NSX15NWuWy0hFwoG39vSw76kn5Z8Z1ZOTDspGxkCtrF2a0cUzoLAJQAAAMBJREFUGNNlkEeuwzAMBUnLvcZ2eu+/Zu5/vAiOYgjILEhhQOgRlIH/7UK1aiYzGSkiHPP07TID38klP24UDm7OUF1koIvgPLxWVDdxzFaEge0pZDLSl/zatmMtHjGRrTV/vsxhKmJIfRlAIVKS+XIKV5EFiS9bsPFbfny5p7b1BK33ZUhs29eSOhhlg+mHJZRl5+Ya3glHRXfpvc/jEOL26s40x2GSAiZuucNagWj/kE5Ha/Put9fZT0opH5zDzRP7hxOfHXULLgAAAABJRU5ErkJggg==') no-repeat center;
            vertical-align: middle;
            margin-left: 15px;
            cursor: pointer;
        }
        .paginate-info{
            float: right;
            line-height: 30px;
            margin-right: 15px;
        }
        .data-table{
            border-top: 1px solid #ccc;
        }
        .table-td{
            padding: 15px;
            border: 1px solid #ccc;
            border-top: none;
        }
        .table-td .title{
            font-size: 18px;
        }
        .table-td .content{
            margin: 13px 0 8px 0;
        }
        .table-td .img-container{
            margin-bottom: 10px;
        }
        .table-td .img-container img{
            width: 110px;
            height: 110px;
            background: #ebebeb;
            display: inline-block;
            border: none;
        }
        .table-td .img-container img+img{
            margin-left: 10px;
        }
        .table-td .user-info{
            color: #AEAEAE;
            font-size: 15px;
        }
        .table-td .user-info .img-u{
            width: 14px;
            height: 15px;
            background: url('./u2725.png') no-repeat center;
            display: inline-block;
            margin-right: 4px;
            position: relative;
            top: 3px;
        }
        .table-td .user-info .item{
            margin-right: 8px;
        }
        .cover-gray{
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .15);
            user-select: none;
        }
        .cover-gray .to-left,.cover-gray .to-right{
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            cursor: pointer;
            font-size: 60px;
            font-weight: bold;
            height: 140px;
            line-height: 140px;
        }
        .cover-gray .to-left:hover,.cover-gray .to-right:hover{
            background: rgba(0, 0, 0, .35);
            color: white;
        }
        .cover-gray .to-left{
            left: 20px;
        }
        .cover-gray .to-right{
            right:20px;
        }
        .cover-gray .content{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            max-width: 90%;
            max-height: 90%;
            height: 90%;
            background: #ebebeb;
        }
        .cover-gray .content img{
            max-height: 100%;
        }

    </style>
    <div class="page-container zk-py">
        <div class="tool-bar">
            <form id="filterForm" class="form-inline breadcrumb" action="" method="get">
                <label>
                    项目名称：
                    <input type="text" name="search_LIKE_projectName" value="${param['search_LIKE_projectName']}" placeholder="请输入..." />
                </label>
                <input type="text" class="datetime-picker span2 input-large" id="search_GTE_createTimeStart" name="search_GTE_createTimeStart"
                       date-language="zh-CN"
                       value="${param['search_GTE_createTimeStart']}" date-format="yyyy-mm-dd" date-minView="month"
                       placeholder="发布开始时间">
                <input type="text" class="datetime-picker span2 input-large" id="search_LTE_createTimeEnd" name="search_LTE_createTimeEnd"
                       date-language="zh-CN"
                       value="${param['search_LTE_createTimeEnd']}" date-format="yyyy-mm-dd" date-minView="month"
                       placeholder="发布结束时间">
                <div class="Search-btn" onclick="$('#filterForm').submit();"></div>
            </form>
        </div>
        <div class="data-table">
            <c:forEach items="${projectdynamiclist}" var="projectdynamic">
                <div class="table-td">
                    <div class="title">${projectdynamic.projectName}</div>
                    <div class="content">${projectdynamic.dynamicContent}</div>
                    <div class="img-container img-gallery">
                        <c:forEach items="${projectdynamic.picList}" var="pic" varStatus="i">
                            <img src="${pic}" alt="" srcset="">
                        </c:forEach>
                    </div>

                    <div class="user-info">
                        <span class="img-u"></span>
                        <span class="name">${projectdynamic.createUsername}</span>
                        <c:if test="${null ne projectdynamic.createTime && '' ne projectdynamic.createTime}">
                            <span class="time"><f:formatDate value='${projectdynamic.createTime}' pattern='yyyy-MM-dd HH:mm'/></span>
                        </c:if>
                        <c:if test="${null eq projectdynamic.createTime || '' eq projectdynamic.createTime}">
                            &nbsp;
                        </c:if>

                    </div>
                </div>
            </c:forEach>
        </div>
        <div class="row${fluid}">
            <house365:pagination page="${page}"/>
        </div>
        <%--<div class="dataTables_paginate paging_bootstrap pagination">--%>
            <%--<ul>--%>
                <%--<li class="prev disabled">--%>
                    <%--<a href="http://hgs.house365.com/house365-hgs-web/customer/myCustomer#">←上一页</a>--%>
                <%--</li>--%>
                <%--<li class="active">--%>
                    <%--<a href="http://hgs.house365.com/house365-hgs-web/customer/myCustomer#">1</a>--%>
                <%--</li>--%>
                <%--<li class="next disabled">--%>
                    <%--<a href="http://hgs.house365.com/house365-hgs-web/customer/myCustomer#">下一页→</a>--%>
                <%--</li>--%>
            <%--</ul>--%>
            <%--<span class="paginate-info">显示1-20, 共20条</span>--%>
        <%--</div>--%>
    </div>
    <div class="cover-gray">
        <div class="to-left btn-change">&lt;</div>
        <div class="content">
            <img src="" alt="">
        </div>
        <div class="to-right btn-change">&gt;</div>
    </div>
    <script>
//        function queryDynamic(){
//            var projectName = $("#projectName").val();
//            var search_GTE_createTimeStart = $("#search_GTE_createTimeStart").val();
//            var search_LTE_createTimeEnd = $("#search_LTE_createTimeEnd").val();
//
//        }
$(document).keydown(function (event) {
    if (event.keyCode == "13") {
        //回车执行查询
        $('#filterForm').submit();
    }
});


var $currentImg;
        $(".img-gallery img").click(function() {
            var imgUrl = $(this).attr("src");
            $currentImg = $(this);
            $(".cover-gray").show();
            $(".cover-gray .content img").attr("src", imgUrl);
        })

        $(".cover-gray").click(function() {
            $(this).hide();
        })

        $(".cover-gray .btn-change").click(function(e) {
            e.stopPropagation();
            var nowUrl;
            if ($(this).hasClass('to-left')) {
                if ($currentImg.prev('img').length == 0) {
                    return;
                }
                $currentImg = $currentImg.prev('img');
                nowUrl = $currentImg.attr("src");
            } else {
                if ($currentImg.next('img').length == 0) {
                    return;
                }
                $currentImg = $currentImg.next('img');
                nowUrl = $currentImg.attr("src");
            }
            $(".cover-gray .content img").attr("src", nowUrl);
        })
    </script>
    <!-- zk edit END HERE !!!!!!!!!!!!!!!!!!! -->
    <%--<script language="javascript" type="text/javascript" src="./sytlesheet/WdatePicker.js"></script>--%>
    <%--<script language="javascript" type="text/javascript" src="./sytlesheet/jquery.qtip.min.js"></script>--%>
</div>

<%--<div class="container-fluid">--%>
    <%--<div class="row-fluid">--%>
        <%--<div class="span10 offset1" style="margin-top: 20px;">--%>
            <%--<div class="pull-right">Copyright © 江苏三六五网络股份有限公司</div>--%>
        <%--</div>--%>
    <%--</div>--%>
<%--</div>--%>
</body>
</html>
