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

        {# 如果消耗过积分，显示result.content全部内容 #}
        {# 如果没有消耗过积分，显示result_content经过过滤的内容 #}
        {% if payed %}
        <div class="col-12 content">
            {{result.content | safe}}
        </div>
        {% else %}
        <div class="col-12 content">
            {{result_content | safe}}
            {{payed}}
        </div>
        {% endif %}

        {# 这是一个注释，用于说明下面的代码块 #}
        {% if result.credit > 0 and not payed %}
        <div class="col-12 readall">
            {# 存放islogin的应该是一个布尔值，如果内容存在，返回内容，内容不存在，返回定义的False #}
            {% if session.get('islogin') == 'true' %}
            <button class="col-sm-10 col-12" onclick="readAll()">
                <span class="oi oi-data-transfer-download" aria-hidden="true"></span> 阅读全文（消耗积分：{{ result.credit
                }} 分）
            </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/1</div>
        <div><a href="/article/{{result_last.articleid}}">上一篇：{{result_last.headline}}</a></div>
        <div><a href="/article/{{result_next.articleid}}">下一篇：{{result_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" style="height: 100px" id="comment"></textarea>
            </div>
        </div>
        <div class="col-12 row">
            <div class="col-12" style="text-align: right">
                {% if session.get('islogin') == 'true' %}
                <button class="btn btn-primary" onclick="addComment('{{result.articleid}}')" id="submitBtn">提交评论
                </button>
                <button type="button" class="btn btn-primary" onclick="replyComment('{{result.articleid}}')"
                        style="display: none;" id="replyBtn">回复评论
                </button>
                {% else %}
                <button class="btn btn-primary" onclick="showLogin()">点此登录</button>
                {% endif %}
            </div>
        </div>


        <!--        评论的内容-->
        {% for article in comment %}
        <div class="col-12 row article-list">
            <div class="col-sm-1 col-3 thumb d-none d-sm-block">
                <img src="../resource/img/avator.jpg" class="img-fluid"/>
            </div>
            <div class="col-sm-11 col-xs-12 detail">
                <div class="row">
                    <div class="col-sm-3 title">
                        <a href="/user/{{article.userid}}">{{ article.user.nickname }}</a>
                    </div>
                    <div class="col-sm-9 d-flex justify-content-end">
<!--                        {% if article.agreecount > 0 %}-->
<!--                        &lt;!&ndash;            如果点赞大于0&ndash;&gt;-->
<!--                        <label class="cancel-up" onclick="CancelUp(this)" data-articleid="{{article.articleid}}"-->
<!--                               data-commentid="{{article.commentid}}">-->
<!--                            <span class="oi oi-heart" aria-hidden="true"></span> 取消点赞-->
<!--                        </label>{{article.agreecount}}-->
<!--                        {% else %}-->
<!--                        <label class="up-comment" onclick="UpComment(this)" data-articleid="{{article.articleid}}"-->
<!--                               data-commentid="{{article.commentid}}">-->
<!--                            <span class="oi oi-heart" aria-hidden="true"></span> 点赞-->
<!--                        </label>{{article.agreecount}}-->
<!--                        {% endif %}-->

<!--                        {% if article.opposecount > 0  %}-->
<!--                        &lt;!&ndash;            如果正在反对&ndash;&gt;-->
<!--                        <label class="cancel-down" onclick="CancelDown(this)" data-articleid="{{article.articleid}}"-->
<!--                               data-commentid="{{article.commentid}}">-->
<!--                            <span class="oi oi-heart" aria-hidden="true"></span> 取消反对-->
<!--                        </label>{{article.opposecount}}-->
<!--                        {% else %}-->
<!--                        <label class="down-comment" onclick="DownComment(this)" data-articleid="{{article.articleid}}"-->
<!--                               data-commentid="{{article.commentid}}">-->
<!--                            <span class="oi oi-heart" aria-hidden="true"></span> 反对-->
<!--                        </label>{{article.opposecount}}-->
<!--                        {% endif %}-->

<!--                        {% if result.userid == article.userid %}-->
<!--                        <label class="favorite-btn" onclick="HideComment('{{article.commentid}}')"><span-->
<!--                                class="oi oi-heart" aria-hidden="true"></span>-->
<!--                            隐藏评论</label>-->
<!--                        {% endif %}-->
                        {% if result.userid == article.userid %}
<!--                        <a href="#" onclick="deleteUser(this, {{ user.userid }})">删除</a>-->
                        <label class="favorite-btn" onclick="deleteComment('{{article.commentid}}')"><span
                                class="oi oi-heart" aria-hidden="true"></span>
                            删除评论</label>
                        {% endif %}

                    </div>
                </div>
                <div class="intro">
                    {{article.content | striptags | truncate(80) }}
                </div>
            </div>
        </div>
        {% endfor %}

    </div>
</div>
{% include 'side.html' %}

<script>
    // 删除用户函数
    function deleteComment(obj, commentid) {
        if (confirm('确定删除该评论吗？')) {
            $.get('/admin/comment/delete/' + commentid, function (data) {
                if (data.success) {
                    alert('删除成功');
                    location.reload();  // 删除成功后刷新页面
                } else {
                    alert('删除失败');
                }
            });
        }
    }
    //阅读全文
    function readAll() {
        var param = 'articleid={{result.articleid}}&position={{position}}';
        $.post('/readall', param, function (data) {
            // 先隐藏现有内容，然后添加新内容，最后让新内容淡入
            $("#content").fadeOut(function () {
                $(this).append(data).fadeIn();
            });
            $(".readall").hide();
            window.location.reload();
        });
    }


    // 添加收藏
    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');
                // attr('onclick',''),将onclick里面的内容设为空，即点击之后不再进行任何的响应
            } else {
                bootbox.alert({title: "错误提示", message: "收藏文章出错，请联系管理员."});
            }
        })
    }

    //取消收藏
    function cancelFavorite(articleid) {
        $.ajax({
            url: '/favorite/' + articleid,
            type: 'delete',
            success: function (data) {
                if (data == 'not-login') {
                    bootbox.alert({title: "错误提示", message: "你还没有登录，不能取消收藏文章."});
                } else if (data == 'cancle-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 == 'cancle-fail') {
                    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') {
                bootbox.alert({title: "成功提示", message: "你评论成功"});
                setTimeout(function () {
                    location.reload(true); // 强制从服务器重新加载页面
                }, 1000);
            } else if (data == 'not-login') {
                bootbox.alert({title: "错误提示", message: "你还没有登录，不能发表评论."});
            } else {
                bootbox.alert({title: "错误提示", message: "发表评论出错，请联系管理员."});
            }
        });
    }


    // 评论点赞
    function UpComment(element) {
        var articleid = $(element).data('articleid');
        var commentid = $(element).data('commentid');
        $.post('/upcomment', {commentid: commentid, articleid: articleid}, function (data) {
            if (data == 'not-login') {
                bootbox.alert({title: "错误提示", message: "你还没有登录，不能收藏文章"});
            } else if (data == 'up-pass') {
                bootbox.alert({title: "点赞成功", message: "恭喜你点赞成功，您的点赞可以帮助更多的人看到"});
                $(".up-comment").html('<span class="oi oi-heart" aria-hidden="true"></span> 感谢点赞');
                $(".up-comment").attr('onclick', '').unbind('click');
                // attr('onclick',''),将onclick里面的内容设为空，即点击之后不再进行任何的响应
            } else {
                bootbox.alert({title: "错误提示", message: "点赞文章出错，请联系管理员."});
            }
        })
    }

    // 取消点赞
    function CancelUp(element) {
        var articleid = $(element).data('articleid');
        var commentid = $(element).data('commentid');
        $.post('/cancelup', {commentid: commentid, articleid: articleid}, function (data) {
            if (data == 'not-login') {
                bootbox.alert({title: "错误提示", message: "你还没有登录，不能收藏文章"});
            } else if (data == 'cancel-pass') {
                bootbox.alert({title: "取消点赞成功", message: "我们将继续优化给你带来优质推荐"});
                $(".cancel-up").html('<span class="oi oi-heart" aria-hidden="true"></span> 点赞');
                $(".cancel-up").attr('onclick', '').unbind('click');
                // attr('onclick',''),将onclick里面的内容设为空，即点击之后不再进行任何的响应
            } else {
                bootbox.alert({title: "错误提示", message: "取消点赞文章出错，请联系管理员."});
            }
        })
    }

    // 反对
    function DownComment(element) {
        var articleid = $(element).data('articleid');
        var commentid = $(element).data('commentid');
        $.post('/downcomment', {commentid: commentid, articleid: articleid}, function (data) {
            if (data == 'not-login') {
                bootbox.alert({title: "错误提示", message: "你还没有登录，不能收藏文章"});
            } else if (data == 'down-pass') {
                bootbox.alert({title: "反对成功", message: "恭喜你点赞成功，您的点赞可以帮助更多的人看到"});
                $(".down-comment").html('<span class="oi oi-heart" aria-hidden="true"></span> 反对成功');
                $(".down-comment").attr('onclick', '').unbind('click');
                // attr('onclick',''),将onclick里面的内容设为空，即点击之后不再进行任何的响应
            } else {
                bootbox.alert({title: "错误提示", message: "反对文章出错，请联系管理员."});
            }
        })
    }

    // 取消反对
    function CancelDown(element) {
        var articleid = $(element).data('articleid');
        var commentid = $(element).data('commentid');
        $.post('/canceldown', {commentid: commentid, articleid: articleid}, function (data) {
            if (data == 'not-login') {
                bootbox.alert({title: "错误提示", message: "你还没有登录，不能收藏文章"});
            } else if (data == 'cancel-pass') {
                bootbox.alert({title: "取消反对成功", message: "恭喜你点赞成功，您的点赞可以帮助更多的人看到"});
                $(".cancel-down").html('<span class="oi oi-heart" aria-hidden="true"></span> 反对');
                $(".cancel-down").attr('onclick', '').unbind('click');
                // attr('onclick',''),将onclick里面的内容设为空，即点击之后不再进行任何的响应
            } else {
                bootbox.alert({title: "错误提示", message: "点赞文章出错，请联系管理员."});
            }
        })
    }


</script>

{% endblock %} {# 定义插入内容结束 #}