{{ define "dashboard.html" }}
<section>
  <h2>系统信息</h2>
  <div class="layui-row layui-col-space15" style="margin-top:12px">
    <!-- 系统信息面板 -->
    <div class="layui-col-md8">
      <div class="layui-panel">
        <div style="padding: 20px;">
          <h3 style="margin-top: 0; margin-bottom: 15px; font-weight: bold; border-bottom: 1px solid var(--lay-color-border-2); padding-bottom: 10px;">系统信息</h3>
          <table class="layui-table" lay-skin="nob">
            <tbody>
              <tr>
                <td style="width: 120px; font-weight: bold;">程序版本</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span class="layui-badge layui-bg-blue" style="font-size: 14px; padding: 2px 8px; line-height: 1.2;">v{{ .Version }}</span>
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">存储方案</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span class="layui-badge layui-bg-cyan" style="font-size: 14px; padding: 2px 8px; line-height: 1.2;">{{ .DBType }}</span>
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">开发模式</td>
                <td style="height: 20px; vertical-align: middle;">
                  {{ if .Mode }}
                    <span class="layui-badge layui-bg-orange" style="font-size: 14px; padding: 2px 8px; line-height: 1.2;">开启</span>
                  {{ else }}
                    <span class="layui-badge layui-bg-green" style="font-size: 14px; padding: 2px 8px; line-height: 1.2;">关闭</span>
                  {{ end }}
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">运行时长</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span id="uptime-display" class="layui-badge layui-bg-gray" style="font-size: 14px; padding: 2px 8px; line-height: 1.2;">{{ .Uptime }}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
    <!-- 应用统计面板 -->
    <div class="layui-col-md4">
      <div class="layui-panel">
        <div style="padding: 20px;">
          <h3 style="margin-top: 0; margin-bottom: 15px; font-weight: bold; border-bottom: 1px solid var(--lay-color-border-2); padding-bottom: 10px;">应用统计</h3>
          <table class="layui-table" lay-skin="nob">
            <tbody>
              <tr>
                <td style="width: 120px; font-weight: bold;">全部应用</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span id="total-apps" class="layui-badge" style="font-size: 14px; padding: 2px 8px; min-width: 30px; text-align: center; line-height: 1.2;">0</span>
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">启用应用</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span id="enabled-apps" class="layui-badge layui-bg-green" style="font-size: 14px; padding: 2px 8px; min-width: 30px; text-align: center; line-height: 1.2;">0</span>
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">禁用应用</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span id="disabled-apps" class="layui-badge layui-bg-orange" style="font-size: 14px; padding: 2px 8px; min-width: 30px; text-align: center; line-height: 1.2;">0</span>
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">变量数量</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span id="total-variables" class="layui-badge layui-bg-blue" style="font-size: 14px; padding: 2px 8px; min-width: 30px; text-align: center; line-height: 1.2;">0</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
  // 仪表盘统计脚本（采用箭头函数与中文注释）
  layui.use(['layer', 'util'], function () {
    const layer = layui.layer;
    const util = layui.util;
    const $ = layui.$;

    // 全局引用：ECharts CDN 地址
    const echartsCdn = 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js';

    // 工具函数：加载 ECharts 库（若已加载则直接回调）
    // 功能：通过全局的 loadScript 方法按需加载图表库，避免重复加载
    const ensureECharts = (cb) => {
      if (window.echarts) { cb && cb(); return; }
      if (typeof loadScript === 'function') {
        loadScript(echartsCdn, () => cb && cb());
      } else {
        // 兜底：直接插入 <script>
        const s = document.createElement('script');
        s.src = echartsCdn;
        s.onload = () => cb && cb();
        document.head.appendChild(s);
      }
    };

    // 函数：刷新基本信息和运行状态
    // 说明：请求后台获取最新的系统信息并更新页面显示
    const refreshSystemInfo = () => {
      $.get('/admin/api/system/info', (res) => {
        if (res && res.code === 0 && res.data) {
          const data = res.data;
          // 更新运行时长，保持徽章样式
          if (data.uptime) {
            const uptimeElement = $('#uptime-display');
            uptimeElement.text(data.uptime);
            // 确保徽章样式保持一致
            if (!uptimeElement.hasClass('layui-badge')) {
              uptimeElement.addClass('layui-badge layui-bg-gray');
              uptimeElement.css({
              'font-size': '14px',
              'padding': '2px 8px',
              'line-height': '1.2'
            });
            }
          }
        }
      }).fail(() => {
        console.log('获取系统信息失败');
      });
    };

    // 函数：刷新应用统计数据
    // 说明：请求后台获取应用统计信息并更新页面显示
    const refreshAppStats = () => {
      $.get('/admin/api/dashboard/stats', (res) => {
        if (res && res.code === 0 && res.data) {
          const data = res.data;
          $('#total-apps').text(data.total_apps || 0);
          $('#enabled-apps').text(data.enabled_apps || 0);
          $('#disabled-apps').text(data.disabled_apps || 0);
          $('#total-variables').text(data.total_variables || 0);
        }
      }).fail(() => {
        // 显示默认值
        $('#total-apps').text('0');
        $('#enabled-apps').text('0');
        $('#disabled-apps').text('0');
        $('#total-variables').text('0');
      });
    };

    // 立即刷新一次系统信息和应用统计
    refreshSystemInfo();
    refreshAppStats();
  });
</script>
{{ end }}