<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{admin/include::head}">
    </head>
    <link rel="stylesheet" th:href="@{/admin/iconfont/iconfont.css}"/>
    <style>
    a, a:hover {
        text-decoration: none;
    }
    #editArea {
        background: white;
        padding: 10px 20px;
        margin-top: 14px;
    }
    .tags-ul {
        list-style: none;
        padding-block-start: 0;
        padding-inline-start: 0;
    }
    .tags-ul li {
        float: left;
        padding: 5px 0;
        cursor: pointer;
        border: rgba(0, 0, 0, 0) 1px solid;
        border-radius: 2px;
        display: block;
        margin: 3px;
        padding: 2px 8px 2px 10px;
        color: #aaa;
        font-size: 14.4px;
        font-weight: 400;
        line-height: 1.6;
        transition: all .1s ease-in;
    }
    .tags-ul li.checked {
        border: #c62627 1px dashed;
        color: #c62627;
    }
    .tags-ul li.checked>a {
        color: #c62627
    }
    .tags-ul li>a.icon {
        font-size: 10px;
    }
    .tags-ul li>a:hover {
        color: inherit
    }
    .tags-ul li>a>span {
        font-size: 10px
    }
    </style>
    <body style="background-color: #f2f2f2">
        <ul th:replace="~{admin/include::nav}"></ul>
        
        <div class="manage-body">
            <div>
                <h2 class="manage-title"><b>[[${title==null?'标签管理':title}]]</b>
            </div>
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" op="select-all-tags">
                    全选
                </button>
                <button class="layui-btn layui-btn-sm" op="toggle-tags">
                    反选
                </button>
                <button class="layui-btn layui-btn-sm operdown">
                    <span>选中项<i class="layui-icon layui-icon-sm layui-icon-triangle-d"></i></span>
                </button>
            </div>
            <div class="layui-btn-group">
                <a type="button" class="layui-btn layui-btn-sm comment-status layui-btn-danger" href="#" op="delete-unused-tags">
                    <i class="fa fa-fw fa-trash"></i>清除未使用标签
                </a>
            </div>
            <form class="layui-form layui-row layui-col-space20" lay-filter="editForm">
                <input type="text" tabindex=-1 class="outside-the-view" name="username" readonly/>
                <input type="password" tabindex=-1 class="outside-the-view" name="fakePassword" readonly autocomplete="new-password"/>
                <div class="layui-col-sm8 layui-col-xm12 layui-show">
                    <div id="editArea" class="layui-show layui-col-xs12">
                        <ul class="tags-ul">
                            <th:block th:each="tag, i : ${@metaService.listMetaCount(MetaTypeEnum.TAG, null)}">
                                <li 
                                th:with="tagJson=${JsonUtils.toJson(tag)}"
                                th:attr="mid=${tag.mid},tag=${tagJson}">
                                    <a
                                    th:href="@{${'/admin/v2/post/?tagId=' + tag.mid}}"
                                    target="_blank"
                                    th:attr="title=${'查看标签 ' + tag.name + ' 下的文章'}">
                                    <th:block th:text="${tag.name + '(' + tag.postCount + ')'}"></th:block>
                                    </a>
                                    <a class="icon edit" style="font-size: 5px;" href="#"
                                    th:attr="title=${'编辑标签 ' + tag.name}"
                                    >
                                    <span><i class="fa fa-fw fa-pen"></i></span>
                                    </a>
                                    <a class="icon del" href="#"
                                    th:attr="title=${'删除标签 ' + tag.name}">
                                    <span><i class="fa fa-fw fa-times"></i></span>
                                    </a>
                                </li>
                            </th:block>
                        </ul>
                    </div>
                </div>
                <div class="layui-col-sm4 layui-col-xs12">
                    <div class="layui-tab-item layui-show">
                        <div><b>标签名称</b><span>*</span></div>
                        <input type="text" class="layui-input" name="name" autocomplete="off">
                        <div class="layui-form-mid layui-word-aux" style="float: none;">
                        这是标签在站点中显示的名称.可以使用中文,如 "地球"
                        </div>
                    </div>
                    <div class="layui-tab-item layui-show">
                        <div><b>友好名称</b></div>
                        <input type="text" class="layui-input" name="friendlyName" autocomplete="off">
                        <div class="layui-form-mid layui-word-aux" style="float: none;">
                        用于创建友好的链接形式, 如果留空则默认使用标签名称的小写
                        </div>
                    </div>
                    <button class="layui-btn" lay-submit lay-filter="addTag">新增</button>
                </div>
            </form>
        </div>
        <input type="hidden" name="unfolded"/>
        <th:block th:replace="~{admin/include::head-script}"></th:block>
        <script type="text/html" id="editTag">
            <div class="layui-form" style="margin:10px 15px" id="editTagForm" lay-filter="editFileForm">
                <div class="layui-form-item">
                    <input type="hidden" name="mid"/>
                    <input type="hidden" name="type" value="TAG"/>
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" lay-verify="required" name="name" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">友好名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="friendlyName" placeholder="" autocomplete="off" class="layui-input">
                        <div class="layui-form-mid layui-word-aux">
                        用于生成友好连接时的名称，若留空，默认以标签名称小写填充，但不允许与其他标签的友好名称重复
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea type="text" name="description" placeholder="" autocomplete="off" class="layui-textarea"></textarea>
                        <div class="layui-form-mid layui-word-aux">
                        分类描述，可能用在某些地方的提示性描述
                        </div>
                    </div>
                </div>
                <div style="display:none" class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="editTag">提交</button>
                    </div>
                </div>
            </div>
        </script>
        <div th:replace="~{admin/include::feet}"></div>
        <script>
            layui
            .config({base: '/admin/layuiadmin/lib/'})
            .use(['table', 'dropdown', 'layer'], function(){
                var dropdown = layui.dropdown, laypage = layui.laypage;
                $('.tags-ul li').on('click', function (e) {
                    var that = $(this);
                    that.toggleClass('checked');
                });
                $('.tags-ul li>a').on('click', function (e) {
                    e.stopPropagation();
                    var that = $(this);
                    if (that.hasClass('icon')) {
                        var tag = JSON.parse(that.closest('li[tag]').attr('tag'));
                        if (that.hasClass('del')) {
                            layui.layer.confirm(
                                `确定删除标签 ${tag.name}吗？`,
                                function (index) {
                                    layui.layer.close(index);
                                    $.ajax({
                                        url: '/admin/v2/tag/delete',
                                        method: 'POST',
                                        data: {
                                            id: tag.mid
                                        },
                                        success: function () {
                                            that.closest('li[tag]').remove();
                                            layer.msg('删除成功', {offset: '15px', icon: 1, time: 1000})
                                        },
                                        error: function (res) {
                                            var r = res.responseJSON;
                                            layer.msg(r&&r.data||'服务器错误', 
                                                {offset: '15px', icon: 2, time: 2000});
                                            return
                                        }
                                    });
                                }
                            );
                        }
                        else if (that.hasClass('edit')) {
                            var opName = `编辑标签 ${tag.name}`;
                            layui.layer.open({
                                type: 1,
                                title: opName,
                                btn: ['提交', '关闭'],
                                yes: function(index, layero) {
                                    layero.find('[lay-filter="editTag"]').click();
                                },
                                area: ['500px', '500px'],
                                content: $('#editTag').html(),
                                success: function (layero, layerIndex) {
                                    $('#editTagForm [name="mid"]').val(tag.mid);
                                    $('#editTagForm [name="name"]').val(tag.name);
                                    $('#editTagForm [name="friendlyName"]').val(tag.friendlyName);
                                    $('#editTagForm [name="description"]').val(tag.description);
                                    layui.form.on('submit(editTag)', function (data) {
                                        $.ajax({
                                            url: '/admin/v2/tag/update',
                                            method: 'POST',
                                            data: data.field,
                                            success: function () {
                                                layui.layer.close(layerIndex);
                                                // layui.treeTable1.reload('categories', {});
                                                layer.msg(opName + ' 成功', {
                                                    offset: '15px',
                                                    icon: 1,
                                                    time: 1000
                                                }, function (){
                                                    location.reload();
                                                });
                                            },
                                            error: function (res) {
                                                var r = res.responseJSON;
                                                layer.msg(r && r.data || '服务器错误', {
                                                    offset: '15px',
                                                    icon: 2,
                                                    time: 2000
                                                });
                                            }
                                        })
                                    });
                                    layui.form.render();
                                }
                            });
                        }
                    }
                });
                $('[op="select-all-tags"]').on('click', function (e) {
                  $('.tags-ul li').addClass('checked');
                });
                $('[op="toggle-tags"]').on('click', function (e) {
                  $('.tags-ul li').toggleClass('checked');
                });
                $('[op="delete-unused-tags"]').on('click', function (e) {
                    e.preventDefault();
                    layui.layer.confirm(
                        `确定清除所有未使用的标签吗？`,
                        function (index) {
                            layui.layer.close(index);
                            $.ajax({
                                url: '/admin/v2/tag/deleteUnusedTags',
                                method: 'POST',
                                success: function (data) {
                                    console.log(data);
                                    layer.msg('删除成功', {offset: '15px', icon: 1, time: 1000})
                                },
                                error: function (res) {
                                    var r = res.responseJSON;
                                    layer.msg(r&&r.data||'服务器错误', 
                                        {offset: '15px', icon: 2, time: 2000});
                                    return
                                }
                            });
                        }
                    );
                })
            });
            $(function(){
                var macaron = [
                    '#f5dce7',    // PINKO
                    '#f1ccb8',    // マカロンオレンジ
                    '#f1f1b8',    // マカロンイエロー
                    '#b8f1cc',    // マカロングリーン
                    '#b8f1ed',    // マカロンオーシャンブルー
                    '#b8d4ea',    // BLUE
                    '#e7dac9',    // マカロン メープル?ヴァニーユ
                    '#d9b8f1'     // マカロンパープル
                ];
                var renderMacaron = function(list) {
                    $.each(list, function(i, a){
                        var j = i % macaron.length, s = {backgroundColor:macaron[j], color: '#6e7173'};
                        $(a).css(s).hover(function(){
                            $(this).css({backgroundColor:'#fff', color: '#c62627'});
                        }, function(){
                            $(this).css(s);
                        });
                    });
                }
                renderMacaron($('.tags-ul li'));
            });
        </script>
    </body>

</html>