ERP/frontend/js/components/shipment-audit.js

Router.register('/shipments/audit', async () => {
  // 获取当前用户信息
  let userRole = null;
  try {
    const userRes = await fetch('/api/auth/me', { credentials: 'include' });
    const userData = await userRes.json();
    userRole = userData.role;
  } catch (e) {
    console.error('Failed to get user info:', e);
  }

  setTimeout(async () => {
    const queryTypeSelect = document.getElementById('query-type');
    const queryBtn = document.getElementById('query-btn');
    const queryInput = document.getElementById('query-input');
    const inputLabel = document.getElementById('input-label');
    const resultDiv = document.getElementById('query-result');
    const platformSelect = document.getElementById('platform-select');

    // 切换查询类型时更新输入框提示
    queryTypeSelect?.addEventListener('change', (e) => {
      const queryType = e.target.value;
      if (queryType === 'mac') {
        inputLabel.textContent = '输入 MAC 地址';
        queryInput.placeholder = '可输入带或不带冒号的MAC地址，如：001122AABBCC 或 00:11:22:AA:BB:CC';
      } else if (queryType === 'batch') {
        inputLabel.textContent = '输入批次号';
        queryInput.placeholder = '输入批次号';
      }
      resultDiv.innerHTML = '';
    });

    const performQuery = async () => {
      const queryType = queryTypeSelect?.value || 'mac';
      let queryValue = queryInput?.value?.trim();
      const platform = platformSelect?.value || 'pdd';
      
      if (!queryValue) {
        resultDiv.innerHTML = `<div class="error">请输入${queryType === 'mac' ? 'MAC 地址' : '批次号'}</div>`;
        return;
      }

      // 如果是MAC地址查询，自动格式化（添加冒号）
      if (queryType === 'mac') {
        // 移除所有非十六进制字符
        queryValue = queryValue.replace(/[^a-fA-F0-9]/g, '');
        
        // 如果是12位十六进制，自动格式化为 XX:XX:XX:XX:XX:XX
        if (queryValue.length === 12) {
          queryValue = queryValue.match(/.{2}/g).join(':').toUpperCase();
        }
        // 如果是其他长度，尝试格式化
        else if (queryValue.length > 0) {
          // 统一转为大写
          queryValue = queryValue.toUpperCase();
          // 如果已经包含冒号，保持原样
          if (!queryValue.includes(':')) {
            // 尝试每两个字符添加冒号
            queryValue = queryValue.match(/.{2}/g)?.join(':') || queryValue;
          }
        }
      }

      try {
        resultDiv.innerHTML = '<div>查询中...</div>';
        
        // 根据选择的平台查询审计数据
        const res = await fetch(`/api/audit/${platform}/search?${queryType}=${encodeURIComponent(queryValue)}`, {
          credentials: 'include'
        });
        
        const data = await res.json();
        
        if (data.found && data.records && data.records.length > 0) {
          const recordsHtml = data.records.map((record, index) => `
            <div style="padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;margin-bottom:8px">
              <div style="font-weight:600;margin-bottom:8px;color:var(--primary)">记录 ${index + 1}</div>
              <div class="result-item"><span class="label">MAC地址:</span> ${record.mac || '未知'}</div>
              <div class="result-item"><span class="label">批次号:</span> ${record.batch || '未知'}</div>
              <div class="result-item"><span class="label">审计时间:</span> ${record.ts_cn || '未知'}</div>
              <div class="result-item"><span class="label">备注:</span> ${record.note || '无'}</div>
            </div>
          `).join('');
          
          resultDiv.innerHTML = `
            <div class="result-card success">
              <div class="result-title">✓ 找到 ${data.records.length} 条审计记录</div>
              <div class="result-item"><span class="label">查询平台:</span> <span class="badge">${platform.toUpperCase()}</span></div>
              <div class="result-item"><span class="label">查询类型:</span> ${queryType === 'mac' ? 'MAC地址' : '批次号'}</div>
              <div class="result-item"><span class="label">查询值:</span> ${queryValue}</div>
              ${queryType === 'mac' && queryInput?.value?.trim() !== queryValue ? 
                `<div class="result-item"><span class="label">原始输入:</span> ${queryInput?.value?.trim()}</div>` : ''
              }
              <div style="margin-top:16px;max-height:60vh;overflow-y:auto;padding-right:8px;border:1px solid var(--border);border-radius:6px;background:var(--bg)">
                ${recordsHtml}
              </div>
            </div>
          `;
        } else {
          resultDiv.innerHTML = `
            <div class="result-card error">
              <div class="result-title">✗ 未找到审计记录</div>
              <div class="result-item">查询平台: ${platform.toUpperCase()}</div>
              <div class="result-item">查询类型: ${queryType === 'mac' ? 'MAC地址' : '批次号'}</div>
              <div class="result-item">查询值: ${queryValue}</div>
              ${queryType === 'mac' && queryInput?.value?.trim() !== queryValue ? 
                `<div class="result-item">原始输入: ${queryInput?.value?.trim()}</div>` : ''
              }
              <div class="result-item">${data.message || '该查询值没有对应的审计记录'}</div>
            </div>
          `;
        }
      } catch (e) {
        resultDiv.innerHTML = `<div class="error">查询失败：${e.message}</div>`;
      }
    };

    queryBtn?.addEventListener('click', performQuery);
    
    queryInput?.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        performQuery();
      }
    });
  }, 0);

  return `<div class="card">
    <div style="font-weight:600;margin-bottom:16px">审计查询</div>
    
    <div style="margin-bottom:16px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px">
      <div style="color:var(--text-2);font-size:14px">
        <strong>说明：</strong>查询 Redis 中存储的审计时间记录，支持通过 MAC 地址或批次号查询。
      </div>
    </div>

    <div style="margin-bottom:16px">
      <div class="field">
        <label>选择平台</label>
        <select id="platform-select" class="input">
          <option value="pdd">拼多多</option>
          <option value="yt">圆通</option>
          <option value="tx">兔喜</option>
          <option value="mt">美团</option>
        </select>
      </div>
      <div class="field">
        <label>查询类型</label>
        <select id="query-type" class="input">
          <option value="mac">按 MAC 地址查询</option>
          <option value="batch">按批次号查询</option>
        </select>
      </div>
      <div class="field">
        <label id="input-label">输入 MAC 地址</label>
        <input 
          id="query-input" 
          class="input" 
          placeholder="可输入带或不带冒号的MAC地址，如：001122AABBCC 或 00:11:22:AA:BB:CC" 
          style="font-family: monospace"
        />
      </div>
      <button class="btn btn-primary" id="query-btn">查询</button>
    </div>

    <div id="query-result"></div>
  </div>`;
});