MC_Report/public/js/pages/export-page.js

const ExportPage = {
  async render() { return '<div class="loading"><i class="fas fa-spinner"></i></div>'; },

  mount() {
    const ct = document.getElementById('page-content');
    document.getElementById('page-title').textContent = '<27>唳旿撖澆枂';
    document.getElementById('page-actions').innerHTML = '';

    ct.innerHTML = `
      <div class="grid-2">
        <div class="card"><div class="card-h"><i class="fas fa-file-csv"></i> 撖澆枂撌亙<E6928C></div><div class="card-b">
          <form id="exp-tickets">
            <div class="grid-2"><div class="form-group"><label>蝐餃<E89D90></label><select id="et-type"><option value=""><3E>券<EFBFBD></option>${Object.entries(U.TYPE).map(([k,v])=>`<option value="${k}">${v}</option>`).join('')}</select></div>
            <div class="form-group"><label><3E>嗆<EFBFBD>?/label><select id="et-status"><option value=""><3E>券<EFBFBD></option>${Object.entries(U.STATUS).map(([k,v])=>`<option value="${k}">${v}</option>`).join('')}</select></div></div>
            <div class="grid-2"><div class="form-group"><label>撘<>憪𧢲𠯫<F0A7A2B2>?/label><input type="date" id="et-start"></div><div class="form-group"><label>蝏𤘪<E89D8F><F0A498AA>交<EFBFBD></label><input type="date" id="et-end"></div></div>
            <div class="form-group"><label><3E>澆<EFBFBD></label><select id="et-fmt"><option value="csv">CSV (Excel)</option><option value="json">JSON</option></select></div>
            <button type="submit" class="btn btn-p btn-sm"><i class="fas fa-download"></i> 撖澆枂</button>
          </form>
        </div></div>

        <div class="card"><div class="card-h"><i class="fas fa-user-slash"></i> 鋡思蜀<E6809D>乩犖蝏蠘恣撖澆枂</div><div class="card-b">
          <p class="tm mb-4">撖澆枂<E6BE86><E69E82><EFBFBD>㕑◤銝暹𥁒<E69AB9>拙振<E68B99>𡑒”嚗<E2809D>鉄鋡思蜀<E6809D>交活<E4BAA4>啜<EFBFBD><E5959C><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>栶<EFBFBD><E6A0B6>虜閫<E8999C><E996AB><EFBFBD>删<EFBFBD></p>
          <form id="exp-reported">
            <div class="form-group"><label><3E>澆<EFBFBD></label><select id="er-fmt"><option value="csv">CSV (Excel)</option><option value="json">JSON</option></select></div>
            <button type="submit" class="btn btn-w btn-sm"><i class="fas fa-download"></i> 撖澆枂鋡思蜀<E6809D>乩犖蝏蠘恣</button>
          </form>
        </div></div>

        <div class="card"><div class="card-h"><i class="fas fa-history"></i> 撖澆枂<E6BE86>滢<EFBFBD><E6BBA2>亙<EFBFBD></div><div class="card-b">
          <form id="exp-logs">
            <div class="grid-2"><div class="form-group"><label>撘<>憪𧢲𠯫<F0A7A2B2>?/label><input type="date" id="el-start"></div><div class="form-group"><label>蝏𤘪<E89D8F><F0A498AA>交<EFBFBD></label><input type="date" id="el-end"></div></div>
            <div class="form-group"><label><3E>澆<EFBFBD></label><select id="el-fmt"><option value="csv">CSV (Excel)</option><option value="json">JSON</option></select></div>
            <button type="submit" class="btn btn-i btn-sm"><i class="fas fa-download"></i> 撖澆枂</button>
          </form>
        </div></div>

        <div class="card"><div class="card-h"><i class="fas fa-chart-bar"></i> 蝏蠘恣<E8A098>亥”</div><div class="card-b">
          <p class="tm mb-4"><3E>亦<EFBFBD>蝟餌<E89D9F><E9A48C>港<EFBFBD>蝏蠘恣<E8A098>諹<EFBFBD><E8ABB9>踵㺭<E8B8B5>?/p>
          <button class="btn btn-p btn-sm" onclick="ExportPage.viewStats()"><i class="fas fa-chart-simple"></i> <20>亦<EFBFBD>蝏蠘恣</button>
        </div></div>
      </div>
    `;

    document.getElementById('exp-tickets').onsubmit = async e => {
      e.preventDefault();
      const p = new URLSearchParams({
        format: document.getElementById('et-fmt').value,
        type: document.getElementById('et-type').value,
        status: document.getElementById('et-status').value,
        start_date: document.getElementById('et-start').value,
        end_date: document.getElementById('et-end').value,
      });
      try { await API.download(`/export/tickets?${p}`); } catch (ex) { alert(ex.message); }
    };

    document.getElementById('exp-reported').onsubmit = async e => {
      e.preventDefault();
      const p = new URLSearchParams({ format: document.getElementById('er-fmt').value });
      try { await API.download(`/export/reported-players?${p}`); } catch (ex) { alert(ex.message); }
    };

    document.getElementById('exp-logs').onsubmit = async e => {
      e.preventDefault();
      const p = new URLSearchParams({
        format: document.getElementById('el-fmt').value,
        start_date: document.getElementById('el-start').value,
        end_date: document.getElementById('el-end').value,
      });
      try { await API.download(`/export/audit-logs?${p}`); } catch (ex) { alert(ex.message); }
    };
  },

  async viewStats() {
    try {
      const d = await API.get('/export/dashboard');
      U.modal('蝟餌<E89D9F>蝏蠘恣', `
        <div class="detail-section"><h4>璁<><E79281></h4>
          <div class="detail-row"><span class="lbl">撌亙<E6928C><E4BA99>餅㺭</span><span class="val fb">${d.total}</span></div>
          <div class="detail-row"><span class="lbl">隞𦠜𠯫<F0A6A09C>啣<EFBFBD></span><span class="val fb">${d.today}</span></div>
          <div class="detail-row"><span class="lbl"><3E>冽<EFBFBD><E586BD>?/span><span class="val fb">${d.usersTotal}</span></div>
        </div>
        <div class="detail-section"><h4><3E>嗆<EFBFBD><E59786><EFBFBD>撣?/h4>${(d.byStatus||[]).map(r=>`<div class="detail-row"><span class="lbl">${U.STATUS[r.status]||r.status}</span><span class="val fb">${r.c}</span></div>`).join('')}</div>
        <div class="detail-section"><h4>蝐餃<E89D90><E9A483><EFBFBD><EFBFBD></h4>${(d.byType||[]).map(r=>`<div class="detail-row"><span class="lbl">${U.TYPE[r.type]||r.type}</span><span class="val fb">${r.c}</span></div>`).join('')}</div>
        ${d.monthly?.length?`<div class="detail-section"><h4><3E><>漲頞见飵</h4>${d.monthly.map(m=>`<div class="detail-row"><span class="lbl">${m.m}</span><span class="val fb">${m.c} <20>?/span></div>`).join('')}</div>`:''}
      `, '600px');
    } catch (e) { alert(e.message); }
  }
};