// 利润表数据接口
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";

dayjs.locale("zh-cn");

export interface ProfitTableRow {
  vehicleNo: string; // 车次
  shippingDate: string; // 发货日期
  originCost: number; // 产地成本
  quoteAmount: number; // 报价金额
  profit: number; // 利润
}

export class ProfitTableTemplate {
  private data: ProfitTableRow[];
  private month: string;

  constructor(data: ProfitTableRow[], month: string) {
    this.data = data;
    this.month = month;
  }

  // 将利润表内容转换为HTML字符串的函数
  generateHtmlString = () => {
    // 计算合计
    const totalOriginCost = this.data.reduce(
      (sum, row) => sum + row.originCost,
      0,
    );
    const totalQuoteAmount = this.data.reduce(
      (sum, row) => sum + row.quoteAmount,
      0,
    );
    const totalProfit = this.data.reduce((sum, row) => sum + row.profit, 0);

    return `
      <style>
        @page {size: 210mm 297mm;margin: 0;padding: 0;}
        * {outline: none;box-sizing: border-box;margin: 0;padding: 0;border: 0 solid;}
        body {background-color: #fff;color: #4d4d4d;font-size: 14px;font-style: normal;box-sizing: border-box;}
        .page-wrap {width: 210mm;min-height: 297mm;margin: 0 auto;}
        .page-content {position: relative;box-sizing: border-box;width: 100%;height: 100%;padding: 20mm 10mm 0;display: flex;flex-direction: column;gap: 2mm;}
        @media print {.print-controls {display: none !important;}body {padding: 0;margin: 0;}}
        .preview {width: 19cm;}
        .table-border {border: 2px solid #000;border-collapse: collapse;width: 100%;}
        .table-border th,
        .table-border td {border: 1px solid #000;padding: 8px;text-align: center;}
        .table-border th {font-weight: bold;background-color: #f5f5f5;}
        .table-title {font-size: 20px;font-weight: bold;text-align: center;padding: 16px;border: 2px solid #000;border-bottom: none;}
        .text-center {text-align: center;}
        .text-right {text-align: right;}
        .font-bold {font-weight: bold;}
        .text-xl {font-size: 20px;}
        .text-lg {font-size: 18px;}
        .text-2xl {font-size: 24px;}
        .mb-4 {margin-bottom: 16px;}
        .p-4 {padding: 16px;}
        .gap-4 {gap: 16px;}
        .negative {color: #ff0000;}
        .positive {color: #00ff00;}
        .footer {background-color: yellow}
      </style>
      <div class="page-wrap">
        <div class="page-content">
          <div class="preview">
            <div class="table-title">诚信志远利润明细</div>
            <table class="table-border">
              <thead>
                <tr>
                  <th style="width: 20%;">车次</th>
                  <th style="width: 20%;">发货日期</th>
                  <th style="width: 20%;">产地成本</th>
                  <th style="width: 20%;">报价金额</th>
                  <th style="width: 20%;">利润</th>
                </tr>
              </thead>
              <tbody>
                ${this.data
                  .map(
                    (row) => `
                      <tr>
                        <td>${row.vehicleNo}</td>
                        <td>${row.shippingDate}</td>
                        <td>${row.originCost}</td>
                        <td>${row.quoteAmount}</td>
                        <td>${row.profit.toFixed(2)}</td>
                      </tr>
                    `,
                  )
                  .join("")}
              </tbody>
              <tfoot class="footer">
                <tr class="font-bold">
                  <td colspan="2">${dayjs(this.month).format("MMMM")}合计</td>
                  <td>${totalOriginCost.toFixed(2)}</td>
                  <td>${totalQuoteAmount.toFixed(2)}</td>
                  <td>${totalProfit.toFixed(2)}</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    `;
  };
}
