<!-- 手动触发加载 -->
<script type="text/javascript" src="http://static.ebcms.com/artTemplate/template.js"></script>
<script>
    var M = {};
    $(function() {
        M.iframe_height = function(){
            var bodyrel="{$comment_config.key|default='test'}";
            $('body').attr("rel",bodyrel);
            $(window.parent.document).find("iframe").each(function(){
                var tRel=$(this.contentWindow.document).find("body").attr("rel");
                if(tRel==bodyrel){
                    var mainheight = $(this).contents().find("body").height()+30;
                    $(this).height(mainheight);
                }
            });
        }
        M.array2tree = function(data,idFiled,parentField){
            idFiled = idFiled||'id';
            parentField = parentField||'pid';
            var i,l,treeData = [],tmpMap = [];
            var count = data.length;
            for (i = 0, l = count; i < l; i++) {
                tmpMap[data[i][idFiled]] = data[i];
            }
            for (i = 0, l = count; i < l; i++) {
                if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
                    if (!tmpMap[data[i][parentField]]['rows'])
                        tmpMap[data[i][parentField]]['rows'] = [];
                    tmpMap[data[i][parentField]]['rows'].push(data[i]);
                } else {
                    treeData.push(data[i]);
                }
            }
            return treeData;
        }
        M.change_captcha = function(selecter){
            var url = $(selecter).attr('src');
            if (url) {
                if (-1 != url.lastIndexOf('#')) {
                    url = url.substring(0, url.lastIndexOf('#'));
                }
                $(selecter).attr('src',url + "#" + Math.random());
            }
        }
        M.comment = function(){
            $.ajax({
                url: '{:url('user/comment/add')}',
                type: 'POST',
                dataType: 'json',
                data: $('#comment_form').serialize(),
                success:function(data){
                    if (data.code) {
                        $('#comment_form textarea').val('');
                        $('#comment_captcha').val('');
                        M.param.page = 1;
                        M.reloadcomment();
                    }else{
                        alert(data.msg);
                    }
                    M.change_captcha('#comment_captcha_img');
                }
            });
            return false;
        };
        template.config('openTag', '[[');
        template.config('closeTag', ']]');
        M.param = {
            page:1,
            size:'{$comment_config.size|default='5'}',
            group:'{$comment_config.group|default='test'}',
            key:'{$comment_config.key|default='test'}',
        }
        M.loading = 0;
        M.reloadcomment = function(){
            $('#reply_media').appendTo('#reply_form_contain');
            M.loadover = 0;
            M.param.page = 1;
            $('#comments').html('');
            M.loadcomment();
        };
        M.loadcomment = function(page){
            if (page) {
                $('#reply_media').appendTo('#reply_form_contain');
                $.ajax({
                    url: '{:url('user/comment/index')}',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        page:page,
                        size:M.param.size,
                        key:M.param.key,
                        group:M.param.group,
                    },
                    success:function(res){
                        if (res.code) {
                            var coms = template('comment-item', {
                                rows:M.array2tree(res.data.comments.data.concat(res.data.subcomments))
                            });
                            $('#comment_page_'+page).html(coms);
                        }else{
                            alert(res.msg);
                        }
                        M.iframe_height();
                    }
                });
                return false;
            }else{
                if (M.loading == 0) {
                    M.loading = 1;
                    $('#reply_media').appendTo('#reply_form_contain');
                    $('#comments_tips').html('加载中');
                    $.ajax({
                        url: '{:url('user/comment/index')}',
                        type: 'POST',
                        dataType: 'json',
                        data: M.param,
                        success:function(res){
                            if (res.code) {
                                if (res.data.comments.data.length) {
                                    var coms = template('comment-item', {
                                        rows:M.array2tree(res.data.comments.data.concat(res.data.subcomments))
                                    });
                                    $('#comments').append('<div class="comment_page" data-page="'+M.param.page+'" id="comment_page_'+M.param.page+'">'+coms+'</div>');
                                    M.param.page += 1;
                                    $('#comments_tips').html('再来一些');
                                }else{
                                    M.loadover = 1;
                                    $('#comments_tips').html('没有了');
                                }
                            }else{
                                alert(res.msg);
                            }
                            M.loading = 0;
                            M.iframe_height();
                        }
                    });
                }
                return false;
            }
        };
        M.reply = function(id){
            $('#reply_id').val(id);
            if ($('#comment_id_'+id+' .media-body:eq(0) > p #reply_media').length) {
                $('#reply_media').toggle();
            }else{
                $('#reply_media').appendTo('#comment_id_'+id+' .media-body:eq(0) > p').show();
            }
            M.iframe_height();
        };
        M.replysubmit = function(){
            $.ajax({
                url: '{:url('user/comment/add')}',
                type: 'POST',
                dataType: 'json',
                data: $('#reply_form').serialize(),
                success:function(data){
                    if (data.code) {
                        $('#reply_form textarea').val('');
                        $('#reply_captcha').val('');
                        /*获取当前页page*/
                        var reply_id = $('#reply_id').val();
                        var c = $('#comment_id_'+reply_id).parents('div.comment_page')[0];
                        var page = $(c).data('page');
                        M.loadcomment(page);
                    }else{
                        alert(data.msg);
                    }
                    M.change_captcha('#reply_captcha_img');
                }
            });
            return false;
        };
        // 若不要瀑布流滚动触发加载，可自行改用其他事件触发加载。。
        $('#comments_tips').bind('click', function(event) {
            if (M.loadover != 1) {
                M.loadcomment();
            }
        });
        M.iframe_height();
    });
</script>
{php}
    $count = \think\Db::name('comment') -> where('key',input('key'))->count();
{/php}
<button class="btn btn-default btn-xs" onclick="$(this).hide();$('.ini_hidden').show(1,function(){M.loadcomment();});">共有{$count|default="0"}条评论</button>
<style>
    .ini_hidden{
        display: none;
    }
</style>
{if condition="true === comment_auth()"}
    <form action="" id="comment_form" class="ini_hidden" onsubmit="return M.comment();">
        <textarea class="form-control" rows="5" name="content" placeholder="请遵守当地法律法规！"></textarea>
        <div style="height:10px;clear: both;"></div>
        <div class="row">
            {if condition="true !== comment_captcha()"}
            <div class="col-sm-8" id="comment_captcha_container">
                <input type="text" name="captcha" class="form-control" id="comment_captcha" placeholder="请输入验证码">
                <script>
                    $(function() {
                        $('#comment_captcha').focus(function(event) {
                            if (!$('#comment_captcha_img').length) {
                                $('#comment_captcha').before('<img class="img-rounded img-captcha" width="200" id="comment_captcha_img" onclick="M.change_captcha(\'#comment_captcha_img\');" src="{:url('index/api/captcha?key=comment_add')}" alt="验证码" title="点击更换验证码">')
                            }
                            $('#comment_captcha_img').show();
                        });
                        $('#comment_captcha_container').hover(function() {
                            $('#comment_captcha_img').show();
                        }, function() {
                            $('#comment_captcha_img').hide();
                        });
                    });
                </script>
            </div>
            <div class="col-sm-4">
                <div class="hidden-sm hidden-md hidden-lg" style="height:15px;"></div>
                <button type="submit" class="btn btn-danger pull-right">提交</button>
            </div>
            {else/}
            <div class="col-sm-12">
                <div class="hidden-sm hidden-md hidden-lg" style="height:15px;"></div>
                <button type="submit" class="btn btn-danger pull-right">提交</button>
            </div>
            {/if}
        </div>
        <input type="hidden" name="group" value="{$comment_config.group|default='test'}">
        <input type="hidden" name="key" value="{$comment_config.key|default='test'}">
    </form>
{else /}
    <div class="alert alert-danger ini_hidden" role="alert">
        <p class="text-center">没有评论权限！</p>
    </div>
{/if}
<hr class="ini_hidden">
<style>
    .media{
        border: 1px solid #ddd;
        padding: 10px;
    }
    #comments_tips{
        cursor: pointer;
        background: #ddd;
        margin: 15px 0 0 0;
        padding: 5px;
    }
</style>
<div id="comments" class="ini_hidden"></div>
<div id="comments_tips" class="alert text-center ini_hidden">显示评论</div>
<script id="comment-item" type="text/html">
    [[each rows as v n]]
        <div class="media" id="comment_id_[[v.id]]">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="__ROOT__/system/image/avatar.gif" width="40" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">[[if v.status == 1]]<button class="btn btn-xs btn-default pull-right" style="cursor:pointer;" onclick="M.reply('[[v.id]]');">回复</button>[[/if]][[if v.user]][[v.user.nickname]][[else /]]游客[[/if]][[if v.touser]] 回复 [[v.touser.nickname]][[/if]]</h4>
            [[if v.status == 1]]<p>[[v.content]]</p>[[else if v.status == 99]]<p class="text-danger">审核中...</p> [[else]] <p class="text-danger">已屏蔽！</p>[[/if]]
            [[if v.rows]]
                [[include 'comment-item' v]]
            [[/if]]
          </div>
        </div>
    [[/each]]
</script>
<div id="reply_form_contain" style="display:none;">
    <div class="media" id="reply_media" style="margin-top:20px;">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="__ROOT__/system/image/avatar.gif" width="40" alt="...">
        </a>
      </div>
      <div class="media-body">
        {if condition="true === comment_auth()"}
        <form action="" id="reply_form" onsubmit="return M.replysubmit();">
            <textarea class="form-control" rows="3" name="content" placeholder="请遵守当地法律法规！"></textarea>
            <div style="height:10px;clear: both;"></div>
            <div class="row">
                {if condition="true !== comment_captcha()"}
                <div class="col-sm-8" id="reply_captcha_container">
                    <input type="text" name="captcha" class="form-control" id="reply_captcha" placeholder="请输入验证码">
                    <script>
                        $(function() {
                            $('#reply_captcha').focus(function(event) {
                                if (!$('#reply_captcha_img').length) {
                                    $('#reply_captcha').before('<img class="img-rounded img-captcha" width="200" id="reply_captcha_img" onclick="M.change_captcha(\'#reply_captcha_img\');" src="{:url('index/api/captcha?key=comment_reply')}" alt="验证码" title="点击更换验证码">')
                                }
                                $('#reply_captcha_img').show();
                            });
                            $('#reply_captcha_container').hover(function() {
                                $('#reply_captcha_img').show();
                            }, function() {
                                $('#reply_captcha_img').hide();
                            });
                        });
                    </script>
                </div>
                <div class="col-sm-4">
                    <div class="hidden-sm hidden-md hidden-lg" style="height:15px;"></div>
                    <button type="submit" class="btn btn-danger pull-right">提交</button>
                </div>
                {else/}
                <div class="col-sm-12">
                    <div class="hidden-sm hidden-md hidden-lg" style="height:15px;"></div>
                    <button type="submit" class="btn btn-danger pull-right">提交</button>
                </div>
                {/if}
            </div>
            <input type="hidden" name="reply_id" id="reply_id" value="">
        </form>
      {else /}
          <div class="alert alert-danger">请登录</div>
      {/if}
      </div>
    </div>
</div>
<style>
    /*验证码*/
    .img-captcha{
        width: 200px;
        display: none;
        cursor: pointer;
        padding: 0px;
        position: absolute;
        height: 50px;
        top: -50px;
        border:1px solid #ccc;
        outline: 0;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.3);
        box-shadow: 0 5px 10px rgba(0,0,0,.3);
    }
    .comment_page{
        margin-top: 15px;
    }
</style>