<!-- 顶层控制区域的模板 -->
<script type="text/template" id="tagTopTemplate">
    <div class="card btn-line-height">
        <div class="row">
            <span>标签</span>
            <a href="{{!linkOfTagAll}}" class="tag lightgray large {{! if selectedTags.length==0 }}active{{!/if}}">全部</a>
            {{! each tagList tag }}
                <a class="tag lightgray meta large {{!tag.active}}" 
                    data-name="{{! tag.tag_name }}" onclick="onTagFilterClick(this);">{{! tag.tag_name }}({{!tag.amount}})</a>
            {{!/each}}
        </div>

        <div class="row top-offset-1">
            <button class="create-tag-btn btn-default">创建新标签</button>
            <button class="delete-tag-btn btn danger" onclick="xnote.action.note.deleteTagMeta(xnote.note.tagList)">删除标签</button>
        </div>
    </div>
</script>

{% include note/component/script/note_template.html %}

<div class="tag-top"></div>

<script type="text/javascript">

// 注册api模块
xnote.api["note.tag.manage.init"] = function (cmd) {
    var tagType = cmd.tagType;

    xnote.validate.notUndefined(cmd.tagType, "cmd.tagType is undefined!");
    xnote.validate.notUndefined(cmd.selectedTags, "cmd.selectedTags is undefined!");
    xnote.validate.notUndefined(cmd.linkOfTagAll, "cmd.linkOfTagAll is undefined!");

    if (cmd.tagType == "note") {
        xnote.validate.notUndefined(cmd.groupId, "cmd.groupId is undefined");
    }

    function renderTagTop(tagList) {
        var html = $("#tagTopTemplate").render({
            tagList: tagList,
            selectedTags: cmd.selectedTags,
            linkOfTagAll: cmd.linkOfTagAll
        });

        $(".tag-top").html(html);
    }

    function refreshTagTop() {
        var filterTags = JSON.parse(xnote.getUrlParam("tags", "[]"));
        var params = {
            "group_id": cmd.groupId,
            "tag_type": cmd.tagType
        };

        xnote.http.get("/note/tag/suggest", params, function (resp) {
            console.log("resp", resp);
            if (!resp.success) {
                xnote.alert(resp.message);
            } else {
                tagList = resp.data;
                xnote.note.tagList = tagList;
                for (var i=0; i < tagList.length; i++) {
                    var item = tagList[i];
                    if (filterTags.indexOf(item.tag_name)>=0) {
                        item.active = "active";
                    } else {
                        item.active = "";
                    }
                }
                renderTagTop(tagList);
            }
        });
    };

    refreshTagTop();

    window.onTagFilterClick = function(target) {
        var me = $(target);
        var tagName = me.attr("data-name");
        var tagId = me.attr("data-id");

        me.toggleClass("active");

        if (me.hasClass("meta")) {
            // 筛选模式
            // 筛选模式使用单选更好
            var filterTags = [tagName];
            location.href = xnote.addUrlParam(location.href, "tags", JSON.stringify(filterTags));
        }
    };

    // 创建标签    
    $("body").on("click", ".create-tag-btn", function (e) {
        xnote.prompt("创建新标签", "", function (text) {
            var params = {
                tag_type: cmd.tagType,
                tag_name: text,
                group_id: cmd.groupId
            };
            xnote.http.post("/note/tag/create", params, function (resp) {
                if (resp.code != "success") {
                    xnote.alert(resp.message);
                } else {
                    xnote.toast("创建成功");
                }
                refreshTagTop();
            });
        });
    });

};
</script>

