{#
<!--
@Author       : xupingmao
@email        : 578749341@qq.com
@Date         : 2022-04-30 12:39:20
@LastEditors  : xupingmao
@LastEditTime : 2022-04-30 23:27:00
@FilePath     : /xnote/handlers/dict/page/relevant_list.html
--> #}

{% extends base %}

{% block head %}
<style>
    .word-info {
        display: inline-block;
        width: 100px;
    }
    .word-others {
        margin-left: 10px;
        display: inline;
    }
</style>
{% end %}

{% block body_left %}

{% init words = [] %}

<div class="card">
    <div class="card-title">
        <span>相关词词库</span>
        <div class="float-right">
            <a class="btn add-relevant-word">新增相关词</a>
            {% include common/button/back_button.html %}
        </div>
    </div>
</div>

<div class="card">

    <div class="list">
        {% if len(words) == 0 %}
        {% include common/text/empty_text.html %}
        {% end %}

        {% for item in words %}
        <div class="list-item">
            <span class="word-info">{{item.word}}</span>
            <div class="word-others">
                <span>相关单词</span>
                {% for o in item.others %}
                <span class="tag info">{{o}}</span>
                {% end %}
            </div>
            <span class="book-size">
                <button class="btn btn-danger delete-word-btn" data-word="{{item.word}}">删除</button>
                <i class="fa fa-chevron-right"></i>
            </span>
        </div>
        {% end %}
    </div>

</div>


<!-- 分页 -->
{% if "page" in globals() %}
<div class="card">
    {% include mod_pagenation.html %}
</div>
{% end %}

{% end %}

{% block body_right %}

{% include dict/page/dict_sidebar.html %}

<script type="text/javascript">
    $(function () {
        $(".add-relevant-word").click(function (e) {
            xnote.openRelevantEditDialog("");
        });

        $(".delete-word-btn").click(function (e) {
            var word = $(e.target).attr("data-word");
            xnote.confirm("确定要删除[" + word + "]吗?", function () {
                $.post("/dict/relevant/delete", {word:word}, function (resp) {
                    if (resp.code == "success") {
                        xnote.toast("删除成功");
                        setTimeout(function() {
                            window.location.reload();
                        }, 500);
                    } else {
                        xnote.alert("删除失败:" + resp.message);
                    }
                });
            })
        });

        function getDialogURL(key) {
            return "/dict/relevant/edit_dialog?key=" + encodeURIComponent(key);
        }

        xnote.openRelevantEditDialog = function (key) {
            xnote.prompt("添加相关词", "", function (inputText) {
                var params = {
                    "words": inputText
                };
                $.post("/dict/relevant/add_words", params, function (resp) {
                    if (resp.code == "success") {
                        xnote.toast("添加成功");
                        setTimeout(function() {
                            window.location.reload();
                        }, 500);
                    } else {
                        xnote.alert("添加失败:" + resp.message);
                    }
                });
            });
        };

        xnote.updateRelevantEditDialog = function (key) {
            var url = getDialogURL(key);
            $.get(url, function (resp) {
                $("relevant-edit-box").html(resp);
            });
        }

    });

</script>
{% end %}