<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识库查询</title>
    <link href="/home/lib/css/layui.css" th:href="@{/home/lib/css/layui.css}" rel="stylesheet"/>
    <style>
        /* 页面整体布局 */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            background-color:#f1eded;
        }

        /* 设置内容区域自动填充剩余高度 */
        #content {
            flex-grow: 1;
            //padding-bottom: 70px;
            display: flex;
            height: 100%;
        }

        /* 页脚样式 */
        #footer {
            background-color: #f2f2f2;
            padding: 80px;
        }


        #ltlogo {
            position: absolute;
            top: 43%; /* 将图像元素垂直居中 */
            left: 30%; /* 将图像元素水平居中 */
            height: 80px;
            transform: translate(-50%, -50%);
        }

        #search_form {
            position: absolute;
            top: 92px;
            right: 50px;
            display: flex;
        }

        .layui-nav {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            background-image: url(/home/base/bg-footer.png);
        }

        .layui-nav-item {
            position: relative;
            margin: 0 10px;
            padding: 0 5px;
        }

        #dhl {
            padding-bottom: 0;
            opacity: 0.6;
            font-style: inherit;
        }
        .time {
            position: absolute;
            right: 0;
        }
        #ID-tree-demo-onlyIconControl{
            width: 18%;
            //padding: 27px;
            box-sizing: border-box;
            padding-top: 74px;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            background-color: #c4c4c4;
        }
        .layui-tree-txt {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 165px;
        }
    </style>
</head>
<body class="layui-bg-gray" style="">
<div id="content">
    <div id="ID-tree-demo-onlyIconControl"></div>
    <div class="layui-container" style="padding-top: 7px;margin:0;width:100%;">
        <div>
            <blockquote class="layui-elem-quote" style="margin-top: -7px;border:none;background-color:#c4c4c4;">
                <h2>知识库查询</h2>
            </blockquote>
            <br>
            <p><i class="layui-icon layui-icon-location"></i>
                当前位置：<a>搜索结果页</a>&nbsp;</p>
            <hr>
            <form action="" id="search_form" class="layui-form"  style="display:flex;margin-top:11px;margin-left:40px;">
                <label>
                    <input name="kname" id="kname" type="text"  placeholder="请输入搜索内容" class="layui-input">
                </label>
                <button  class="layui-btn" onclick="queryList()">搜索</button>
            </form>
            <br>
            <table class="layui-table" lay-skin="line" style="height: 697px;
    overflow: auto;
    display: inline-block;">
                <colgroup>
                    <col width="800">
                    <col width="310">
                </colgroup>
                <thead>
                <tr>
                    <th>知识名称</th>
                    <th>所属类别</th>
                   <!-- <th>知识内容</th>-->
                    <th>更新日期</th>
                    <th>创建人</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody th:each="titleVo,status : ${page.list}">
                <tr>
                    <td th:title="${titleVo.kname}">
                        [[${titleVo.kname}]]
                    </td>
                    <td>
                        [[${titleVo.categoryname}]]
                    </td>
                    <td>[[${#dates.format(titleVo.updatetime, 'yyyy-MM-dd HH:mm:ss')}]]</td>
                    <td>
                        [[${titleVo.username}]]
                    </td>
                    <td>
                        <a style="color: #1e9fff;" target="_blank"  th:href="@{/public_view.html(id=${titleVo.id})}">
                         查看
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--分页-->
            <th:block th:include="search_page :: search_page"/>
        </div>
    </div>
</div>
<script  th:src="@{/home/lib/layui.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript">
    layui.use(function(){
        var tree = layui.tree;
        var layer = layui.layer;
        // 数据
        var data = [];
        $.ajax({
            type: "get",
            url: "/getTree",
            data: {},
            success: function(res) {
                //初始展开根节点
                var processedData = res.map(function(node) {
                    node.spread = false;
                    return node;
                });
                processedData[0].spread = true;
                processedData[1].spread = true;
                // AJAX 请求成功后渲染树组件
                renderTree(processedData);
            }
        });

        // 渲染树组件的函数
        function renderTree(data) {
            tree.render({
                elem: '#ID-tree-demo-onlyIconControl',
                data: data,
                customName: {
                    id: 'id',
                    title: 'categoryname',
                    children: 'children'
                  },
                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                click: function(obj){
                     queryParams(obj)
                }
            });
            // 添加 title 效果
            $('#ID-tree-demo-onlyIconControl').on('mouseenter', '.layui-tree-main', function() {
                this.title = this.innerText;
            });
        }
    });
    function queryParams(data) {
        setTimeout(function() {
            window.location.href = "/home?categoryid=" + data.data.id;
        }, 100); // 延迟 100 毫秒执行跳转
    };
    function queryList(){
        var kname = $("#kname").val();
        if (kname){
            $('#search_form').submit(function(){
                var actionStr="/home";
                $("#search_form").removeAttr("action").attr("action",actionStr);
                return true;
            });
        }else{
            alert("请输入查询关键字！")
        }
    }

</script>
</body>
</html>