{% from xnote_handlers.note.models import NoteDO %}
{% init comment_class = "" %}
{% init file = NoteDO() %}
{% init show_comment_title = True %}
{% init show_comment_create = True %}
{% init show_comment_note = False %}
{% init show_comment_edit = False %}
{% init comment_title = "评论" %}
{% init comment_create_type = "" %}
{% init comment_list_type = "note_id" %}
{% init comment_list_date = "" %}
{% init comment_btn_text = "评论" %}
{% init comment_placeholder = "请输入评论..." %}
{% init comment_empty_text = "暂无评论~" %}
{% init comment_source_class = "" %}

<style type="text/css">
    .chat-msg-img {
        width: 180px;
    }
</style>

<link rel="stylesheet" type="text/css" href="{{_server_home}}/_static/lib/webuploader/webuploader.css">
<script type="text/javascript" src="{{_server_home}}/_static/lib/webuploader/webuploader.nolog.min.js"></script>
{% include common/script/load_laydate.html %}

{% if _has_login and show_comment_create %}
<div class="card {{comment_class}}">
    {% if show_comment_title %}
    <div class="card-title">
        <span>{{comment_title}}</span>
    </div>
    {% end %}

    <div class="col-md-12">
        <textarea id="commentText" class="col-md-12 no-outline auto-height"
            placeholder="{{comment_placeholder}}"></textarea>

        <div class="row margin-top-sm">
            <div id="commentFileUploader" class="hide"></div>
            <input type="file" id="commentFilePicker" class="hide" multiple />
            <input type="button" id="commentFilePickerBtn" class="btn btn-default" value="添加附件" />
            <button class="btn" id="saveCommentBtn">{{comment_btn_text}}</button>
        </div>
    </div>
</div>
{% end %}

<div class="card">
    <div class="x-tab-box btn-style" data-tab-key="comment_order" data-tab-default="newest">
        <a class="x-tab" data-tab-value="newest">最新</a>
        <a class="x-tab" data-tab-value="oldest">最早</a>
    </div>
    <div class="col-md-12" id="comments">
        <p class="align-center">加载中...</p>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        var loadIndex = 0;
        var editIndex = 0;

        function refreshComments() {
            var page = getUrlParam("page", 1);
            var list_param = {
                note_id: "{{file.id}}",
                list_type: "{{comment_list_type}}",
                list_date: "{{comment_list_date}}",
                show_note: "{{show_comment_note}}",
                show_edit: "{{show_comment_edit}}",
                key: getUrlParam("key"),
                resp_type: "html",
                page: page
            };
            list_param.comment_order = getUrlParam("comment_order", "latest");
            list_param.share_token = getUrlParam("share_token", "");

            xnote.http.get("/note/comments", list_param, function (resp) {
                $("#comments").html(resp);
            });
        }

        function appendToInputText(line) {
            // body...
            var oldTextValue = $("#commentText").val();
            if (oldTextValue != "") {
                oldTextValue += "\n";
            }
            $("#commentText").val(oldTextValue + line);
        }

        refreshComments();

        $("#saveCommentBtn").click(function () {
            var request = {};
            request.note_id = "{{file.id}}";
            request.content = $("#commentText").val();
            request.type = "{{comment_create_type}}";

            xnote.http.post("/note/comment/save", request, function (resp) {
                console.log(resp);
                if (resp.code == "success") {
                    $("#commentText").val("");
                    refreshComments();
                } else {
                    xnote.toast(resp.message);
                }
            });
        });

        $("#comments").on("click", ".delete-comment-btn", function () {
            var id = $(this).attr("data-id");
            var content = $(this).attr("data-content");
            xnote.confirm("确定删除`" + content + "`?", function (conf) {
                if (conf) {
                    xnote.http.post("/note/comment/delete", { comment_id: id }, function (resp) {
                        refreshComments();
                    });
                }
            });
        });

        $("#comments").on("click", ".edit-comment-btn", function () {
            var id = $(this).attr("data-id");
            xnote.http.get("/note/comment?p=edit&comment_id=" + id, function (resp) {
                editIndex = xnote.showDialog("编辑", resp);
            });
        });

        // 触发文件上传操作
        $("#commentFilePickerBtn").on("click", function (event) {
            console.log("select file button click");
            $("#commentFilePicker").click();
        });


        // 上传文件
        xnote.createUploaderEx({
            fileSelector: "#commentFilePicker",
            chunked: false,
            successFn: function (resp) {
                console.log("文件上传成功", resp);
                var link = "file://" + resp.webpath;
                appendToInputText(link);
            },
            fixOrientation: true,
            fileName: "auto"
        });

        // 通过剪切板上传
        $("#commentText").on("paste", function (e) {
            xnote.requestUploadByClip(e, "msg", function (respJson) {
                console.log(respJson);
                var link = "file://" + respJson.webpath;
                appendToInputText(link);
            });
        });

        xnote.on("comment.refresh", refreshComments);
        xnote.on("comment.closeEditDialog", function () {
            layer.close(editIndex);
        });
        $("textarea.auto-height").autoHeight();
    });

// 置顶评论
xnote.note.pinComment = function(target, pinLevel) {
    var id = $(target).attr("data-id");
    var params = {
        comment_id: id,
        pin_level: pinLevel
    };
    xnote.http.post("/note/comment/update_pin_level", params, function (resp) {
        if (resp.success) {
            location.reload();
        } else {
            xnote.alert(resp.message);
        }
    });
}
</script>