<!DOCTYPE html>
<html lang="en">
<head>
    <%include("/common/_head.html"){}%>
    <title>${talk.title} -飞趣</title>
    <style type="text/css">
        .left-section {
            background: #FAFBFC;
        }
        .post-title {
            height: 56px;
            line-height: 56px;
            background: #fff;
            border-bottom: 1px solid #BBBDBF;
            position: relative;
        }

        .tc_post {
            border: 0;
            border-left: 1px solid #E5E5E5;
            border-bottom: 1px solid #E1E4E6;
            background: #fafbfc;
            margin: 0;
            padding: 0;
            width: 100%;
            float: left;
        }
        .tc_post .author{
            padding: 15px 0;
            text-align: center;
            position: relative;
        }
        .tc_post .main{
            position: relative;
            padding: 0 0 8px 20px;
            background: #fff;
        }
        .author .face{
            position: relative;
            display: inline-block;
            zoom: 1;
            top: 0;
            left: 0;
            padding: 4px;
            margin-top: 2px;
            cursor: pointer;
        }
        .author .a-detail{
        }
        .author .a-detail{
        }
        .face img{
            float: left;
            width: 80px;
            height: 80px;
        }

        .face-href {
            background: none repeat scroll 0 0 #FFF;
            border: 1px solid #CCC;
            display: block;
            height: 80px;
            padding: 3px;
            width: 80px;
        }

        .main-content {
            padding: 20px 20px 0 0;
            position: relative;
            min-height: 9rem;
            height: auto;
            word-wrap: break-word;
            letter-spacing: 1px;
        }
        .main-content img{
max-width: 570px;
        }

        .reply-wrapper {
            margin-right: 13px;
            line-height: 28px;
        }

        .tc-reply {
        }
        .tc-reply a{
            float: right;
        }
        .link_fold {
            border: 1px solid #f0f1f2;
            border-bottom: 0;
            color: #1D53BF;
            cursor: pointer;
            display: inline-block;
            height: 28px;
            line-height: 28px;
            text-align: center;
            width: 80px;
            background: #f7f8fa;
        }

        .fq-rich-poster-container {
            margin: 0 auto;
            padding: 20px 0 0;
            text-align: left;
        }
        .fq-rich-poster-container .fq-rich-poster{
            position: relative;
            margin-left: 20px;
        }
        .poster-body .poster-title{
            padding-bottom: 10px;

        }
        .poster-body .poster-content{
            padding-bottom: 10px;
        }
        .poster-body .poster-submit{
            padding-bottom: 20px;
        }
        .poster-tip{
            padding-bottom: 10px;
        }

        .title-text {
            margin-left: 20px;
            position: relative;
            z-index: 10;
            font-family: "microsoft yahei",simhei,sans-serif;
            font-weight: 400;
            font-size: 16px;
        }

        .post-list {


        }

        .lz_mark {
        }
        .reply-input{
            padding: 10px 10px;
            margin: 10px 10px;
        }
        .reply-list {
            margin: 10px 16px 0 0;
        }
        .nickname-href {
            font-size: 13px;
            color: #1036be;
        }
        .c-list{
            background-color: aliceblue;;
        }
        .c-list .content{
            word-break: break-all;
            padding-left: 1rem;
        }
    </style>
</head>
<body>
<%
var user = c.currentUser(request, servlet.response);
var isLogin = false;
if(user != null){
isLogin=true;
}
include("/common/_headwithlogin.html",{user:user,isLogin:isLogin}){}
%>
<div class="layui-container topToFix">
    <div class="layui-row">
        <div class="layui-col-md10 left-section">
            <div class="post-title"><h3 class="title-text">${talk.title}</h3></div>
            <div class="post-list">
                <div class="tc_post layui-row">
                    <div class="author layui-col-md2">
                        <div class="lz_mark"><span class="layui-badge layui-bg-orange">楼主</span></div>
                        <div class="a-detail">
                            <div class="face"><a class="face-href" href="${ctxPath}/u/${louzhu.id}/peopleIndex"><img src="${louzhu.icon}"></a> </div>
                            <div>${louzhu.nickname}</div>
                        </div>
                    </div>
                    <div class="main layui-col-md10">
                        <div class="main-content">${talk.content}</div>
                        <div class="reply-wrapper layui-row">
                            <div class="layui-col-md2 layui-col-md-offset4">1楼</div>
                            <div class="layui-col-md4 reply_time">${talk.createTime,'yyyy-MM-dd hh:mm'} </div>
                            <div class="tc-reply ">
                                <a href="#" class="author-reply">回复</a>
                            </div>
                        </div>
                    </div>
                </div>
                <%for(var comment in comments){%>
                <div class="tc_post layui-row">
                    <div class="author layui-col-md2">
                        <%if(comment.postUserId == talk.userId){%>
                        <div class="lz_mark"><span class="layui-badge layui-bg-orange">楼主</span></div>
                        <%}%>
                        <div class="a-detail">
                            <div class="face"><a class="face-href" href="${ctxPath}/u/${comment.postUserId}/peopleIndex"><img src="${comment.postIcon}"></a> </div>
                            <div>${comment.postNickname}</div>
                        </div>
                    </div>
                    <div class="main layui-col-md10">
                        <div class="main-content">${comment.content}</div>
                        <div class="reply-wrapper layui-row">
                            <div class="layui-col-md2 layui-col-md-offset4">${commentLP.index+1}楼</div>
                            <div class="layui-col-md4 reply_time">${comment.createTime,'yyyy-MM-dd hh:mm'} </div>
                            <div class="tc-reply layui-col-md2">
                                <%if(isEmpty(comment.replyList)){%>
                                <a href="javascript:void(0)" class="link_unfold">回复</a>
                                <a href="javascript:void(0)" class="link_fold layui-hide">收起回复</a>
                                <%}else{%>
                                <a href="javascript:void(0)" class="link_unfold layui-hide">回复</a>
                                <a href="javascript:void(0)" class="link_fold">收起回复</a>
                                <%}%>
                            </div>
                        </div>
                        <div class="layui-row reply-list">
                            <ul class="c-list"><%
                                for(var reply in comment.replyList){
                            %>
                            <li>
                                <a href="${ctxPath}/u/${reply.postUserId}/peopleIndex" class="fly-avatar">
                                    <img src="${reply.icon}">
                                </a>
                                <a class="nickname-href" href="${ctxPath}/u/${reply.postUserId}/peopleIndex">${reply.nickname}</a>
                                <span class="content">${reply.content}</span>
                                <div class="layui-col-md-offset8 reply_time"> ${reply.createTime,'yyyy-MM-dd hh:mm:ss'}</div>
                            </li>
                            <%}%>
                            <li>
                                <div class="reply-input layui-row">
                                    <div class="layui-col-md10"><input class="layui-input" type="text" placeholder="输入评论"></div>
                                    <div class="layui-col-md1 layui-col-md-offset1"><button data="${comment.id}" class="layui-btn replyBtn">发表</button></div>
                                </div>
                            </li>
                            </ul>
                        </div>

                    </div>
                </div>
                <%}%>
                <div class="layui-clear"></div>
            </div>
            <div id="pagesplit">

            </div>

            <div class="fq-rich-poster-container">
                <div class="fq-rich-poster">
                    <div class="poster-tip"><i class="layui-icon">&#xe642;</i>发表回复</div>
                    <div class="poster-body">
                        <form class="layui-form">
                            <input type="hidden" name="postUserId" value="${user.id!0}">
                            <input type="hidden" name="topicId" value="${talk.id!0}">
                            <div class="poster-content">
                                <textarea  name="content" class="layui-textarea fly-editor" placeholder="回复下这个帖子吧~~"></textarea>
                            </div>
                            <div class="poster-submit">
                                <button lay-submit lay-filter="replyLzform" id="poster-btn" class="layui-btn">发表</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4"></div>
    </div>
</div>
<%include("/common/_footor.html"){}%>
</body>
<%include("/common/_scripts.html",{user:user}){}%>
<script>
    layui.use(['layer','form','laypage','fly'], function() {
        var layer = layui.layer
            , laypage = layui.laypage
            ,fly=layui.fly
            ,form=layui.form
       ;
        $(".link_unfold").click(function () {
            $(this).addClass("layui-hide")
            $(this).next().removeClass("layui-hide")
            $(this).closest('.reply-wrapper').next().removeClass('layui-hide')
        })
        $(".link_fold").click(function () {
            $(this).addClass("layui-hide")
            $(this).prev().removeClass("layui-hide")
            $(this).closest('.reply-wrapper').next().addClass('layui-hide')
        })

        var userId = ${user.id!0}

        $('.replyBtn').click(function () {
            if(userId == 0){
                layer.msg('用户未登陆')
                return
            }
            var that = $(this)
            var replyContent = $(this).parent().prev().children('input').val()
            if(!replyContent){
                layer.msg('回复内容不能为空')
                return
            }
            console.log(replyContent)

            var commentId = $(this).attr('data')
            var postData = {
                commentId:commentId,
                postUserId:${user.id!0},
                content:replyContent
            }
            console.log(postData)
            $.ajax({
                url:'${ctxPath}/comment/reply',
                type:'post',
                data:postData,
                dataType:'json',
                success:function (result) {
                    if(result.code == '0000'){
                        layer.msg("回复成功")
                        that.closest('li').before('<li><a href="${ctxPath}/u/${user.id!}/peopleIndex" class="fly-avatar">'+
                            '<img src="${user.icon!}">'+
                            '</a>'+
                            '<a class="nickname-href" href="${ctxPath}/u/${user.id!}/peopleIndex">${user.nickname!}</a>'+
                            '<span class="content">'+replyContent+'</span>'+
                            '<div>'+result.data.createTime+'</div>'+
                            '</li>')
                        that.parent().prev().children('input').val('')
                    }else {
                        layer.msg(result.message||"回复失败")
                    }
                }
            })
        })

        $('.author-reply').click(function () {
            $('html,body').animate({scrollTop:$(".fq-rich-poster-container").offset().top}, 800);
            $('textarea[name="content"]').focus()
        })

        form.on('submit(replyLzform)', function(data){
            if(data.field.postUserId == 0){
                layer.msg('先去登陆再来回复吧~')
                return false
            }
            data.field.content = fly.content(data.field.content)
            if(!data.field.content || data.field.content.trim() == ''){
                layer.msg("回复内容不能为空")
                return false
            }
            $.ajax({
                url:'${ctxPath}/job/comment',
                type:'post',
                data:JSON.stringify(data.field),
                contentType:'application/json',
                dataType:'json',
                success:function (result) {
                    console.log(result)
                    if(result.code == '0000'){
                        layer.msg("回复成功")
                        setTimeout(function () {
                            location.reload()
                        },1000)
                    }else {
                        layer.msg(result.message||"回复失败")
                    }
                }
            });
            return false
        });
    });
</script>
</html>