{extend name="common@index"}
{block name="title"}
{php}
$rs = action('index/api/read', ['attr'=> [ 'id'=>$param['id'] ] ])->getData();
{/php}网友评论{if isset($rs.id)}《{$rs.name}》{/if}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="__CSS__cim/comment.css">
{/block}
{block name="main"}
<div class="panel p-lg">
    <div class="panel-heading">
        <h3 class="mb-sm"><a href="{$rs.url}" target="_blank">{$rs.name}</a></h3>
        <div class="row">
            <div class="col-sm-6"><span class="text-muted">文明上网理性发言，请遵守新闻评论服务协议</span></div>
            <div class="col-sm-6"><small class="comment_count pull-right">{$rs.comment_count|default=0}条评论</small></div>
        </div>
        <hr class="mt-sm">
    </div>
    <div class="panel-body">
        <div rel="comment" data-count="{$rs.comment_count|default=0}" id="comment">
            {if !$user.id}
            <div class="comment_login media">
                <div class="media-left">
                    <a href="javascript:;">
                        <img class="media-object avatar-md img-circle" alt="匿名" src="__IMG__user/avatar.png">
                    </a>
                </div>
                <div class="media-body">
                    您需要登录后才能评论， 现在 <a href="{:url('user/index/login')}" class="">登录</a> 或 <a href="{:url('user/index/register')}">注册</a>。
                </div>
            </div>
            {else}
            <div class="comment_form media">
                <div class="media-left">
                    <a href="{:url('user/home/index', ['id'=>$user.id])}"><img class="media-object avatar-sm img-circle" src="{:action('user/api/avatar', ['id'=>$user.id])}" alt="{$user.name}"></a>
                </div>
                <div class="media-body">
                    <textarea name="content" placeholder="请写下你的评论，文明交流..."></textarea>
                    <div class="clearfix">
                        <span class="help-block pull-left"></span>
                        <button class="btn bg-primary pull-right mt-sm btn-comment" data-id="{$rs.id|default=0}" style="width: 96px; height: 34px;">发表</button>
                    </div>
                </div>
            </div>
            {/if}
            <h3 class="comment_title mt-md mb-lg"><span>全部评论</span></h3>
            <div class="comment_data" data-id="{$rs.id|default=0}">
                <div class="comment_empty"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Loading...</span></div>
            </div>
        </div>

        <script id='tpl_comment' type="text/html">
            <%if(data.length>0){%>
            <%for(var i=0;i<data.length;i++){%>
            <div class="media">
                <div class="media-left">
                <a href="<%=data[i].user.url%>">
                    <img class="media-object avatar-sm img-circle" src="<%=data[i].user.avatar%>" alt="<%=data[i].user.name%>">
                </a>
                </div>
                <div class="media-body">
                <h4 class="media-heading"><a href="<%=data[i].user.url%>" class="c6"><%=data[i].user.name%></a> <small class="pull-right"><i class="fa fa-clock-o"></i> <%=data[i].from_now%>&nbsp;&nbsp;<i class="fa fa-commenting-o"></i>
                <a href="javascript:;" class="btn_comment_reply" data-id="<%=data[i].data_id%>" data-comment_id="<%=data[i].id%>" data-uid="<%=data[i].user.id%>" data-username="<%=data[i].user.name%>">回复<%if (data[i].reply_count>0){%>(<%=data[i].reply_count%>)<%}%></a></small></h4>
                <%:=data[i].content%>
                <div id="comment_reply_<%=data[i].id%>" data-comment_id="<%=data[i].id%>" data-id="<%=data[i].id%>"></div>
                </div>
            </div>
            <%}%>
            <%}%>
        </script>
        <script id='tpl_comment_add' type="text/html">
            <div class="media">
                <div class="media-left">
                <a href="<%=data.user.url%>">
                    <img class="media-object avatar-<%if (data.comment_id>0){%>xs<%}else{%>sm<%}%> img-circle" src="<%=data.user.avatar%>" alt="<%=data.user.name%>">
                </a>
                </div>
                <div class="media-body">
                <h4 class="media-heading"><a href="<%=data.user.url%>" class="c6"><%=data.user.name%></a> <small class="pull-right"><i class="fa fa-clock-o"></i> 刚刚</small></h4>
                <%=data.content%>
                </div>
            </div>
        </script>
        <script id="tpl_comment_reply" type="text/html">
            <div class="panel panel-default" v-for="v in data" :key="v.id">
                <div class="panel-heading"><%if (data.length>0){%><%=data.length%> 条<%}%>评论<a href="javascript:;" class="pull-right reply_up">收起 <i class="fa fa-caret-up"></i></a></div>
                <%if(data.length>0){%>
                    <%for(var i=0;i<data.length;i++){%>
                    <div class="media">
                        <div class="media-left">
                        <a href="<%=data[i].user.url%>">
                            <img class="media-object avatar-xs img-circle" src="<%=data[i].user.avatar%>" alt="<%=data[i].user.name%>">
                        </a>
                        </div>
                        <div class="media-body">
                        <h4 class="media-heading"><a href="<%=data[i].user.url%>" class="c6"><%=data[i].user.name%></a> <small class="pull-right"><i class="fa fa-clock-o"></i> <%=data[i].from_now%>&nbsp;&nbsp;<i class="fa fa-commenting-o"></i>
                        <a href="javascript:;" class="btn_floor_reply" data-id="<%=data[i].comment_id%>" data-uid="<%=data[i].user.id%>" data-username="<%=data[i].user.name%>">回复</a></small></h4>
                        <%:=data[i].content%>
                        <div id="comment_reply_<%=data[i].id%>" data-comment_id="<%=data[i].id%>" data-id="<%=data[i].id%>"></div>
                        </div>
                    </div>
                    <%}%>
                <%}%>
                <div class="comment_post">
                    <input type="text" class="form-control" placeholder="写下你的评论">
                    <button class="btn btn-danger" type="button">评论</button>
                </div>
            </div>
        </script>
        <script id="tpl_comment_empty" type="text/html">
            <div class="comment_empty"><i class="fa fa-commenting-o"></i> 好机会，快来抢个沙发吧</div>
        </script>
    </div>
</div>
{/block}
{block name="js"}
<script>
    require(['cim/comment'], function(comment){
        comment.init();
    });
</script>
{/block}