{% extends "base.html" %}

{% block title %}{{userInfo.company}} - 首页{% endblock %}

{% block content %}
    <div class="pagetitle">
      <h1>{{userInfo.company}}</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index">首页</a></li>
        </ol>
      </nav>
    </div>

    <section class="section">
      <div class="row">
        <div class="col-lg-12">
          <div class="row row-cols-1 row-cols-md-2 g-4">

            

           

            <!-- 打印记录统计卡片 -->
            <div class="col">
              <div class="card info-card sales-card">
                <div class="card-body">
                  <h5 class="card-title">打印记录统计 <span>| 时间范围</span></h5>
                  <div class="d-flex mt-4">
                    <div class="form-group me-2">
                      <label for="startDateTimePrint">开始时间</label>
                      <input type="datetime-local" class="form-control" id="startDateTimePrint">
                    </div>
                    <div class="form-group me-2">
                      <label for="endDateTimePrint">结束时间</label>
                      <input type="datetime-local" class="form-control" id="endDateTimePrint">
                    </div>
                    <button class="btn btn-primary" onclick="updateCardData({id: 'Print'})">确定</button>
                  </div>
                  <div class="d-flex mt-3 quick-range-buttons" data-card-id="Print">
                    <button class="btn btn-outline-secondary me-2" data-quick-range="today">今天</button>
                    <button class="btn btn-outline-secondary me-2" data-quick-range="yesterday">昨天</button>
                    <button class="btn btn-outline-secondary me-2" data-quick-range="lastWeek">最近一周</button>
                    <button class="btn btn-outline-secondary me-2" data-quick-range="lastMonth">最近一月</button>
                    <button class="btn btn-outline-secondary" data-quick-range="lastMonthStart">上一个月</button>
                  </div>
                  <div class="d-flex align-items-center mt-4">
                    <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                      <i class="bi bi-printer"></i>
                    </div>
                    <div class="ps-3">
                      <h6 id="totalCountPrint">总记录数：加载中...</h6>
                      <h6 id="totalZcCountPrint">打印成功数：加载中...</h6>
                      <h6 id="totalYcCountPrint">打印异常数：加载中...</h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 录单数据统计卡片 -->
            <div class="col">
              <div class="card info-card sales-card">
                <div class="card-body">
                  <h5 class="card-title">录单数据统计 <span>| 时间范围</span></h5>
                  <div class="d-flex mt-4">
                    <div class="form-group me-2">
                      <label for="startDateTimePackage">开始时间</label>
                      <input type="datetime-local" class="form-control" id="startDateTimePackage">
                    </div>
                    <div class="form-group me-2">
                      <label for="endDateTimePackage">结束时间</label>
                      <input type="datetime-local" class="form-control" id="endDateTimePackage">
                    </div>
                    <button class="btn btn-primary" onclick="updateCardData({id: 'Package'})">确定</button>
                  </div>
                  <div class="d-flex mt-3 quick-range-buttons" data-card-id="Package">
                    <button class="btn btn-outline-secondary me-2" data-quick-range="today">今天</button>
                    <button class="btn btn-outline-secondary me-2" data-quick-range="yesterday">昨天</button>
                    <button class="btn btn-outline-secondary me-2" data-quick-range="lastWeek">最近一周</button>
                    <button class="btn btn-outline-secondary me-2" data-quick-range="lastMonth">最近一月</button>
                    <button class="btn btn-outline-secondary" data-quick-range="lastMonthStart">上一个月</button>
                  </div>
                  <div class="d-flex align-items-center mt-4 flex-wrap">
                    <div class="d-flex flex-column me-3">
                      <h6 id="totalCountPackage">总录单数：加载中...</h6>
                      <h6 id="totalYcCount">已传面单：加载中...</h6>
                      <h6 id="totalWcCount">未传面单：加载中...</h6>
                    </div>
                    <div class="d-flex flex-column me-3">
                      <h6 id="USPSTotal">USPS面单数：加载中...</h6>
                      <h6 id="GOFOTotal">GOFO面单数：加载中...</h6>
                      <h6 id="UNIUNITotal">UNIUNI面单数：加载中...</h6>
                      <h6 id="FEDEXTotal">FEDEX面单数：加载中...</h6>
                      <h6 id="SWIFTXTotal">SWIFTX面单数：加载中...</h6>
                      <h6 id="YANWENTotal">YANWEN面单数：加载中...</h6>
                      <h6 id="SPEEDXTotal">SPEEDX面单数：加载中...</h6>
                      <h6 id="OthersTotal">非USPS/GOFO/UNIUNI面单数：加载中...</h6>
                      <h6 id="DocumentsTotal">总面单数：加载中...</h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>
{% endblock %}

{% block scripts %}
<script>
const config = {
  cards: [
   
    { id: 'Print', label: '打印记录', api: '/home/statistics/get_printrecord_totals' },
    { id: 'Package', label: '录单数据', api: '/home/statistics/get_package_totals' }
  ]
};

window.onload = function () {
  initAllCards();
  bindQuickRangeButtons();
};

function initAllCards() {
  config.cards.forEach(card => {
    initTimeRange(card.id);
    updateCardData(card);
  });
}

const timeUtils = {
  format(date) {
    const pad = n => String(n).padStart(2, '0');
    return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
  },
  calculateRange(range) {
    const now = new Date();
    let start, end;
    switch (range) {
      case 'today':
        start = new Date(now); start.setHours(0,0,0,0);
        end = new Date(start); end.setHours(23,59,59,999);
        break;
      case 'yesterday':
        start = new Date(now); start.setDate(now.getDate()-1); start.setHours(0,0,0,0);
        end = new Date(start); end.setHours(23,59,59,999);
        break;
      case 'lastWeek':
        start = new Date(now); start.setDate(now.getDate()-7); start.setHours(0,0,0,0);
        end = new Date(now); end.setHours(23,59,59,999);
        break;
      case 'lastMonth':
        start = new Date(now); start.setMonth(now.getMonth()-1); start.setHours(0,0,0,0);
        end = new Date(now); end.setHours(23,59,59,999);
        break;
      case 'lastMonthStart':
        start = new Date(now); start.setMonth(now.getMonth()-1); start.setDate(1); start.setHours(0,0,0,0);
        end = new Date(now); end.setMonth(now.getMonth()-1); end.setDate(new Date(now.getFullYear(), now.getMonth(), 0).getDate()); end.setHours(23,59,59,999);
        break;
      default:
        start = new Date(now); start.setDate(now.getDate()-1); start.setHours(0,0,0,0);
        end = new Date(start); end.setHours(23,59,59,999);
    }
    return { start, end };
  }
};

function initTimeRange(cardId) {
  const { start, end } = timeUtils.calculateRange('yesterday');
  document.getElementById(`startDateTime${cardId}`).value = timeUtils.format(start);
  document.getElementById(`endDateTime${cardId}`).value = timeUtils.format(end);
}

function bindQuickRangeButtons() {
  document.querySelectorAll('.quick-range-buttons button').forEach(btn => {
    btn.addEventListener('click', function () {
      const range = this.dataset.quickRange;
      const cardId = this.closest('.quick-range-buttons').dataset.cardId;
      setQuickRange(range, cardId);
    });
  });
}

function setQuickRange(range, cardId) {
  const { start, end } = timeUtils.calculateRange(range);
  document.getElementById(`startDateTime${cardId}`).value = timeUtils.format(start);
  document.getElementById(`endDateTime${cardId}`).value = timeUtils.format(end);
  updateCardData({ id: cardId });
}

// ===================== 核心：时间戳 + Request.post =====================
async function updateCardData(card) {
  const cardId = card.id || '';
  const api = config.cards.find(c => c.id === cardId)?.api;
  
  const startStr = document.getElementById(`startDateTime${cardId}`).value;
  const endStr = document.getElementById(`endDateTime${cardId}`).value;

  const start_time = Math.floor(new Date(startStr).getTime() / 1000);
  const end_time = Math.floor(new Date(endStr).getTime() / 1000);

  try {
    const res = await Request.post(api, { start_time, end_time });
    if (res.code === 200) {
      updateCardDisplay(cardId, res.data);
    }
  } catch (err) {
    console.error(err);
  }
}

function updateCardDisplay(cardId, data) {
  const isAdmin = "{{ userInfo.isadmin }}" === "True";
  const updates = {
    '': {
      totalCount: `总记录数：${data.total_count || 0}`,
      totalNum: `总数量：${data.total_num || 0}`,
      totalCost: isAdmin ? `总成本：${data.total_cost || 0}` : '总成本：**',
      totalPrice: isAdmin ? `总售价：${data.total_price || 0}` : '总售价：**'
    },
    'Out': {
      totalCountOut: `总记录数：${data.total_count || 0}`,
      totalNumOut: `总PC出库数量：${data.total_num_pc || 0}`,
      totalCostOut: `总快递出库数量：${data.total_num_kd || 0}`
    },
    'Print': {
      totalCountPrint: `总记录数：${data.total_count || 0}`,
      totalZcCountPrint: `打印成功数：${data.total_zc_count || 0}`,
      totalYcCountPrint: `打印异常数：${data.total_yc_count || 0}`
    },
    'Package': {
      totalCountPackage: `总录单数：${data.total_count || 0}`,
      totalYcCount: `已传面单：${data.total_yc_count || 0}`,
      totalWcCount: `未传面单：${data.total_wc_count || 0}`,
      USPSTotal: `USPS面单数: ${data.total_usps || 0}`,
      GOFOTotal: `GOFO面单数: ${data.total_gofo || 0}`,
      UNIUNITotal: `UNIUNI面单数: ${data.total_uniuni || 0}`,
      FEDEXTotal: `FEDEX面单数: ${data.total_fedex || 0}`,
      SWIFTXTotal: `SWIFTX面单数: ${data.total_swiftx || 0}`,
      YANWENTotal: `YANWEN面单数: ${data.total_yanwen || 0}`,
      SPEEDXTotal: `SPEEDX面单数: ${data.total_speedx || 0}`,
      OthersTotal: `非USPS/GOFO/UNIUNI面单数: ${data.total_others || 0}`,
      DocumentsTotal: `总面单数: ${data.total_documents || 0}`
    }
  };

  Object.entries(updates[cardId]).forEach(([id, value]) => {
    document.getElementById(id).textContent = value;
  });

  if (cardId === 'Package') {
    document.getElementById("totalYcCount").style.color = data.total_yc_count > 0 ? "#28a745" : "#dc3545";
    document.getElementById("totalWcCount").style.color = data.total_wc_count > 0 ? "#ffc107" : "#6c757d";
  }
}
</script>
{% endblock %}