<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{admin/include::head}">
    </head>
    
    <body style="background-color: #f2f2f2">
        <ul th:replace="~{admin/include::nav}"></ul>
        
        <div class="manage-body">
            <div>
            <h2 class="manage-title"><b th:text="${manageTitle}">说说列表</b><a href="./edit" class="operate">新增</a></h2>
            
            </div>
            <button class="layui-btn layui-btn-sm operdown">
               <span>选中项<i class="layui-icon layui-icon-sm layui-icon-triangle-d"></i></span>
           </button>
            <div>
                <table class="layui-table" id="posts" lay-filter="posts">
                </table>
            </div>
        </div>
        <div th:replace="~{admin/include::feet}"></div>
        <script type="text/html" id="commentTpl">
            <a href="/admin/v2/comment?postId={{d.postId}}">
                {{# if (d.commentCount > 0) { }}
                <span class="layui-badge layui-bg-cyan">{{d.commentCount}}</span>
                {{# } else { }}
                <span class="layui-badge layui-bg-cyan" style="opacity: .6;">{{d.commentCount}}</span>
                {{# } }}
            </a>
        </script>
        <script type="text/html" id="titleTpl">
            <a href="./edit?postId={{d.postId}}" title="编辑 {{d.postTitle}}">{{d.postTitle}}</a>
            {{# if (d.postStatus != '公开') { }}
            <span class="layui-badge 
            {{# if (d.postStatus == '草稿'){ }}
            badge-draft
            {{# }else if (d.postStatus == '隐藏'){ }}
            badge-hidden
            {{# }else if (d.postStatus == '私密'){ }}
            badge-private
            {{# } }}
            ">{{d.postStatus}}</span>
            {{# } }}
            {{# if (d.password != '') { }}
            <span class="layui-badge badge-encrypted" title="本文包含密码">加密</span>
            {{# } }}
            
            <a class="external-link" target="_blank" href="{{d.link}}" title="浏览 {{d.postTitle}}">
               <i class="fa fa-external-link-alt"></i>
            </a>
        </script>
        <input type="hidden" id="categoryId" name="categoryId" th:value="${categoryId == null ? '' : categoryId}">
        <input type="hidden" id="tagId" name="tagId" th:value="${tagId == null ? '' : tagId}">
        <th:block th:replace="~{admin/include::head-script}"></th:block>
        <script th:inline="javascript">
            layui
            .use(['table', 'dropdown', 'layer'], function(){
            	var dropdown = layui.dropdown, table = layui.table,
            	categoryId = $('#categoryId').val() || null,
              tagId = $('#tagId').val() || null;
            	table.render({
                elem: '#posts',
                url:'./list?type=TWEET' + (categoryId == null ? '' : `&categoryId=${categoryId}`) + (tagId == null ? '' : `&tagId=${tagId}`), 
                page:true, skin:'line',
                cols: [ [
                  {type:'checkbox'},
                  {field:'commentCount', width:58, templet:'#commentTpl', title: '评论'},
                  {field:'postTitle', templet:'#titleTpl', title: '标题'},
                  {field:'createTime', title: '时间'}
                ]]
              });
            	dropdown.render({
            	    elem: '.operdown',
            	    data: [
            	    	{title: '删除'}, 
            	    	{title: '设为公开', postStatus: 'RELEASED'}, 
                    {title: '设为私密', postStatus: 'PRIVATE'},
                    {title: '设为草稿', postStatus: 'DRAFT'},
            	    	{title: '设为隐藏', postStatus: 'HIDDEN'}],
            	    click: function (data, othis){
            	    	var checked = layui.table.checkStatus('posts'), postIds = [];
            	    	if (!checked.data.length) {
            	    		layui.layer.msg('未选中任何项', {time: 1000});
            	    		return;
            	    	}
            	    	$.each(checked.data, function (i, post){
            	    		postIds.push(post.postId);
            	    	});
                    data = $.extend(data, {ids: postIds});
            	    	$.ajax({
            	    		url: '/admin/v2/post/batchOp',
            	    		method: 'POST',
                      data: data,
            	    		success: function () {
                        layer.msg('批量操作成功', {
                            offset: '15px',
                            icon: 1,
                            time: 1000
                          }, 
                          function() {
                            layui.table.reload('posts',{
                              page: {
                                curr: $(".layui-laypage-em").next().html() //当前页码值
                              },
                              categoryId : categoryId,
                              tagId : tagId
                            });
                          }
                        )
            	    		},
            	    		error: function (res) {
            	    			var r = res.responseJSON;
                        layer.msg(r&&r.data||'服务器错误', {
                          offset: '15px',
                          icon: 2,
                          time: 2000
                        });
                        return
            	    		}
            	    	})
            	    }
        	    });
            })
        </script>
    </body>

</html>