<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>仓库操作计划 - Board</title>
  <style>
    /* 1. 全局重置：锁定大屏纯净背景 */
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: #f0f2f5 !important; /* 工业级浅灰背景 */
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      overflow: hidden; /* 大屏禁止出现滚动条 */
    }

    .shell {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 10px;
      box-sizing: border-box;
    }

    /* 2. 标题导航 */
    .cal-nav-row {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 10px;
      padding-left: 10px;
    }

    .cal-title {
      margin: 0;
      font-size: 24px;
      font-weight: bold;
      color: #000;
    }

    .cal-nav-btn {
      text-decoration: none;
      color: #1890ff;
      font-weight: bold;
      font-size: 20px;
      padding: 5px 15px;
      background: #fff;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
    }

    /* 3. 日历表格：纯白美化 */
    .cal-table-wrap {
      width: 100%;
      background: #fff !important;
      border-radius: 4px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }

    .cal-table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      background: #fff !important; /* 强制背景为白 */
    }

    thead th {
      background: #fafafa !important;
      color: #555;
      padding: 12px 0;
      font-size: 16px;
      border: 1px solid #f0f0f0;
    }

    .cal-cell {
      height: 13vh; /* 根据屏幕高度动态计算 */
      vertical-align: top;
      border: 1px solid #f0f0f0 !important;
      padding: 0 !important;
      background: #fff !important;
    }

    .cal-cell--today {
      background-color: #e6f7ff !important; /* 今日淡蓝提示 */
    }

    .cal-daynum {
      font-size: 14px;
      font-weight: bold;
      color: #999;
      padding: 4px 6px;
      display: block;
    }

    /* 4. 事件字段：极致单行显示 */
    .cal-plans {
      margin: 0;
      padding: 0 2px;
      list-style: none;
    }

    .cal-plan {
      margin-bottom: 2px;
      border-radius: 2px;
      padding: 2px 4px;
      display: block;
      overflow: hidden; /* 强制裁剪溢出 */
    }

    /* 状态颜色：大屏高对比色 */
    .cal-plan--active {
      background-color: #1890ff !important; /* 鲜艳蓝 */
      color: #fff !important;
    }

    .cal-plan--over {
      background-color: #52c41a !important; /* 鲜艳绿 */
      color: #fff !important;
    }

    .cal-plan-fields {
      display: flex;
      flex-wrap: nowrap; /* 绝对禁止换行 */
      align-items: center;
      font-size: 13px; /* 大屏字体稍大一点 */
      line-height: 1.2;
    }

    /* 每一个字段都不允许缩小，确保文字完整 */
    .cal-field {
      flex-shrink: 0; 
      margin-right: 8px; /* 字段间留一个空格距离 */
      white-space: nowrap;
    }

    .cal-event-text { font-weight: 900; }
    .cal-to-text { font-weight: 900; }
    .cal-note { font-weight: 400; opacity: 0.9; }

  </style>
</head>
<body class="page-home">
  <div class="shell">
    <div class="cal-nav-row">
      <a class="cal-nav-btn" href="<%= basePath %>/warehouse-calendar?year=<%= prevYear %>&month=<%= prevMonth %>">&lt;</a>
      <a class="cal-nav-btn" href="<%= basePath %>/warehouse-calendar?year=<%= nextYear %>&month=<%= nextMonth %>">&gt;</a>
      <h2 class="cal-title"><%= monthTitle %> 仓库操作计划看板</h2>
    </div>

    <div class="cal-table-wrap">
      <table class="cal-table">
        <thead>
          <tr>
            <% weekdayLabels.forEach(function (w) { %>
              <th><%= w %></th>
            <% }); %>
          </tr>
        </thead>
        <tbody>
          <% rows.forEach(function (row) { %>
            <tr>
              <% row.forEach(function (cell) { %>
                <td class="cal-cell<%= cell.isToday ? ' cal-cell--today' : '' %>">
                  <% if (cell.day !== null) { %>
                    <span class="cal-daynum"><%= cell.day %></span>
                    <ul class="cal-plans">
                      <% cell.plans.forEach(function (p) { %>
                        <% 
                           var st = p.event_status != null && String(p.event_status).trim() !== '' ? String(p.event_status).trim().toLowerCase() : ''; 
                           var isOver = (st === 'over') || (st === '' && typeof todayKey === 'string' && cell.dateKey < todayKey); 
                        %>
                        <li class="cal-plan<%= isOver ? ' cal-plan--over' : ' cal-plan--active' %>">
                          <div class="cal-plan-fields">
                            <span class="cal-field cal-event-text">
                              <%= (p.eventstr && p.eventstr.length > 5) ? p.eventstr.slice(-5) : p.eventstr %>
                            </span>
                            <% if (p.event_to) { %>
                              <span class="cal-field cal-to-text"><%= p.event_to.substring(0, 3) %></span>
                            <% } %>
                            <span class="cal-field cal-note">
                              <%= p.note_a || '' %> <%= p.note_b || '' %>
                            </span>
                          </div>
                        </li>                                
                      <% }); %>
                    </ul>
                  <% } %>
                </td>
              <% }); %>
            </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>