ERP/frontend/js/components/material-purchase.js

(() => {
  Router.register('/plan-mgmt/material-purchase', async () => {
    return `
      <div class="page-container">
        <div class="page-header">
          <div>
            <h2>物料清单-采购</h2>
            <span id="selection-info" class="selection-info" style="display: none;">已选择 0 项</span>
          </div>
          <div class="page-actions">
            <button class="btn btn-primary" onclick="MaterialPurchase.showAddDialog()">
              <span>➕</span> 新增物料需求
            </button>
            <button class="btn btn-secondary" onclick="MaterialPurchase.showImportDialog()" title="从Excel导入">
              <span>📥</span> 导入Excel
            </button>
            <button class="btn btn-secondary" onclick="MaterialPurchase.exportSelected()" title="导出选中项">
              <span>📤</span> 导出选中
            </button>
            <button class="btn btn-secondary" onclick="MaterialPurchase.exportData()">
              <span>📤</span> 全部导出
            </button>
            <button class="btn btn-danger" onclick="MaterialPurchase.deleteSelected()" title="删除选中项">
              <span>🗑️</span> 批量删除
            </button>
            <button class="btn btn-secondary" onclick="MaterialPurchase.showRecycleBin()" title="查看回收站">
              <span>♻️</span> 回收站
            </button>
          </div>
        </div>
        
        <div class="filter-section">
          <div class="filter-row">
            <input type="text" id="search-keyword" placeholder="搜索标题、编号、物料编码..." class="input-field" />
            <select id="filter-status" class="input-field">
              <option value="">全部状态</option>
              <option value="pending">待处理</option>
              <option value="processing">处理中</option>
              <option value="completed">已完成</option>
            </select>
            <select id="filter-demand-status" class="input-field">
              <option value="">全部需求状态</option>
              <option value="urgent">紧急</option>
              <option value="normal">正常</option>
              <option value="low">低优先级</option>
            </select>
            <button class="btn btn-primary" onclick="MaterialPurchase.search()">搜索</button>
            <button class="btn btn-secondary" onclick="MaterialPurchase.resetFilter()">重置</button>
          </div>
        </div>

        <div class="table-container" style="overflow-x: auto;">
          <table class="data-table" id="material-table">
            <thead>
              <tr>
                <th style="min-width: 50px; text-align: center;">
                  <label class="custom-checkbox"><input type="checkbox" id="select-all-checkbox" onchange="MaterialPurchase.toggleSelectAll(this)" /><span class="checkmark"></span></label>
                </th>
                <th style="min-width: 150px;">标题</th>
                <th style="min-width: 180px;">生产计划明细物料需求清单编号</th>
                <th style="min-width: 150px;">生产计划编号</th>
                <th style="min-width: 150px;">产品BOM分析结果</th>
                <th style="min-width: 100px;">状态</th>
                <th style="min-width: 120px;">需求状态</th>
                <th style="min-width: 120px;">物料齐套率</th>
                <th style="min-width: 120px;">物料编码</th>
                <th style="min-width: 150px;">物料名称</th>
                <th style="min-width: 120px;">物料批次号</th>
                <th style="min-width: 100px;">物料层级</th>
                <th style="min-width: 120px;">所需物料数</th>
                <th style="min-width: 140px;">库存现有物料数</th>
                <th style="min-width: 100px;">欠缺值</th>
                <th style="min-width: 140px;">物料获取方式</th>
                <th style="min-width: 120px;">实时库存值</th>
                <th style="min-width: 120px;">待入库数量</th>
                <th style="min-width: 120px;">派发数量</th>
                <th style="min-width: 120px;">入库数量</th>
                <th style="min-width: 100px;">提交人</th>
                <th style="min-width: 160px;">提交时间</th>
                <th style="min-width: 160px;">更新时间</th>
                <th style="min-width: 120px;">操作</th>
              </tr>
            </thead>
            <tbody id="material-tbody">
              <tr>
                <td colspan="24" style="text-align: center; padding: 40px;">
                  <div style="color: var(--text-2);">暂无数据</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="pagination" id="pagination">
          <button class="btn btn-secondary" onclick="MaterialPurchase.prevPage()" id="prev-btn" disabled>上一页</button>
          <span id="page-info">第 1 页 / 共 1 页</span>
          <button class="btn btn-secondary" onclick="MaterialPurchase.nextPage()" id="next-btn" disabled>下一页</button>
        </div>
      </div>

      <!-- 导出对话框 -->
      <div id="export-dialog" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 700px; max-height: 90vh; overflow-y: auto;">
          <div class="modal-header">
            <h3>选择导出字段</h3>
            <button class="modal-close" onclick="MaterialPurchase.closeExportDialog()">×</button>
          </div>
          <div class="modal-body">
            <div style="margin-bottom: 16px; display: flex; gap: 12px;">
              <button class="btn btn-secondary" onclick="MaterialPurchase.selectAllFields()">全选</button>
              <button class="btn btn-secondary" onclick="MaterialPurchase.deselectAllFields()">取消全选</button>
            </div>
            <div class="export-fields-grid">
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="title" data-label="标题" /><span class="field-checkmark"></span>
                <span>标题</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="listNo" data-label="生产计划明细物料需求清单编号" /><span class="field-checkmark"></span>
                <span>生产计划明细物料需求清单编号</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="planNo" data-label="生产计划编号" /><span class="field-checkmark"></span>
                <span>生产计划编号</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="bomResult" data-label="产品BOM分析结果" /><span class="field-checkmark"></span>
                <span>产品BOM分析结果</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="status" data-label="状态" /><span class="field-checkmark"></span>
                <span>状态</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="demandStatus" data-label="需求状态" /><span class="field-checkmark"></span>
                <span>需求状态</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="completeRate" data-label="物料齐套率" /><span class="field-checkmark"></span>
                <span>物料齐套率</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="materialCode" data-label="物料编码" /><span class="field-checkmark"></span>
                <span>物料编码</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="materialName" data-label="物料名称" /><span class="field-checkmark"></span>
                <span>物料名称</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="batchNo" data-label="物料批次号" /><span class="field-checkmark"></span>
                <span>物料批次号</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="level" data-label="物料层级" /><span class="field-checkmark"></span>
                <span>物料层级</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="requiredQty" data-label="所需物料数" /><span class="field-checkmark"></span>
                <span>所需物料数</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="stockQty" data-label="库存现有物料数" /><span class="field-checkmark"></span>
                <span>库存现有物料数</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="shortage" data-label="欠缺值" /><span class="field-checkmark"></span>
                <span>欠缺值</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="acquireMethod" data-label="物料获取方式" /><span class="field-checkmark"></span>
                <span>物料获取方式</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="realtimeStock" data-label="实时库存值" /><span class="field-checkmark"></span>
                <span>实时库存值</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="pendingQty" data-label="待入库数量" /><span class="field-checkmark"></span>
                <span>待入库数量</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="dispatchedQty" data-label="派发数量" /><span class="field-checkmark"></span>
                <span>派发数量</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="receivedQty" data-label="入库数量" /><span class="field-checkmark"></span>
                <span>入库数量</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="submitter" data-label="提交人" /><span class="field-checkmark"></span>
                <span>提交人</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="submitTime" data-label="提交时间" /><span class="field-checkmark"></span>
                <span>提交时间</span>
              </label>
              <label class="export-field-item">
                <input type="checkbox" class="export-field-checkbox" value="updateTime" data-label="更新时间" /><span class="field-checkmark"></span>
                <span>更新时间</span>
              </label>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" onclick="MaterialPurchase.closeExportDialog()">取消</button>
            <button class="btn btn-primary" onclick="MaterialPurchase.performExport()">
              <span>📤</span> 导出Excel
            </button>
          </div>
        </div>
      </div>

      <!-- 新增/编辑对话框 -->
      <div id="material-dialog" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 800px; max-height: 90vh; overflow-y: auto;">
          <div class="modal-header">
            <h3 id="dialog-title">新增物料需求</h3>
            <button class="modal-close" onclick="MaterialPurchase.closeDialog()">×</button>
          </div>
          <div class="modal-body">
            <form id="material-form">
              <div class="form-grid">
                <div class="form-group">
                  <label>标题 <span class="required">*</span></label>
                  <input type="text" id="form-title" class="input-field" required />
                </div>
                <div class="form-group">
                  <label>生产计划明细物料需求清单编号 <span class="required">*</span></label>
                  <input type="text" id="form-list-no" class="input-field" required />
                </div>
                <div class="form-group">
                  <label>生产计划编号 <span class="required">*</span></label>
                  <input type="text" id="form-plan-no" class="input-field" required />
                </div>
                <div class="form-group">
                  <label>产品BOM分析结果</label>
                  <input type="text" id="form-bom-result" class="input-field" />
                </div>
                <div class="form-group">
                  <label>状态 <span class="required">*</span></label>
                  <select id="form-status" class="input-field" required>
                    <option value="pending">待处理</option>
                    <option value="processing">处理中</option>
                    <option value="completed">已完成</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>需求状态 <span class="required">*</span></label>
                  <select id="form-demand-status" class="input-field" required>
                    <option value="urgent">紧急</option>
                    <option value="normal">正常</option>
                    <option value="low">低优先级</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>物料齐套率 (%)</label>
                  <input type="number" id="form-complete-rate" class="input-field" min="0" max="100" step="0.01" />
                </div>
                <div class="form-group">
                  <label>物料编码 <span class="required">*</span></label>
                  <input type="text" id="form-material-code" class="input-field" required />
                </div>
                <div class="form-group">
                  <label>物料名称 <span class="required">*</span></label>
                  <input type="text" id="form-material-name" class="input-field" required />
                </div>
                <div class="form-group">
                  <label>物料批次号</label>
                  <input type="text" id="form-batch-no" class="input-field" />
                </div>
                <div class="form-group">
                  <label>物料层级</label>
                  <input type="number" id="form-level" class="input-field" min="1" />
                </div>
                <div class="form-group">
                  <label>所需物料数 <span class="required">*</span></label>
                  <input type="number" id="form-required-qty" class="input-field" min="0" required />
                </div>
                <div class="form-group">
                  <label>库存现有物料数</label>
                  <input type="number" id="form-stock-qty" class="input-field" min="0" />
                </div>
                <div class="form-group">
                  <label>欠缺值</label>
                  <input type="number" id="form-shortage" class="input-field" readonly />
                </div>
                <div class="form-group">
                  <label>物料获取方式</label>
                  <select id="form-acquire-method" class="input-field">
                    <option value="">请选择</option>
                    <option value="purchase">采购</option>
                    <option value="production">生产</option>
                    <option value="transfer">调拨</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>实时库存值</label>
                  <input type="number" id="form-realtime-stock" class="input-field" min="0" />
                </div>
                <div class="form-group">
                  <label>待入库数量</label>
                  <input type="number" id="form-pending-qty" class="input-field" min="0" />
                </div>
                <div class="form-group">
                  <label>派发数量</label>
                  <input type="number" id="form-dispatched-qty" class="input-field" min="0" />
                </div>
                <div class="form-group">
                  <label>入库数量</label>
                  <input type="number" id="form-received-qty" class="input-field" min="0" />
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" onclick="MaterialPurchase.closeDialog()">取消</button>
            <button class="btn btn-primary" onclick="MaterialPurchase.saveData()">保存</button>
          </div>
        </div>
      </div>

      <!-- 回收站对话框 -->
      <div id="recycle-bin-dialog" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 1200px; max-height: 90vh; overflow-y: auto;">
          <div class="modal-header">
            <h3>🗑️ 回收站</h3>
            <button class="modal-close" onclick="MaterialPurchase.closeRecycleBin()">×</button>
          </div>
          <div class="modal-body">
            <div style="margin-bottom: 16px; padding: 12px; background: rgba(245, 158, 11, 0.1); border-left: 3px solid #f59e0b; border-radius: 6px; color: var(--text-2); font-size: 13px;">
              <strong>提示：</strong>回收站中的数据将保留30天，过期后将自动永久删除
            </div>
            <div class="table-container" style="overflow-x: auto; max-height: 500px;">
              <table class="data-table">
                <thead>
                  <tr>
                    <th style="min-width: 150px;">标题</th>
                    <th style="min-width: 180px;">物料需求清单编号</th>
                    <th style="min-width: 120px;">物料编码</th>
                    <th style="min-width: 150px;">物料名称</th>
                    <th style="min-width: 160px;">删除时间</th>
                    <th style="min-width: 120px;">操作</th>
                  </tr>
                </thead>
                <tbody id="recycle-bin-tbody">
                  <tr>
                    <td colspan="6" style="text-align: center; padding: 40px;">
                      <div style="color: var(--text-2);">回收站为空</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-danger" onclick="MaterialPurchase.emptyRecycleBin()">
              <span>🗑️</span> 清空回收站
            </button>
            <button class="btn btn-secondary" onclick="MaterialPurchase.closeRecycleBin()">关闭</button>
          </div>
        </div>
      </div>

      <!-- 导入对话框 -->
      <div id="import-dialog" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 600px;">
          <div class="modal-header">
            <h3>📥 从Excel导入物料清单</h3>
            <button class="modal-close" onclick="MaterialPurchase.closeImportDialog()">×</button>
          </div>
          <div class="modal-body">
            <div style="margin-bottom: 16px; padding: 12px; background: rgba(79, 140, 255, 0.1); border-left: 3px solid var(--primary); border-radius: 6px; color: var(--text-2); font-size: 13px;">
              <strong>Excel文件要求：</strong><br/>
              • 必须包含以下列：标题、生产计划明细物料需求清单编号、生产计划编号、状态、需求状态、物料编码、物料名称、所需物料数<br/>
              • 可选列：产品BOM分析结果、物料齐套率、物料批次号、物料层级、库存现有物料数、欠缺值、物料获取方式、实时库存值、待入库数量、派发数量、入库数量<br/>
              • 第一行必须是表头
            </div>
            
            <div class="form-group">
              <label>选择Excel文件</label>
              <input type="file" id="import-file-input" accept=".xlsx,.xls" class="input-field" />
            </div>
            
            <div id="import-status" style="margin-top: 16px; padding: 12px; border-radius: 6px; display: none;"></div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" onclick="MaterialPurchase.closeImportDialog()">取消</button>
            <button class="btn btn-primary" onclick="MaterialPurchase.validateImportFile()">
              <span>✓</span> 验证文件
            </button>
            <button class="btn btn-primary" id="import-confirm-btn" onclick="MaterialPurchase.confirmImport()" style="display: none;">
              <span>📥</span> 确认导入
            </button>
          </div>
        </div>
      </div>
    `;
  });

  window.MaterialPurchase = {
    currentPage: 1,
    pageSize: 20,
    totalPages: 1,
    data: [],
    editingId: null,
    selectedIds: new Set(),
    recycleBin: [],

    init() {
      this.loadFromStorage();
      this.loadData();
      this.bindEvents();
    },

    // 从 localStorage 加载数据
    loadFromStorage() {
      try {
        const savedData = localStorage.getItem('materialPurchaseData');
        const savedRecycleBin = localStorage.getItem('materialPurchaseRecycleBin');
        
        if (savedData) {
          this.data = JSON.parse(savedData);
        }
        if (savedRecycleBin) {
          this.recycleBin = JSON.parse(savedRecycleBin);
        }
      } catch (error) {
        console.error('加载本地数据失败:', error);
      }
    },

    // 保存到 localStorage
    saveToStorage() {
      try {
        localStorage.setItem('materialPurchaseData', JSON.stringify(this.data));
        localStorage.setItem('materialPurchaseRecycleBin', JSON.stringify(this.recycleBin));
      } catch (error) {
        console.error('保存本地数据失败:', error);
      }
    },

    bindEvents() {
      // 自动计算欠缺值
      const requiredQty = document.getElementById('form-required-qty');
      const stockQty = document.getElementById('form-stock-qty');
      const shortage = document.getElementById('form-shortage');
      
      const calculateShortage = () => {
        const required = parseFloat(requiredQty?.value || 0);
        const stock = parseFloat(stockQty?.value || 0);
        if (shortage) {
          shortage.value = Math.max(0, required - stock);
        }
      };
      
      requiredQty?.addEventListener('input', calculateShortage);
      stockQty?.addEventListener('input', calculateShortage);
    },

    async loadData() {
      try {
        const response = await fetch('/api/material-purchase/list', {
          credentials: 'include'
        });
        const result = await response.json();
        this.data = result.list || [];
        
        // 加载回收站数据
        const recycleBinResponse = await fetch('/api/material-purchase/recycle-bin', {
          credentials: 'include'
        });
        const recycleBinResult = await recycleBinResponse.json();
        this.recycleBin = recycleBinResult.list || [];
        
        this.renderTable();
        this.updatePagination();
      } catch (error) {
        API.toast('加载数据失败: ' + error.message, 'error');
      }
    },

    generateMockData() {
      // 生成模拟数据
      const mockData = [];
      for (let i = 1; i <= 5; i++) {
        mockData.push({
          id: i,
          title: `物料需求计划-${i}`,
          listNo: `MRL-2024-${String(i).padStart(4, '0')}`,
          planNo: `PLAN-2024-${String(i).padStart(4, '0')}`,
          bomResult: `BOM分析-${i}`,
          status: ['pending', 'processing', 'completed'][i % 3],
          demandStatus: ['urgent', 'normal', 'low'][i % 3],
          completeRate: (Math.random() * 100).toFixed(2),
          materialCode: `MAT-${String(i).padStart(5, '0')}`,
          materialName: `物料名称-${i}`,
          batchNo: `BATCH-${String(i).padStart(4, '0')}`,
          level: Math.floor(Math.random() * 3) + 1,
          requiredQty: Math.floor(Math.random() * 1000) + 100,
          stockQty: Math.floor(Math.random() * 500),
          shortage: 0,
          acquireMethod: ['purchase', 'production', 'transfer'][i % 3],
          realtimeStock: Math.floor(Math.random() * 500),
          pendingQty: Math.floor(Math.random() * 200),
          dispatchedQty: Math.floor(Math.random() * 100),
          receivedQty: Math.floor(Math.random() * 150),
          submitter: `用户${i}`,
          submitTime: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString(),
          updateTime: new Date().toISOString()
        });
        mockData[i - 1].shortage = Math.max(0, mockData[i - 1].requiredQty - mockData[i - 1].stockQty);
      }
      return mockData;
    },

    renderTable() {
      const tbody = document.getElementById('material-tbody');
      if (!tbody) return;

      if (this.data.length === 0) {
        tbody.innerHTML = `
          <tr>
            <td colspan="24" style="text-align: center; padding: 40px;">
              <div style="color: var(--text-2);">暂无数据</div>
            </td>
          </tr>
        `;
        return;
      }

      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      const pageData = this.data.slice(start, end);

      tbody.innerHTML = pageData.map(item => `
        <tr>
          <td style="text-align: center;">
            <label class="custom-checkbox"><input type="checkbox" class="row-checkbox" value="${item.id}" 
              ${this.selectedIds.has(item.id) ? 'checked' : ''} 
              onchange="MaterialPurchase.toggleRowSelection(${item.id}, this.checked)" /><span class="checkmark"></span></label>
          </td>
          <td>${this.escapeHtml(item.title)}</td>
          <td>${this.escapeHtml(item.listNo)}</td>
          <td>${this.escapeHtml(item.planNo)}</td>
          <td>${this.escapeHtml(item.bomResult)}</td>
          <td><span class="badge badge-${this.getStatusClass(item.status)}">${this.getStatusText(item.status)}</span></td>
          <td><span class="badge badge-${this.getDemandStatusClass(item.demandStatus)}">${this.getDemandStatusText(item.demandStatus)}</span></td>
          <td>${item.completeRate}%</td>
          <td>${this.escapeHtml(item.materialCode)}</td>
          <td>${this.escapeHtml(item.materialName)}</td>
          <td>${this.escapeHtml(item.batchNo)}</td>
          <td>${item.level}</td>
          <td>${item.requiredQty}</td>
          <td>${item.stockQty}</td>
          <td>${item.shortage}</td>
          <td>${this.getAcquireMethodText(item.acquireMethod)}</td>
          <td>${item.realtimeStock}</td>
          <td>${item.pendingQty}</td>
          <td>${item.dispatchedQty}</td>
          <td>${item.receivedQty}</td>
          <td>${this.escapeHtml(item.submitter)}</td>
          <td>${this.formatDateTime(item.submitTime)}</td>
          <td>${this.formatDateTime(item.updateTime)}</td>
          <td>
            <button class="btn-icon" onclick="MaterialPurchase.editItem(${item.id})" title="编辑">✏️</button>
            <button class="btn-icon" onclick="MaterialPurchase.deleteItem(${item.id})" title="删除">🗑️</button>
          </td>
        </tr>
      `).join('');
      
      // 更新全选框状态
      this.updateSelectAllCheckbox();
    },

    updatePagination() {
      this.totalPages = Math.ceil(this.data.length / this.pageSize);
      const pageInfo = document.getElementById('page-info');
      const prevBtn = document.getElementById('prev-btn');
      const nextBtn = document.getElementById('next-btn');

      if (pageInfo) {
        pageInfo.textContent = `第 ${this.currentPage} 页 / 共 ${this.totalPages} 页`;
      }
      if (prevBtn) {
        prevBtn.disabled = this.currentPage === 1;
      }
      if (nextBtn) {
        nextBtn.disabled = this.currentPage === this.totalPages || this.totalPages === 0;
      }
    },

    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.renderTable();
        this.updatePagination();
      }
    },

    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.renderTable();
        this.updatePagination();
      }
    },

    search() {
      const keyword = document.getElementById('search-keyword')?.value.toLowerCase() || '';
      const status = document.getElementById('filter-status')?.value || '';
      const demandStatus = document.getElementById('filter-demand-status')?.value || '';

      this.data = this.generateMockData().filter(item => {
        const matchKeyword = !keyword || 
          item.title.toLowerCase().includes(keyword) ||
          item.listNo.toLowerCase().includes(keyword) ||
          item.planNo.toLowerCase().includes(keyword) ||
          item.materialCode.toLowerCase().includes(keyword);
        
        const matchStatus = !status || item.status === status;
        const matchDemandStatus = !demandStatus || item.demandStatus === demandStatus;

        return matchKeyword && matchStatus && matchDemandStatus;
      });

      this.currentPage = 1;
      this.renderTable();
      this.updatePagination();
    },

    resetFilter() {
      document.getElementById('search-keyword').value = '';
      document.getElementById('filter-status').value = '';
      document.getElementById('filter-demand-status').value = '';
      this.loadData();
    },

    showAddDialog() {
      this.editingId = null;
      document.getElementById('dialog-title').textContent = '新增物料需求';
      document.getElementById('material-form').reset();
      document.getElementById('material-dialog').style.display = 'flex';
    },

    editItem(id) {
      this.editingId = id;
      const item = this.data.find(d => d.id === id);
      if (!item) return;

      document.getElementById('dialog-title').textContent = '编辑物料需求';
      document.getElementById('form-title').value = item.title;
      document.getElementById('form-list-no').value = item.listNo;
      document.getElementById('form-plan-no').value = item.planNo;
      document.getElementById('form-bom-result').value = item.bomResult;
      document.getElementById('form-status').value = item.status;
      document.getElementById('form-demand-status').value = item.demandStatus;
      document.getElementById('form-complete-rate').value = item.completeRate;
      document.getElementById('form-material-code').value = item.materialCode;
      document.getElementById('form-material-name').value = item.materialName;
      document.getElementById('form-batch-no').value = item.batchNo;
      document.getElementById('form-level').value = item.level;
      document.getElementById('form-required-qty').value = item.requiredQty;
      document.getElementById('form-stock-qty').value = item.stockQty;
      document.getElementById('form-shortage').value = item.shortage;
      document.getElementById('form-acquire-method').value = item.acquireMethod;
      document.getElementById('form-realtime-stock').value = item.realtimeStock;
      document.getElementById('form-pending-qty').value = item.pendingQty;
      document.getElementById('form-dispatched-qty').value = item.dispatchedQty;
      document.getElementById('form-received-qty').value = item.receivedQty;

      document.getElementById('material-dialog').style.display = 'flex';
    },

    closeDialog() {
      document.getElementById('material-dialog').style.display = 'none';
      this.editingId = null;
    },

    async saveData() {
      const form = document.getElementById('material-form');
      if (!form.checkValidity()) {
        form.reportValidity();
        return;
      }

      const data = {
        title: document.getElementById('form-title').value,
        list_no: document.getElementById('form-list-no').value,
        plan_no: document.getElementById('form-plan-no').value,
        bom_result: document.getElementById('form-bom-result').value,
        status: document.getElementById('form-status').value,
        demand_status: document.getElementById('form-demand-status').value,
        complete_rate: parseFloat(document.getElementById('form-complete-rate').value) || 0,
        material_code: document.getElementById('form-material-code').value,
        material_name: document.getElementById('form-material-name').value,
        batch_no: document.getElementById('form-batch-no').value,
        level: parseInt(document.getElementById('form-level').value) || 1,
        required_qty: parseInt(document.getElementById('form-required-qty').value) || 0,
        stock_qty: parseInt(document.getElementById('form-stock-qty').value) || 0,
        shortage: parseInt(document.getElementById('form-shortage').value) || 0,
        acquire_method: document.getElementById('form-acquire-method').value,
        realtime_stock: parseInt(document.getElementById('form-realtime-stock').value) || 0,
        pending_qty: parseInt(document.getElementById('form-pending-qty').value) || 0,
        dispatched_qty: parseInt(document.getElementById('form-dispatched-qty').value) || 0,
        received_qty: parseInt(document.getElementById('form-received-qty').value) || 0
      };

      try {
        const url = this.editingId ? '/api/material-purchase/update' : '/api/material-purchase/add';
        if (this.editingId) {
          data.id = this.editingId;
        }

        const response = await fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'include',
          body: JSON.stringify(data)
        });

        const result = await response.json();
        if (result.ok) {
          API.toast(this.editingId ? '更新成功' : '添加成功', 'success');
          this.closeDialog();
          await this.loadData();
        } else {
          API.toast(result.error || '保存失败', 'error');
        }
      } catch (error) {
        API.toast('保存失败: ' + error.message, 'error');
      }
    },

    async deleteItem(id) {
      if (!confirm('确定要删除这条记录吗？\n\n删除的数据将移至回收站，可在回收站中找回。')) return;
      
      try {
        const response = await fetch('/api/material-purchase/delete', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'include',
          body: JSON.stringify({ ids: [id] })
        });

        const result = await response.json();
        if (result.ok) {
          API.toast('已删除，可在回收站中找回', 'success');
          await this.loadData();
        } else {
          API.toast(result.error || '删除失败', 'error');
        }
      } catch (error) {
        API.toast('删除失败: ' + error.message, 'error');
      }
    },

    exportData() {
      this.showExportDialog();
    },

    showExportDialog() {
      const dialog = document.getElementById('export-dialog');
      if (dialog) {
        dialog.style.display = 'flex';
        // 默认全选
        document.querySelectorAll('.export-field-checkbox').forEach(cb => {
          cb.checked = true;
        });
      }
    },

    closeExportDialog() {
      const dialog = document.getElementById('export-dialog');
      if (dialog) {
        dialog.style.display = 'none';
      }
    },

    async performExport() {
      // 获取选中的字段
      const selectedFields = [];
      document.querySelectorAll('.export-field-checkbox:checked').forEach(cb => {
        selectedFields.push({
          key: cb.value,
          label: cb.dataset.label
        });
      });

      if (selectedFields.length === 0) {
        API.toast('请至少选择一个导出字段', 'warning');
        return;
      }

      try {
        // 动态加载 SheetJS 库
        if (!window.XLSX) {
          API.toast('正在加载导出库...', 'info');
          await this.loadSheetJS();
        }

        // 准备导出数据
        const exportData = this.data.map(item => {
          const row = {};
          selectedFields.forEach(field => {
            let value = item[field.key];
            
            // 格式化特殊字段
            if (field.key === 'status') {
              value = this.getStatusText(value);
            } else if (field.key === 'demandStatus') {
              value = this.getDemandStatusText(value);
            } else if (field.key === 'acquireMethod') {
              value = this.getAcquireMethodText(value);
            } else if (field.key === 'submitTime' || field.key === 'updateTime') {
              value = this.formatDateTime(value);
            } else if (field.key === 'completeRate') {
              value = value + '%';
            }
            
            row[field.label] = value || '';
          });
          return row;
        });

        // 创建工作簿
        const ws = window.XLSX.utils.json_to_sheet(exportData);
        const wb = window.XLSX.utils.book_new();
        window.XLSX.utils.book_append_sheet(wb, ws, '物料清单');

        // 设置列宽
        const colWidths = selectedFields.map(field => {
          let width = 15;
          if (field.key === 'listNo' || field.key === 'planNo') width = 20;
          if (field.key === 'title' || field.key === 'materialName') width = 25;
          if (field.key === 'submitTime' || field.key === 'updateTime') width = 20;
          return { wch: width };
        });
        ws['!cols'] = colWidths;

        // 生成文件名
        const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
        const filename = `物料清单-采购_${timestamp}.xlsx`;

        // 导出文件
        window.XLSX.writeFile(wb, filename);

        API.toast('导出成功！', 'success');
        this.closeExportDialog();
      } catch (error) {
        console.error('导出失败:', error);
        API.toast('导出失败: ' + error.message, 'error');
      }
    },

    async loadSheetJS() {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js';
        script.onload = resolve;
        script.onerror = () => reject(new Error('加载导出库失败'));
        document.head.appendChild(script);
      });
    },

    selectAllFields() {
      document.querySelectorAll('.export-field-checkbox').forEach(cb => {
        cb.checked = true;
      });
    },

    deselectAllFields() {
      document.querySelectorAll('.export-field-checkbox').forEach(cb => {
        cb.checked = false;
      });
    },

    toggleRowSelection(id, checked) {
      if (checked) {
        this.selectedIds.add(id);
      } else {
        this.selectedIds.delete(id);
      }
      this.updateSelectAllCheckbox();
      this.updateSelectionInfo();
    },

    toggleSelectAll(checkbox) {
      const checkboxes = document.querySelectorAll('.row-checkbox');
      checkboxes.forEach(cb => {
        const id = parseInt(cb.value);
        cb.checked = checkbox.checked;
        if (checkbox.checked) {
          this.selectedIds.add(id);
        } else {
          this.selectedIds.delete(id);
        }
      });
      this.updateSelectionInfo();
    },

    updateSelectAllCheckbox() {
      const selectAllCheckbox = document.getElementById('select-all-checkbox');
      const checkboxes = document.querySelectorAll('.row-checkbox');
      const checkedCount = document.querySelectorAll('.row-checkbox:checked').length;
      
      if (selectAllCheckbox) {
        selectAllCheckbox.checked = checkboxes.length > 0 && checkedCount === checkboxes.length;
        selectAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
      }
    },

    updateSelectionInfo() {
      const count = this.selectedIds.size;
      const infoEl = document.getElementById('selection-info');
      if (infoEl) {
        if (count > 0) {
          infoEl.textContent = `已选择 ${count} 项`;
          infoEl.style.display = 'inline-block';
        } else {
          infoEl.style.display = 'none';
        }
      }
    },

    clearSelection() {
      this.selectedIds.clear();
      document.querySelectorAll('.row-checkbox').forEach(cb => {
        cb.checked = false;
      });
      const selectAllCheckbox = document.getElementById('select-all-checkbox');
      if (selectAllCheckbox) {
        selectAllCheckbox.checked = false;
        selectAllCheckbox.indeterminate = false;
      }
      this.updateSelectionInfo();
    },

    async deleteSelected() {
      if (this.selectedIds.size === 0) {
        API.toast('请先选择要删除的项', 'warning');
        return;
      }

      if (!confirm(`确定要删除选中的 ${this.selectedIds.size} 项吗？\n\n删除的数据将移至回收站，可在回收站中找回。`)) {
        return;
      }

      try {
        const ids = Array.from(this.selectedIds);
        const response = await fetch('/api/material-purchase/delete', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'include',
          body: JSON.stringify({ ids })
        });

        const result = await response.json();
        if (result.ok) {
          API.toast(`已删除 ${result.count} 项，可在回收站中找回`, 'success');
          this.selectedIds.clear();
          await this.loadData();
          this.updateSelectionInfo();
        } else {
          API.toast(result.error || '删除失败', 'error');
        }
      } catch (error) {
        API.toast('删除失败: ' + error.message, 'error');
      }
    },

    exportSelected() {
      if (this.selectedIds.size === 0) {
        API.toast('请先选择要导出的项', 'warning');
        return;
      }

      // 临时保存原始数据
      const originalData = this.data;
      // 只导出选中的数据
      this.data = this.data.filter(item => this.selectedIds.has(item.id));
      
      // 显示导出对话框
      this.showExportDialog();
      
      // 恢复原始数据
      setTimeout(() => {
        this.data = originalData;
      }, 100);
    },

    getStatusClass(status) {
      const map = {
        pending: 'warning',
        processing: 'info',
        completed: 'success'
      };
      return map[status] || 'default';
    },

    getStatusText(status) {
      const map = {
        pending: '待处理',
        processing: '处理中',
        completed: '已完成'
      };
      return map[status] || status;
    },

    getDemandStatusClass(status) {
      const map = {
        urgent: 'danger',
        normal: 'info',
        low: 'default'
      };
      return map[status] || 'default';
    },

    getDemandStatusText(status) {
      const map = {
        urgent: '紧急',
        normal: '正常',
        low: '低优先级'
      };
      return map[status] || status;
    },

    getAcquireMethodText(method) {
      if (!method) return '-';
      
      const map = {
        purchase: '采购',
        production: '生产',
        transfer: '调拨',
        // 支持中文输入
        '采购': '采购',
        '生产': '生产',
        '调拨': '调拨'
      };
      return map[method] || method || '-';
    },

    formatDateTime(dateStr) {
      if (!dateStr) return '-';
      const date = new Date(dateStr);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },

    escapeHtml(text) {
      if (!text) return '';
      const div = document.createElement('div');
      div.textContent = text;
      return div.innerHTML;
    },

    // 回收站相关功能
    showRecycleBin() {
      const dialog = document.getElementById('recycle-bin-dialog');
      if (dialog) {
        this.renderRecycleBin();
        dialog.style.display = 'flex';
      }
    },

    closeRecycleBin() {
      const dialog = document.getElementById('recycle-bin-dialog');
      if (dialog) {
        dialog.style.display = 'none';
      }
    },

    renderRecycleBin() {
      const tbody = document.getElementById('recycle-bin-tbody');
      if (!tbody) return;

      if (this.recycleBin.length === 0) {
        tbody.innerHTML = `
          <tr>
            <td colspan="6" style="text-align: center; padding: 40px;">
              <div style="color: var(--text-2);">回收站为空</div>
            </td>
          </tr>
        `;
        return;
      }

      tbody.innerHTML = this.recycleBin.map(item => `
        <tr>
          <td>${this.escapeHtml(item.title)}</td>
          <td>${this.escapeHtml(item.listNo)}</td>
          <td>${this.escapeHtml(item.materialCode)}</td>
          <td>${this.escapeHtml(item.materialName)}</td>
          <td>${this.formatDateTime(item.deletedAt)}</td>
          <td>
            <button class="btn-icon" onclick="MaterialPurchase.restoreItem(${item.id})" title="恢复">
              ♻️
            </button>
            <button class="btn-icon" onclick="MaterialPurchase.permanentDelete(${item.id})" title="永久删除">
              ❌
            </button>
          </td>
        </tr>
      `).join('');
    },

    async restoreItem(id) {
      try {
        const response = await fetch('/api/material-purchase/restore', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'include',
          body: JSON.stringify({ id })
        });

        const result = await response.json();
        if (result.ok) {
          API.toast('恢复成功', 'success');
          await this.loadData();
          this.renderRecycleBin();
        } else {
          API.toast(result.error || '恢复失败', 'error');
        }
      } catch (error) {
        API.toast('恢复失败: ' + error.message, 'error');
      }
    },

    async permanentDelete(id) {
      if (!confirm('确定要永久删除这条记录吗？此操作不可恢复！')) {
        return;
      }

      try {
        const response = await fetch('/api/material-purchase/permanent-delete', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'include',
          body: JSON.stringify({ id })
        });

        const result = await response.json();
        if (result.ok) {
          API.toast('已永久删除', 'success');
          await this.loadData();
          this.renderRecycleBin();
        } else {
          API.toast(result.error || '删除失败', 'error');
        }
      } catch (error) {
        API.toast('删除失败: ' + error.message, 'error');
      }
    },

    async emptyRecycleBin() {
      if (this.recycleBin.length === 0) {
        API.toast('回收站已经是空的', 'info');
        return;
      }

      if (!confirm(`确定要清空回收站吗？这将永久删除 ${this.recycleBin.length} 项数据，此操作不可恢复！`)) {
        return;
      }

      try {
        const response = await fetch('/api/material-purchase/empty-recycle-bin', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          credentials: 'include'
        });

        const result = await response.json();
        if (result.ok) {
          API.toast(`回收站已清空，删除了 ${result.count} 项`, 'success');
          await this.loadData();
          this.renderRecycleBin();
        } else {
          API.toast(result.error || '清空失败', 'error');
        }
      } catch (error) {
        API.toast('清空失败: ' + error.message, 'error');
      }
    },

    // 导入相关功能
    showImportDialog() {
      const dialog = document.getElementById('import-dialog');
      if (dialog) {
        // 重置状态
        document.getElementById('import-file-input').value = '';
        document.getElementById('import-status').style.display = 'none';
        document.getElementById('import-confirm-btn').style.display = 'none';
        dialog.style.display = 'flex';
      }
    },

    closeImportDialog() {
      const dialog = document.getElementById('import-dialog');
      if (dialog) {
        dialog.style.display = 'none';
      }
    },

    async validateImportFile() {
      const fileInput = document.getElementById('import-file-input');
      const file = fileInput.files[0];
      
      if (!file) {
        API.toast('请选择要导入的文件', 'warning');
        return;
      }

      const statusEl = document.getElementById('import-status');
      const confirmBtn = document.getElementById('import-confirm-btn');
      
      statusEl.style.display = 'block';
      statusEl.style.background = 'rgba(79, 140, 255, 0.1)';
      statusEl.style.color = 'var(--primary)';
      statusEl.textContent = '正在验证文件...';
      confirmBtn.style.display = 'none';

      try {
        const formData = new FormData();
        formData.append('file', file);

        const response = await fetch('/api/validate/material-purchase-file', {
          method: 'POST',
          credentials: 'include',
          body: formData
        });

        const result = await response.json();
        
        if (result.valid) {
          statusEl.style.background = 'rgba(34, 197, 94, 0.1)';
          statusEl.style.color = '#22c55e';
          statusEl.textContent = '✓ ' + result.message;
          confirmBtn.style.display = 'inline-block';
        } else {
          statusEl.style.background = 'rgba(239, 68, 68, 0.1)';
          statusEl.style.color = '#ef4444';
          statusEl.textContent = '✗ ' + result.message;
          confirmBtn.style.display = 'none';
        }
      } catch (error) {
        statusEl.style.background = 'rgba(239, 68, 68, 0.1)';
        statusEl.style.color = '#ef4444';
        statusEl.textContent = '✗ 验证失败: ' + error.message;
        confirmBtn.style.display = 'none';
      }
    },

    async confirmImport() {
      const fileInput = document.getElementById('import-file-input');
      const file = fileInput.files[0];
      
      if (!file) {
        API.toast('请选择要导入的文件', 'warning');
        return;
      }

      const statusEl = document.getElementById('import-status');
      const confirmBtn = document.getElementById('import-confirm-btn');
      
      statusEl.style.display = 'block';
      statusEl.style.background = 'rgba(79, 140, 255, 0.1)';
      statusEl.style.color = 'var(--primary)';
      statusEl.textContent = '正在导入数据...';
      confirmBtn.disabled = true;

      try {
        const formData = new FormData();
        formData.append('file', file);

        const response = await fetch('/api/upload/material-purchase-file', {
          method: 'POST',
          credentials: 'include',
          body: formData
        });

        const result = await response.json();
        
        if (result.ok) {
          statusEl.style.background = 'rgba(34, 197, 94, 0.1)';
          statusEl.style.color = '#22c55e';
          statusEl.textContent = '✓ ' + result.message;
          
          API.toast(`成功导入 ${result.count} 条数据`, 'success');
          
          // 延迟关闭对话框并刷新数据
          setTimeout(async () => {
            this.closeImportDialog();
            await this.loadData();
          }, 1500);
        } else {
          statusEl.style.background = 'rgba(239, 68, 68, 0.1)';
          statusEl.style.color = '#ef4444';
          statusEl.textContent = '✗ ' + (result.error || '导入失败');
          confirmBtn.disabled = false;
        }
      } catch (error) {
        statusEl.style.background = 'rgba(239, 68, 68, 0.1)';
        statusEl.style.color = '#ef4444';
        statusEl.textContent = '✗ 导入失败: ' + error.message;
        confirmBtn.disabled = false;
      }
    }
  };

  // 页面加载后初始化
  Router.onAfterEach((path) => {
    if (path === '/plan-mgmt/material-purchase') {
      setTimeout(() => MaterialPurchase.init(), 100);
    }
  });
})();