<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据展示平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        lightBlue: '#e6f0ff',
                        cardBlue: '#f0f7ff',
                        borderBlue: '#bfd8ff',
                        btnBlue: '#165dff',
                        statBlue: '#dceaff'
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .scrollbar-thin {
                scrollbar-width: thin;
            }

            .scrollbar-thin::-webkit-scrollbar {
                width: 6px;
            }

            .scrollbar-thin::-webkit-scrollbar-thumb {
                background-color: rgba(156, 163, 175, 0.5);
                border-radius: 3px;
            }

            .stat-card {
                @apply bg-statBlue rounded-lg p-4 border border-borderBlue hover:shadow-sm transition duration-200;
            }

            .detail-panel {
                @apply fixed top-0 right-0 h-full w-0 bg-white shadow-lg z-50 transition-all duration-300 ease-in-out overflow-hidden;
            }

            /* 修改为70%宽度 */
            .detail-panel.open {
                @apply w-[70%];
            }

            .overlay {
                @apply fixed inset-0 bg-black bg-opacity-20 z-40 hidden transition-opacity duration-300;
            }

            .overlay.show {
                @apply block;
            }
        }
    </style>
</head>
<body class="bg-lightBlue min-h-screen flex flex-col">
<!-- 主容器 -->
<div class="flex-1 flex w-full mb-4 mt-2 px-4 md:px-8 lg:px-2">
    <!-- 左侧基本信息 (25%) -->
    <div class="w-1/4 p-4 bg-white rounded-lg shadow-sm mr-4 h-[calc(100vh-3rem)] overflow-y-auto scrollbar-thin">
        <h2 class="text-xl font-bold text-gray-800 mb-6 pb-2 border-b border-gray-200">基本信息</h2>
        <div class="space-y-5">
            <!-- 数据统计卡片 -->
            <div class="stat-card">
                <div class="flex items-center mb-3">
                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                        <i class="fa fa-database text-btnBlue"></i>
                    </div>
                    <h3 class="text-sm font-semibold text-gray-500">数据统计</h3>
                </div>
                <div class="space-y-3 pl-11">
                    <div class="flex justify-between items-end">
                        <span class="text-gray-500 text-sm">总数据表</span>
                        <span class="text-xl font-bold text-gray-800" th:text="${tables.size()}"></span>
                    </div>
                    <div class="w-full bg-white h-1.5 rounded-full overflow-hidden">
                        <div class="bg-btnBlue h-full rounded-full" style="width: 75%"></div>
                    </div>
                    <div class="text-xs text-gray-500">张</div>

                    <div class="flex justify-between items-end">
                        <span class="text-gray-500 text-sm">总数据量</span>
                        <span class="text-xl font-bold text-gray-800">348.2</span>
                    </div>
                    <div class="w-full bg-white h-1.5 rounded-full overflow-hidden">
                        <div class="bg-btnBlue h-full rounded-full" style="width: 60%"></div>
                    </div>
                    <div class="text-xs text-gray-500">GB</div>

                    <div class="flex justify-between items-end">
                        <span class="text-gray-500 text-sm">今日新增</span>
                        <span class="text-xl font-bold text-gray-800">12</span>
                    </div>
                    <div class="w-full bg-white h-1.5 rounded-full overflow-hidden">
                        <div class="bg-green-500 h-full rounded-full" style="width: 30%"></div>
                    </div>
                    <div class="text-xs text-gray-500">张表</div>
                </div>
            </div>

            <!-- 来源系统卡片 -->
            <div class="stat-card">
                <div class="flex items-center mb-3">
                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                        <i class="fa fa-sitemap text-btnBlue"></i>
                    </div>
                    <h3 class="text-sm font-semibold text-gray-500">来源系统</h3>
                </div>
                <div class="pl-11">
                    <div class="flex flex-wrap gap-2">
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full flex items-center">
                                <i class="fa fa-building-o mr-1"></i>ERP系统
                            </span>
                        <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full flex items-center">
                                <i class="fa fa-archive mr-1"></i>数据仓库
                            </span>
                        <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full flex items-center">
                                <i class="fa fa-cubes mr-1"></i>业务系统
                            </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 中间内容区域 -->
    <div class="w-full flex flex-col h-[calc(100vh-3rem)]">
        <!-- 查询区域 -->
        <div class="bg-white p-4 rounded-lg shadow-sm mb-4">
            <div class="flex flex-col sm:flex-row gap-3">
                <div class="relative flex-1">
                    <input
                            type="text"
                            id="searchInput"
                            placeholder="请输入表名称或描述进行查询..."
                            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    >
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>

                <div class="flex gap-2">
                    <button id="searchBtn"
                            class="bg-btnBlue hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition duration-200">
                        <i class="fa fa-search"></i>
                        <span>查询</span>
                    </button>
                    <button id="resetBtn"
                            class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2 transition duration-200">
                        <i class="fa fa-refresh"></i>
                        <span>重置</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="sticky top-0 z-10 flex justify-between items-center mb-4 bg-cardBlue p-3 rounded-lg">
            <h2 class="text-xl font-bold text-gray-800">数据列表</h2>
            <p class="text-sm text-gray-500">共 <span id="totalCount" th:text="${tables.size()}"></span> 条数据</p>
        </div>

        <!-- 卡片列表区域 -->
        <div class="flex-1 bg-white rounded-lg shadow-sm p-4 overflow-y-auto scrollbar-thin">
            <!-- 卡片网格 - 每行3个卡片 -->
            <div id="tableCardContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- 卡片1 -->
                <div class="border border-borderBlue bg-cardBlue rounded-lg p-4 hover:shadow-md transition duration-200 table-card"
                     th:each="table : ${tables}">
                    <div class="mb-2">
                        <div class="flex justify-between items-start">
                            <h3 class="font-semibold text-gray-800 table-name" th:text="${table.getTableName()}"></h3>
                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded"
                                  th:text="${table.getDataSource()}"></span>
                        </div>
                    </div>

                    <div class="mb-3 text-sm text-gray-600 table-desc" th:text="${table.getTableComment()}"></div>

                    <div class="mb-3 text-xs text-gray-500 space-y-1">
                        <div class="flex justify-between">
                            <span>大小：<span th:text="${table.getTableSize()}"></span></span>
                            <span>创建时间：<span th:text="${table.getCreateTime()}"></span></span>
                        </div>
                        <div>
                            <span>创建人：<span th:text="${table.getCreator()}"></span></span>
                        </div>
                    </div>

                    <div class="flex justify-end">
                        <button class="text-btnBlue hover:text-blue-700 text-sm font-medium flex items-center gap-1 transition duration-200 detail-btn"
                                th:data-tableId="${table.getTableId()}">
                            <span>详情</span>
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
            <!-- 无数据提示 -->
            <div id="emptyTip" class="hidden flex flex-col items-center justify-center h-40 text-gray-500">
                <i class="fa fa-search-minus text-4xl mb-2"></i>
                <span>未找到匹配的数据表</span>
            </div>
        </div>
    </div>
</div>
<!-- 右侧详情面板 - 已设置为70%宽度 -->
<div class="detail-panel" id="detailPanel">
    <div class="p-4 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white z-10">
        <h3 class="text-lg font-semibold text-gray-800">数据详情</h3>
        <button id="closeDetailBtn"
                class="text-gray-500 hover:text-gray-700 transition-colors p-2 rounded-full hover:bg-gray-100">
            <i class="fa fa-times text-xl"></i>
        </button>
    </div>
    <div style="height: calc(100% - 64px); overflow-y: auto;">
        <!-- 加载中动画 -->
        <div id="loadingMask" class="flex justify-center items-center h-full">
            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-btnBlue"></div>
            <span class="ml-3 text-gray-600">加载中...</span>
        </div>
        <!-- 详情内容 -->
        <iframe id="detailFrame" width="100%" height="100%" frameborder="0" style="min-height: 600px;"></iframe>
    </div>
</div>

<!-- 背景遮罩 -->
<div class="overlay" id="overlay"></div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 核心元素获取
        const searchInput = document.getElementById('searchInput');
        const searchBtn = document.getElementById('searchBtn');
        const resetBtn = document.getElementById('resetBtn');
        const tableCards = document.querySelectorAll('.table-card');
        const tableCardContainer = document.getElementById('tableCardContainer');
        const emptyTip = document.getElementById('emptyTip');
        const totalCountEl = document.getElementById('totalCount');
        const originalTotal = totalCountEl.textContent;

        // 详情面板相关逻辑
        const detailPanel = document.getElementById('detailPanel');
        const overlay = document.getElementById('overlay');
        const closeDetailBtn = document.getElementById('closeDetailBtn');
        const detailFrame = document.getElementById('detailFrame');
        const loadingMask = document.getElementById('loadingMask');
        const detailBtns = document.querySelectorAll('.detail-btn');

        // 搜索功能实现
        function handleSearch() {
            const searchVal = searchInput.value.trim().toLowerCase();
            let matchCount = 0;

            tableCards.forEach(card => {
                const tableName = card.querySelector('.table-name').textContent.toLowerCase();
                const tableDesc = card.querySelector('.table-desc').textContent.toLowerCase();

                // 匹配表名或描述
                const isMatch = tableName.includes(searchVal) || tableDesc.includes(searchVal);

                if (isMatch) {
                    card.style.display = '';
                    matchCount++;
                } else {
                    card.style.display = 'none';
                }
            });

            // 更新计数和空数据提示
            totalCountEl.textContent = matchCount;
            emptyTip.style.display = matchCount === 0 ? 'flex' : 'none';
        }

        // 重置功能实现
        function handleReset() {
            searchInput.value = '';
            tableCards.forEach(card => {
                card.style.display = '';
            });
            totalCountEl.textContent = originalTotal;
            emptyTip.style.display = 'none';
        }

        // 绑定搜索事件
        searchBtn.addEventListener('click', handleSearch);

        // 输入框回车触发搜索
        searchInput.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                handleSearch();
            }
        });

        // 绑定重置事件
        resetBtn.addEventListener('click', handleReset);

        // 打开详情面板
        detailBtns.forEach(btn => {
            btn.addEventListener('click', function () {
                const tableId = this.getAttribute('data-tableId');

                // 显示加载状态
                loadingMask.style.display = 'flex';

                // 加载详情内容
                detailFrame.src = `getFieldDetail?tableId=${tableId}`;

                // 当iframe加载完成后隐藏加载状态
                detailFrame.onload = function () {
                    loadingMask.style.display = 'none';
                };

                // 显示详情面板和遮罩
                detailPanel.classList.add('open');
                overlay.classList.add('show');

                // 防止背景滚动
                document.body.style.overflow = 'hidden';
            });
        });

        // 关闭详情面板
        function closeDetail() {
            detailPanel.classList.remove('open');
            overlay.classList.remove('show');
            detailFrame.src = '';

            // 恢复背景滚动
            document.body.style.overflow = '';
        }

        closeDetailBtn.addEventListener('click', closeDetail);
        overlay.addEventListener('click', closeDetail);

        // 按ESC键关闭详情面板
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && detailPanel.classList.contains('open')) {
                closeDetail();
            }
        });
    });
</script>
</body>
</html>