{% extends 'base.html' %}

{% block css %}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 125px;
            text-align: center;
            margin-top: 10px;
        }

        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url('/static/img/upup.gif') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url('/static/img/downdown.gif') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
        }
    </style>
{% endblock %}

{% block content %}
    {#    点赞点踩样式开始#}
    <h1>{{ article_detail.title }}</h1>
    <div class="article_content">
        {{ article_detail.content|safe }}
    </div>
    <div class="clearfix">
        <div id="div_digg" style="">
            <div class="diggit action">
                <span class="diggnum" id="digg_count">{{ article_detail.up_num|default:0 }}</span>
            </div>
            <div class="buryit action">
                <span class="burynum" id="bury_count">{{ article_detail.down_num|default:0 }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips" style="color: red;"></div>
        </div>
    </div>
    {#    点赞点踩样式结束#}

    {#    评论楼开始#}
    <div>
        <ul class="list-group">
            {% for comment in comment_list %}
                <li class="list-group-item">
                    {#    #1楼 2019-10-02 20:51 杨鸿儒#}
                    <p>
                        <span># {{ forloop.counter }}楼</span>
                        <span>{{ comment.create_time|date:'Y-m-d H:i' }}</span>
                        <span>{{ comment.user.username }}</span>
                        <span class="pull-right"><a href="javascript:;" class="reply"
                                                    username="{{ comment.user.username }}"
                                                    comment_id="{{ comment.pk }}">回复</a></span>
                    </p>
                    <p>
                        {{ comment.content }}
                    </p>
                </li>
            {% endfor %}
        </ul>
    </div>


    {#    评论楼结束#}

    {#    评论样式开始#}
    <div>
        <p>
            <span class="glyphicon glyphicon-comment">发表评论</span>
        </p>
        <p>
            <textarea name="" id="comment_content" cols="30" rows="10"></textarea>
        </p>
        <p>
            <button class="btn btn-success comment">提交评论</button>
        </p>
    </div>


    {#    评论样式结束#}
{% endblock %}

{% block js %}
    <script>

        $('.action').click(function () {
            var is_up = $(this).hasClass('diggit')
            console.log(is_up)
            var article_id = '{{ article_detail.id }}'
            var div = $(this)

            $.ajax({
                url: '/up_or_down/',
                type: 'post',
                data: {is_up: is_up, article_id: article_id},
                success: function (res) {
                    if (res.code == 200) {
                        $("#digg_tips").text(res.msg)
                        let old = div.children().text() // str
                        div.children().text(parseInt(old) + 1)
                    } else {
                        $("#digg_tips").html(res.msg)
                    }
                }

            })
        })

        var parent_id = null;
        // 评论功能
        $('.comment').click(function () {
            var article_id = '{{ article_detail.pk }}'
            var content = $('#comment_content').val()
            var num = content.indexOf('\n')  // 10
            if ( num != -1) {
                content = content.slice(num+1)
            }
            if (!content) {
                layer.msg('请来点咖啡')
                return
            }

            // 发起ajax请求
            $.ajax({
                url: '/comment/',
                type: 'post',
                data: {article_id: article_id, content: content, parent_id:parent_id},
                success: function (res) {
                    if (res.code == 200) {
                        $("#comment_content").val('')
                        var username = '{{ request.session.username }}'
                        var html = ` <li class="list-group-item">
                                    {#    #1楼 2019-10-02 20:51 杨鸿儒#}
                                    <p>
                                        <span>${username} </span>
                                    </p>
                                    <p>
                                        ${content}
                                    </p>
                                </li>`

                        $('.list-group').append(html)
                    }
                }

            })
        });

        $('.reply').click(function () {
            username = $(this).attr('username');
            var content = '@' + username + '\n'
            parent_id = $(this).attr('comment_id')
            $("#comment_content").val(content).focus()
        })
    </script>
{% endblock %}