<!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>页面列表</b><a href="./editPAGE" 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 class="filter-group">
            <label>关键词</label>
            <div class="layui-input-inline">
              <input class="layui-input" name="keywords"
                autocomplete="off" placeholder="标题, 前言或正文的关键词">
            </div>
           <div class="layui-btn-group">
              <button type="button" id="filter" class="layui-btn layui-btn-sm"><i class="fa fa-fw fa-search"></i>筛选</button>
              <button type="button" id="clear-filter" class="layui-btn layui-btn-sm layui-btn-primary"><i class="fa fa-fw fa-trash"></i>清除</button>
            </div>
          </div>
          <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">
          <span class="layui-badge layui-bg-cyan">{{d.commentCount}}</span>
        </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>
            {{# } }}
            <span class="layui-badge layui-bg-gray">{{d.link}}</span>
            <a class="external-link" target="_blank" href="{{d.link}}" title="浏览 {{d.postTitle}}">
               <i class="fa fa-external-link-alt"></i>
            </a>
        </script>
        <th:block th:replace="~{admin/include::head-script}"></th:block>
        <script>
            layui
            .use(['table', 'dropdown', 'layer'], function(){
              const dropdown = layui.dropdown, table = layui.table;
              table.render({
                elem: '#posts',
                url:'./list', 
                skin:'line',
                cols: [ [
                  {type:'checkbox'},
                  {field:'commentCount', width:58, templet:'#commentTpl', title: '评论'},
                  {field:'postTitle', templet:'#titleTpl', title: '标题'},
                  {field:'createTime', title: '时间'}
                ]],
                where: Admin.buildWhereFromQuery(),
                page: Admin.buildPaginateFromQuery(),
                done: function (res, curr, count) {
                  Admin.updateQueryParams({
                    ...Admin.getQueryParams(),
                    page: curr,
                    limit: res.limit
                  }, true);
                }
              });
              window.addEventListener('popstate', function () {
                table.reload('posts', {
                  where: Admin.buildWhereFromQuery(),
                  page: Admin.buildPaginateFromQuery()
                });
              });
              // 填充输入框
              if (query.keywords) {
                $('[name="keywords"]').val(query.keywords)
              }
              // 筛选按钮点击事件
              $('#filter').on('click', function (e) {
                const keywords = $('input[name="keywords"]').val();
                Admin.updateQueryParams({
                  ...Admin.getQueryParams(),
                  keywords
                });
                window.dispatchEvent(new PopStateEvent('popstate'));
              });
              // 筛选输入框回车事件
              $('.filter-group input').on('keypress', function (e) {
                if (e.charCode === 13) $('#filter').click();
              });
              // 清空筛选条件按钮事件
              $('#clear-filter').on('click', function (e) {
                $('.filter-group input').val('');
                $('#filter').click();
              });
            	dropdown.render({
            	    elem: '.operdown',
            	    data: [
            	    	{title: '删除'}, 
            	    	{title: '设为公开', postStatus: 'RELEASED'}, 
            	    	{title: '设为私密', postStatus: 'PRIVATE' },
            	    	{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() {
                            window.dispatchEvent(new PopStateEvent('popstate'));
                          }
                        )
            	    		},
                      error: function (res) {
                        var r = res.responseJSON;
                        layer.msg(r&&r.data||'服务器错误', {
                          offset: '15px',
                          icon: 2,
                          time: 2000
                        });
                        return
                      }
            	    	})
            	    }
        	    });
            })
        </script>
    </body>

</html>