<!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">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#e3f2fd',
                        secondary: '#bbdefb',
                        accent: '#4a90e2', // 加深了主色调，提高对比度
                        card: '#ffffff',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

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

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

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

            .scrollbar-thin::-webkit-scrollbar-thumb {
                background-color: rgba(74, 144, 226, 0.5);
                border-radius: 3px;
            }

            .card-hover {
                transition: transform 0.2s, box-shadow 0.2s;
            }

            .card-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            /* 表格滚动容器样式 */
            .table-container {
                max-height: calc(100vh - 180px);
                overflow-y: auto;
                -ms-overflow-style: thin;
                scrollbar-width: thin;
            }

            .table-container::-webkit-scrollbar {
                width: 6px;
            }

            .table-container::-webkit-scrollbar-thumb {
                background-color: rgba(74, 144, 226, 0.5);
                border-radius: 3px;
            }

            /* 表头样式优化 - 提高可读性 */
            .sticky-header th {
                position: sticky;
                top: 0;
                z-index: 10;
                background-color: #4a90e2; /* 更深的蓝色背景 */
                color: white;
                font-weight: 600;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加文字阴影增强可读性 */
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 底部阴影区分表头和内容 */
            }
        }
    </style>
</head>
<body class="bg-primary min-h-screen m-0">
<div class="flex h-screen pb-15">
    <!-- 左侧基本信息区域 - 卡片式布局 -->
    <div class="w-1/4 bg-secondary p-6 overflow-y-auto scrollbar-thin">
        <h2 class="text-xl font-bold mb-6 text-gray-800 border-b-2 border-accent pb-2">基本信息</h2>

        <div class="grid grid-cols-1 gap-4">
            <!-- 数据表名称卡片 -->
            <div class="bg-card rounded-lg p-4 shadow-md card-hover">
                <h3 class="font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-database mr-2 text-accent"></i>数据表名称
                </h3>
                <p class="mt-2 text-gray-600"><span th:text="${tableInfo.getTableName()}"></span></p>
            </div>

            <!-- 创建时间卡片 -->
            <div class="bg-card rounded-lg p-4 shadow-md card-hover">
                <h3 class="font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-calendar-plus-o mr-2 text-accent"></i>创建时间
                </h3>
                <p class="mt-2 text-gray-600">
                    <span th:text="${tableInfo.getCreateTime()}"></span>
                </p>
            </div>

            <!-- 更新时间卡片 -->
            <div class="bg-card rounded-lg p-4 shadow-md card-hover">
                <h3 class="font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-calendar-check-o mr-2 text-accent"></i>更新时间
                </h3>
                <p class="mt-2 text-gray-600">
                    <span th:text="${tableInfo.getUpdateTime()}"></span>
                </p>
            </div>

            <!-- 数据记录数卡片 -->
            <div class="bg-card rounded-lg p-4 shadow-md card-hover">
                <h3 class="font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-list-ol mr-2 text-accent"></i>数据记录数
                </h3>
                <p class="mt-2 text-gray-600">
                    <span th:text="${tableInfo.getDataRows()}"></span> 条
                </p>
            </div>

            <!-- 存储引擎卡片 -->
            <div class="bg-card rounded-lg p-4 shadow-md card-hover">
                <h3 class="font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-cogs mr-2 text-accent"></i>存储引擎
                </h3>
                <p class="mt-2 text-gray-600">InnoDB</p>
            </div>

            <!-- 字符集卡片 -->
            <div class="bg-card rounded-lg p-4 shadow-md card-hover">
                <h3 class="font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-font mr-2 text-accent"></i>字符集
                </h3>
                <p class="mt-2 text-gray-600">utf8mb4</p>
            </div>

            <!-- 表描述卡片 -->
            <div class="bg-card rounded-lg p-4 shadow-md card-hover">
                <h3 class="font-semibold text-gray-700 flex items-center">
                    <i class="fa fa-file-text-o mr-2 text-accent"></i>表描述
                </h3>
                <p class="mt-2 text-gray-600">
                    <span th:text="${tableInfo.getTableComment()}"></span>
                </p>
            </div>
        </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="w-3/4 p-6 overflow-y-auto scrollbar-thin">
        <!-- 切换标签 -->
        <div class="flex border-b-2 border-accent mb-6">
            <button id="fieldBtn" class="tab-btn active px-6 py-3 text-accent font-medium flex items-center gap-2"
                    onclick="showTab('fieldInfo')">
                <i class="fa fa-table"></i>
                <span>字段信息</span>
            </button>
            <button id="queryBtn" class="tab-btn px-6 py-3 text-gray-600 font-medium flex items-center gap-2"
                    onclick="showTab('queryInfo')">
                <i class="fa fa-search"></i>
                <span>查询信息</span>
            </button>
            <button id="createBtn" class="tab-btn px-6 py-3 text-gray-600 font-medium flex items-center gap-2"
                    onclick="showTab('createInfo')">
                <i class="fa fa-code"></i>
                <span>创表信息</span>
            </button>
        </div>

        <!-- 提示消息容器 -->
        <div id="notification"
             class="fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 flex items-center gap-2 z-50"></div>

        <!-- 字段信息 - 优化表格滚动和表头可读性 -->
        <div id="fieldInfo" class="tab-content block">
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <!-- 表格滚动容器 -->
                <div class="table-container">
                    <table class="min-w-full table-fixed">
                        <thead class="sticky-header">
                        <tr>
                            <!-- 按需求设置固定列宽，剩余宽度分配给名称和说明 -->
                            <th class="py-3 px-4 text-left w-[120px]">字段序号</th>
                            <th class="py-3 px-4 text-left w-[220px]">字段名称</th>
                            <th class="py-3 px-4 text-left w-[120px]">字段类型</th>
                            <th class="py-3 px-4 text-left w-[120px]">字段长度</th>
                            <th class="py-3 px-4 text-left grow">字段说明</th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200" th:each="field : ${fields}">
                        <!-- 数据行 -->
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 w-[120px]" th:text="${field.getFieldOrder()}"></td>
                            <td class="py-3 px-4 w-[220px]" th:text="${field.getFieldName()}"></td>
                            <td class="py-3 px-4 w-[120px]" th:text="${field.getFieldType()}"></td>
                            <td class="py-3 px-4 w-[120px]" th:text="${field.getFieldLength()}"></td>
                            <td class="py-3 px-4 grow" th:text="${field.getFieldRemark()}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 查询信息 -->
        <div id="queryInfo" class="tab-content hidden">
            <div class="flex justify-between items-center mb-3">
                <h3 class="text-lg font-semibold text-gray-800">SELECT 语句</h3>
                <button onclick="copyToClipboard('queryText')"
                        class="bg-accent hover:bg-blue-600 text-white px-4 py-2 rounded flex items-center gap-1 transition-colors">
                    <i class="fa fa-copy"></i>
                    <span>复制</span>
                </button>
            </div>
            <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono text-sm h-[calc(100vh-180px)] overflow-auto scrollbar-thin">
                <pre id="queryText" th:text="${selectSql}"></pre>
            </div>
        </div>

        <!-- 创表信息 -->
        <div id="createInfo" class="tab-content hidden">
            <div class="flex justify-between items-center mb-3">
                <h3 class="text-lg font-semibold text-gray-800">CREATE 语句</h3>
                <button onclick="copyToClipboard('createText')"
                        class="bg-accent hover:bg-blue-600 text-white px-4 py-2 rounded flex items-center gap-1 transition-colors">
                    <i class="fa fa-copy"></i>
                    <span>复制</span>
                </button>
            </div>
            <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono text-sm h-[calc(100vh-180px)] overflow-auto scrollbar-thin">
                <pre id="createText" th:text="${createSql}"></pre>
            </div>
        </div>
    </div>
</div>

<script>
    // 切换标签显示
    function showTab(tabId) {
        document.querySelectorAll('.tab-content').forEach(tab => {
            tab.classList.add('hidden');
        });
        document.getElementById(tabId).classList.remove('hidden');

        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('text-accent');
            btn.classList.add('text-gray-600');
        });

        if (tabId === 'fieldInfo') {
            document.getElementById('fieldBtn').classList.remove('text-gray-600');
            document.getElementById('fieldBtn').classList.add('text-accent');
        } else if (tabId === 'queryInfo') {
            document.getElementById('queryBtn').classList.remove('text-gray-600');
            document.getElementById('queryBtn').classList.add('text-accent');
        } else if (tabId === 'createInfo') {
            document.getElementById('createBtn').classList.remove('text-gray-600');
            document.getElementById('createBtn').classList.add('text-accent');
        }
    }

    // 显示通知消息
    function showNotification(message, isSuccess) {
        const notification = document.getElementById('notification');
        notification.textContent = '';

        notification.className = 'fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 flex items-center gap-2 z-50';
        notification.classList.add(isSuccess ? 'bg-green-500' : 'bg-red-500');
        notification.classList.add('text-white');

        const icon = document.createElement('i');
        icon.className = isSuccess ? 'fa fa-check-circle' : 'fa fa-exclamation-circle';
        notification.appendChild(icon);

        const text = document.createTextNode(message);
        notification.appendChild(text);

        setTimeout(() => {
            notification.classList.remove('translate-x-full');
        }, 10);

        setTimeout(() => {
            notification.classList.add('translate-x-full');
        }, 3000);
    }

    // 复制文本到剪贴板并显示提示
    // 优化后的复制文本到剪贴板函数（兼容云服务器环境）
    function copyToClipboard(elementId) {
        const textElement = document.getElementById(elementId);
        const text = textElement.textContent;

        // 方案1：尝试现代 Clipboard API（优先使用，支持 HTTPS）
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(text)
                .then(() => {
                    showNotification('复制成功！', true);
                })
                .catch(() => {
                    // 现代 API 失败，降级到方案2
                    fallbackCopy(textElement, text);
                });
        } else {
            // 非 HTTPS 环境直接使用方案2
            fallbackCopy(textElement, text);
        }
    }

    // 降级方案：使用 document.execCommand（兼容 HTTP/旧浏览器）
    function fallbackCopy(textElement, text) {
        // 创建临时文本区域（避免影响原有 DOM）
        const tempTextArea = document.createElement('textarea');
        tempTextArea.value = text;
        // 隐藏临时元素（避免页面闪烁）
        tempTextArea.style.position = 'absolute';
        tempTextArea.style.left = '-9999px';
        document.body.appendChild(tempTextArea);

        // 选中文本并执行复制
        tempTextArea.select();
        tempTextArea.setSelectionRange(0, text.length); // 适配移动设备

        try {
            const success = document.execCommand('copy');
            if (success) {
                showNotification('复制成功！', true);
            } else {
                throw new Error('执行复制命令失败');
            }
        } catch (err) {
            console.error('复制失败: ', err);
            showNotification('复制失败，请手动复制', false);
        } finally {
            // 移除临时元素
            document.body.removeChild(tempTextArea);
        }
    }
</script>
</body>
</html>