{% extends 'base.html' %}  {# 将当前页面继承至base.html模板 #}
{% block content %}

<!-- 中部区域布局 -->
        <div class="col-sm-9 col-12" style="padding: 0 10px;" id="left">
            <div class="col-12 row article-detail">
                <div class="col-9 title">
                    {{article.headline}}
                </div>
                <div class="col-3 favorite">
                    {% if is_favorited == True %}
                        <label class="favorite-btn" onclick="cancelFavorite('{{article.articleid}}')">
                            <span class="oi oi-heart" aria-hidden="true"></span>
                            取消收藏
                        </label>
                    {% else %}
                        <label class="favorite-btn" onclick="addFavorite('{{article.articleid}}')">
                            <span class="oi oi-heart" aria-hidden="true"></span>
                            收藏本文
                        </label>
                    {% endif %}
                    <!-- 如果需要文章编辑的菜单 if article.userid == session.get('userid') -->
                </div>
                <div class="col-12 info">
                    作者：{{article.nickname}}&nbsp;&nbsp;&nbsp;类别：{{article_type[article.category | string]}}&nbsp;&nbsp;&nbsp;
                    日期：{{article.createtime}}&nbsp;&nbsp;&nbsp;
                    阅读：{{article.readcount}} 次&nbsp;&nbsp;&nbsp;消耗积分：{{article.credit}} 分
                </div>
                <div class="col-12 content" id="content">
                    {{article.content | safe}}
                </div>

                <!-- 只有需要消耗积分的文章且用户并未消耗过时才显示阅读全文按钮 -->
                {% if article.credit > 0 and payed == False%}
                    <div class="col-12 readall">
                        {% if session.get('islogin') == 'true' %}
                            <button class="col-sm-10 col-12" onclick="readAll()">
                                <span class="oi oi-data-transfer-download" aria-hidden="true">阅读全文（消耗积分：{{article['credit']}} 分）</span>
                            </button>
                        {% else %}
                            <!-- 如果用户未登录则提示先登录 -->
                            <button class="col-sm-10 col-12" onclick="showLogin()">
                                <span class="oi oi-data-transfer-download" aria-hidden="true"></span>你还未登录，登录后可阅读全文
                            </button>
                        {% endif %}
                    </div>
                {% endif %}
            </div>

            <div class="col-12 article-nav">
                <div>版权所有，转载本站文章请注明出处：蜗牛笔记， http://www.woniunote.com/article/{{article.articleid}}</div>
                <div><a href="/article/{{prev_next.prev_id}}">上一篇：{{prev_next.prev_headline}}</a></div>
                <div><a href="/article/{{prev_next.next_id}}">下一篇：{{prev_next.next_headline}}</a></div>
            </div>

            <!-- 文章评论 -->
            <div class="col-12 article-comment">
                <div class="col-12 row">
                    <div class="col-2">
                        <label for="nickname">你的昵称：</label>
                    </div>
                    <div class="col-10">
                        {% if session.get('islogin') == 'true' %}
                            <input type="text" id="nickname" class="form-control" value="{{session.get('nickname')}}" readonly>
                        {% else %}
                            <input type="text" id="nickname" class="form-control" value="您还未登录，双击此处可登录" ondblclick="showLogin()" readonly>
                        {% endif %}
                    </div>
                </div>
                <div class="col-12 row">
                    <div class="col-2">
                        <label for="comment">你的评论：</label>
                    </div>
                    <div class="col-10">
                        <textarea class="form-control" name="" id="comment" cols="30" rows="10"></textarea>
                    </div>
                </div>
                <div class="col-12 row" style="text-align: right">
                    <div class="col-12" style="text-align: right">
                        {% if session.get('islogin') == 'true' %}
                            <button class="btn btn-primary" onclick="addComment('{{article.articleid}}')" id="sumbitBtn">提交评论</button>
                            <button style="display: none" id="replyBtn" type="button" class="btn btn-primary" onclick="replyComment('{{article.articleid}}')">回复评论</button>
                        {% else %}
                            <button class="btn btn-primary" onclick="showLogin()">点此登录</button>
                        {% endif %}
                    </div>
                </div>
                {% for comment in comment_list %}
                    <div class="coll2 list row">
                        <div class="col-2 icon">
                            <img src="/avatar/{{comment.avatar}}" class="img-fluid" style="width: 70px;">
                        </div>
                        <div class="col-10 comment">
                            <div class="col-12 row" style="padding: 0px;">
                                <div class="col-7 commenter">
                                    <!-- 如果用户没有设置昵称，则显示登录名，否则显示昵称 -->
                                    {% if comment['nickname'] != None %}
                                        {{comment['nickname']}}
                                    {% else %}
                                        {{comment['username']}}
                                    {% endif %}
                                    &nbsp;&nbsp;&nbsp;{{comment.createtime}}
                                </div>
                                <div class="col-5 reply">
                                    <!-- 文章作者、管理员和评论者只能回复和隐藏，不能点赞 -->
                                    {% if article.userid == session.get('userid') or
                                    session.get('role') == 'admin' or
                                    comment['userid'] == session.get('userid') %}
                                        <label onclick="gotoReply('{{comment.commentid}}')">
                                            <span class="oi oi-arrow-circle-right" aria-hidden="true">
                                                 回复
                                            </span>
                                        </label>
                                        &nbsp;&nbsp;&nbsp;
                                        <label onclick="hideComment(this, '{{comment.commentid}}')">
                                            <span class="oi oi-delete" aria-hidden="true">
                                                隐藏
                                            </span>
                                        </label>
                                    {% else %}
                                    {# 如果需要设计为匿名用户不能点赞，则继续判断是否为登录状态即可 #}
                                    {# {% elif session.get('islogin') != None %} #}
                                        <label onclick="gotoReply('{{comment.commentid}}')">
                                            <span class="oi oi-arrow-circle-right" aria-hidden="true">
                                                 回复
                                            </span>
                                        </label>
                                        &nbsp;&nbsp;&nbsp;
                                        <label onclick="agreeComment(this, '{{comment.commentid}}')">
                                            <span class="oi oi-chevron-bottom" aria-hidden="true">
                                                赞成 (<span>{{comment['agreecount']}}</span>)
                                            </span>
                                        </label>
                                        &nbsp;&nbsp;&nbsp;
                                        <label onclick="opposeComment(this, '{{comment.commentid}}')">
                                            <span class="oi oi-x" aria-hidden="true">
                                                反对 (<span>{{comment['opposecount']}}</span>)
                                            </span>
                                        </label>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-12 content">
                                {{comment.content}}
                            </div>
                        </div>
                    </div>

                    {% if comment['reply_list'] %}
                        {% for reply in comment['reply_list'] %}
                            <div class="coll2 list row">
                        <div class="col-2 icon">
                            <img src="/avatar/{{reply.avatar}}" class="img-fluid" style="width: 45px;">
                        </div>
                        <div class="col-10 comment" style="border: 1px solid #ccc">
                            <div class="col-12 row" style="padding-left: 15px;">
                                <div class="col-7 commenter" style="color: #337AB7">
                                    <!-- 有昵称则填充昵称，否则填充用户名 -->
                                    {{reply.nickname}}&nbsp;&nbsp;&nbsp;回复&nbsp;&nbsp;&nbsp;{{comment.nickname}}&nbsp;&nbsp;&nbsp;{{reply.createtime}}
                                </div>
                                <div class="col-5 reply">
                                    <!-- 文章作者、管理员和评论者只能回复和隐藏，不能点赞 -->
                                    {% if article.userid == session.get('userid') or
                                    session.get('role') == 'admin' or
                                    comment['userid'] == session.get('userid') %}
                                        <label onclick="hideComment(this, '{{comment.commentid}}')">
                                            <span class="oi oi-delete" aria-hidden="true">
                                                隐藏
                                            </span>
                                        </label>
                                    {% else %}
                                        <label onclick="agreeComment(this, '{{reply.commentid}}')">
                                            <span class="oi oi-chevron-bottom" aria-hidden="true">
                                                赞成 (<span>{{reply['agreecount']}}</span>)
                                            </span>
                                        </label>
                                        &nbsp;&nbsp;&nbsp;
                                        <label onclick="opposeComment(this, '{{reply.commentid}}')">
                                            <span class="oi oi-x" aria-hidden="true">
                                                反对 (<span>{{reply['opposecount']}}</span>)
                                            </span>
                                        </label>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-12">
                                {{reply.content}}
                            </div>
                        </div>
                    </div>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </div>
        </div>

{% include 'side.html' %}

<script>

    function readAll() {
        var param = 'articleid={{article.articleid}}&position={{position}}';
        $.post('/readall', param, function (data) {
            $("#content").append(data)
            $(".readall").hide();
        })
    }

    function cancelFavorite(articleid) {
        $.ajax({
            url: '/favorite/' + articleid,
            type: 'delete',
            success: function (data) {
                if (data == 'not-login') {
                    bootbox.alert({title: "错误提示", message: "您还没有登录，不能收藏文章"});
                } else if (data == 'cancel-pass') {
                    bootbox.alert({title: "信息提示", message: "取消收藏成功"});
                    $(".favorite-btn").html('<span class="oi oi-heart" aria-hidden="true"></span>欢迎再来');
                    $(".favorite-btn").attr('onclick', '').unbind('click');
                } else if (data == 'cancel-fail') {
                    bootbox.alert({title: "错误提示", message: "取消收藏出错，请联系管理员"});
                }
            }
        });
    }

    function addFavorite(articleid) {
        $.post('/favorite', 'articleid='+articleid, function (data) {
            if (data == 'not-login'){
                bootbox.alert({title: "错误提示", message: "您还没有登录，不能收藏文章"});
            } else if (data == 'favorite-pass') {
                bootbox.alert({title: "信息提示", message: "文章收藏成功，可在我的收藏中查看"});

                //  菜单名称修改为：感谢收藏
                $(".favorite-btn").html('<span class="oi oi-heart" aria-hidden="true"></span>感谢收藏');

                //  取消收藏按钮得单击事件
                $(".favorite-btn").attr('onclick', '').unbind('click');
            } else {
                bootbox.alert({title: "错误提示", message: "收藏文章出错，请联系管理员"});
            }
        })
    }

    function addComment(articleid) {
        var content = $.trim($("#comment").val());
        if (content.length < 5 || content.length > 1000) {
            bootbox.alert({title: "错误提示", message: "评论内容在5-1000字之间"});
            return false;
        }

        var param = 'articleid=' + articleid + '&content=' + content;
        $.post('/comment', param, function (data) {
            if (data == 'content-invalid') {
                bootbox.alert({title: "错误提示", message: "评论内容在5-1000字之间"});
            } else if (data == 'add-limit') {
                bootbox.alert({title: "错误提示", message: "您今天已经用完5条评论的限额"});
            } else if(data == 'add-pass') {
                location.reload();
            } else {
                bootbox.alert({title: "错误提示", message: "发表评论出错，请联系管理员"});
            }
        })
    }

    /**
     * 通过什么样的方式来传递commentid：
     *      1：使用全局变量
     *      1：使用一个临时的DIV或隐藏的表单元素做中专
     */
    var COMMENTID = 0;
    function gotoReply(commentid) {
        $("#replyBtn").show();  //  显示回复评论的按钮
        $("#sumbitBtn").hide();  //  隐藏发表评论的按钮
        $("#nickname").val("请在此回复编号为 "+ commentid +" 的评论")
        $("#comment").focus()  //  让文本域获取焦点
        COMMENTID = commentid;
    }

    function replyComment(articleid) {
        var content = $.trim($("#comment").val());
        if (content.length < 5 || content.length > 1000) {
            bootbox.alert({title: "错误提示", message: "评论内容在5-1000字之间"});
            return false;
        }

        var param = 'articleid=' + articleid;
        param += '&content=' + content;
        param += '&commentid=' + COMMENTID;
        $.post('/reply', param, function (data) {
            if (data == 'content-invalid') {
                bootbox.alert({title: "错误提示", message: "评论内容在5-1000字之间"});
            } else if (data == 'reply-limit') {
                bootbox.alert({title: "错误提示", message: "您今天已经用完5条评论的限额-1000字之间"});
            } else if (data == 'reply-pass') {
                location.reload();
            } else if (data == 'reply-fail') {
                bootbox.alert({title: "错误提示", message: "回复评论出错，请联系管理员"});
            }
        })
    }
</script>

{% endblock %}