<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>论坛-Quinn</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/backgroud.css}">
<style>
    #maxLength {
        max-width: 720px;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 超出部分不显示 */
        text-overflow: ellipsis; /* 超出部分显示为... */
    }
</style>
</head>
<body>

<div th:replace="~{common/header::header(activeUrl='blog')}"></div>

<main role="main" class="container">
    <div class="my-3 p-3 bg-white rounded shadow-sm">
        <div th:fragment="user_table_refresh" th:id="id_user_table_refresh">
            <input id="findWhat" type="hidden" th:value="${findWhat}">
            <h6 class="border-bottom border-gray pb-2 mt-1">
                搜索结果：
                <span th:text="${pageParam.getTotal()}"></span>
            </h6>
            <div th:each="find:${findList}" class="media-body small pl-2 border-bottom border-gray pb-2 pt-2">
                <!-- 标题 -->
                <!-- 类型 -->
                <span th:text="${find.getCategory()=='BLOG'?'论坛':'资源'}"
                      th:class="${find.getCategory()=='BLOG'?'badge badge-success':'badge badge-primary'}">
            </span>
                <a class="sTitle text-dark font-weight-bold text-decoration-none"
                   th:href="@{${find.getCategory()=='BLOG'?'/blog/read/':'/source/view/'} + ${find.getTopicId()}}">
                    [[${find.getTopicName()}]]
                </a>
                <!-- 时间 -->
                <p class="float-right" th:text="${#dates.format(find.getGmtCreate(),'yyyy-MM-dd HH:mm:ss')}">
                </p>
                <div class="small">
                    <span id="maxLength" class="sContent d-block" th:text="${find.getContentText()}">
                </span>
                </div>
            </div>
            <!--分页-->
            <nav aria-label="Page navigation example" class="mt-4">
                <ul class="pagination justify-content-center pagination-sm">
                    <li th:class="${pageParam.hasPrevious()==true?'page-item':'page-item disabled'}">
                        <a class="page-link" href="javascript:navChange(-1);" tabindex="">Previous</a>
                    </li>
                    <li class="page-item" th:if="${pageParam.hasPrevious()}">
                        <a class="page-link" href="javascript:navChange(-1);" th:text="${pageParam.getCurrent()-1}"></a>
                    </li>
                    <li class="page-item active">
                        <a id = "current" class="page-link" href="javascript:navChange(0);" th:text="${pageParam.getCurrent()}"></a>
                    </li>
                    <li class="page-item" th:if="${pageParam.hasNext()}">
                        <a class="page-link" href="javascript:navChange(1);" th:text="${pageParam.getCurrent()+1}"></a>
                    </li>
                    <li th:class="${pageParam.hasNext()==true?'page-item':'page-item disabled'}">
                        <a class="page-link" href="javascript:navChange(1);">Next</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</main>


<div th:replace="~{common/footer::footer}"></div>

<a class="to-top badge badge-light">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/js/jquery-ui.min.js}"></script>
<script th:src="@{/live/js/addlive2d.js}"></script>
<script type="text/javascript">
    /**
     * 高亮显示搜索串
     */
    function highLine(){
        const searchStr = $('#findWhat').val();
        const reg = new RegExp(searchStr,'g');
        let newStr = '';
        let label = '';
        $('.sTitle').each(function(){
            label = $(this).html();
            newStr = label.replace(reg,'<span style="color: red">' + searchStr + '</span>');
            $(this).html(newStr);
        });

        $('.sContent').each(function(){
            label = $(this).html();
            newStr = label.replace(reg,'<span style="color: red">' + searchStr + '</span>');
            $(this).html(newStr);
        });
    }
    function navChange(page){
        var findWhat = $('#findWhat').val()
        var current = $('#current').text()
        var pageNum = parseInt(current) + page
        $.ajax({
            url: "/search",
            async: false,
            type: "post",
            data: {"findWhat":findWhat,"pageNum": pageNum, "limit": 20},
            success: function (data) {
                $('#id_user_table_refresh').html(data);
                highLine();
            }
        })
    }
</script>
<script type="text/javascript">
    $(function(){
        highLine();
    });
</script>
</body>
</html>
