<!-- 搜索表单 -->
<template>
  <a-space :size="10" style="flex-wrap: wrap">
    <!--    <a-button type="primary" class="ele-btn-icon" @click="add">-->
    <!--      <template #icon>-->
    <!--        <PlusOutlined />-->
    <!--      </template>-->
    <!--      <span>添加</span>-->
    <!--    </a-button>-->
    <a-button type="primary" class="ele-btn-icon" @click="openMultiAdd">
      <template #icon>
        <PlusOutlined />
      </template>
      <span>批量生成</span>
    </a-button>
    <a-input-search
      allow-clear
      v-model:value="where.keywords"
      placeholder="名称|秘钥|用户ID"
      style="width: 240px"
      @search="reload"
      @pressEnter="reload"
    />
    <a-button
      type="text"
      :icon="h(QrcodeOutlined)"
      @click="handleExport"
      :loading="exportLoading"
      >导出二维码
    </a-button>
    <a-button type="text" @click="handlePrint">打印 </a-button>
    <MakeCard v-model:visible="showMultiAdd" @done="done" />
  </a-space>
</template>

<script lang="ts" setup>
  import { PlusOutlined, QrcodeOutlined } from '@ant-design/icons-vue';
  import { watch, ref, h } from 'vue';
  import { ShopGift, ShopGiftParam } from '@/api/shop/shopGift/model';
  import MakeCard from '@/views/shop/shopGift/components/makeCard.vue';
  import { listShopGift } from '@/api/shop/shopGift';
  import { message } from 'ant-design-vue';
  import {
    Document,
    Packer,
    Paragraph,
    ImageRun,
    AlignmentType,
    Table,
    TableRow,
    TableCell,
    WidthType
  } from 'docx';
  import { saveAs } from 'file-saver';
  import QRCode from 'qrcode';
  import useSearch from '@/utils/use-search';

  const props = withDefaults(
    defineProps<{
      // 选中的角色
      selection?: ShopGift[];
    }>(),
    {}
  );

  const emit = defineEmits<{
    (e: 'search', where?: ShopGiftParam): void;
    (e: 'add'): void;
    (e: 'remove'): void;
    (e: 'batchMove'): void;
    (e: 'done'): void;
  }>();

  // 表单数据
  const { where } = useSearch<ShopGiftParam>({
    keywords: ''
  });

  // 新增
  // const add = () => {
  //   emit('add');
  // };

  const reload = () => {
    emit('search', { ...where });
  };

  const done = () => {
    emit('done');
  };

  const showMultiAdd = ref(false);
  const exportLoading = ref(false);

  const openMultiAdd = () => {
    showMultiAdd.value = true;
  };

  // 批量导出二维码到Word文档
  const handleExport = async () => {
    try {
      exportLoading.value = true;
      message.loading('正在生成二维码文档，请稍候...', 0);

      // 获取所有礼品卡数据
      let giftList: ShopGift[] = [];
      if (props.selection && props.selection.length > 0) {
        // 如果有选中的数据，只导出选中的
        giftList = props.selection;
      } else {
        // 如果没有选中，导出所有数据
        giftList = await listShopGift();
      }

      if (!giftList || giftList.length === 0) {
        message.error('没有礼品卡数据可导出');
        return;
      }

      // 生成二维码图片
      const qrCodeImages: { dataUrl: string; giftInfo: ShopGift }[] = [];

      for (const gift of giftList) {
        try {
          // 生成二维码（使用礼品卡code作为内容）
          const qrCodeDataUrl = await QRCode.toDataURL(String(gift.code), {
            width: 200,
            margin: 2,
            color: {
              dark: '#000000',
              light: '#FFFFFF'
            }
          });

          qrCodeImages.push({ dataUrl: qrCodeDataUrl, giftInfo: gift });
        } catch (error) {
          console.error(`生成礼品卡 ${gift.code} 的二维码失败:`, error);
        }
      }

      if (qrCodeImages.length === 0) {
        message.error('二维码生成失败');
        return;
      }

      // 尝试创建Word文档，如果失败则使用HTML方式
      try {
        await createWordDocument(qrCodeImages);
        message.destroy();
        message.success(`成功导出 ${qrCodeImages.length} 个礼品卡二维码`);
      } catch (docError) {
        console.warn('Word文档生成失败，使用HTML方式:', docError);
        createHtmlDocument(qrCodeImages);
        message.destroy();
        message.success(
          `成功生成 ${qrCodeImages.length} 个礼品卡二维码（HTML格式，可直接打印）`
        );
      }
    } catch (error) {
      console.error('导出失败:', error);
      message.destroy();
      message.error('导出失败，请重试');
    } finally {
      exportLoading.value = false;
    }
  };

  // 创建Word文档
  const createWordDocument = async (
    qrCodeImages: { dataUrl: string; giftInfo: ShopGift }[]
  ) => {
    const children: (Paragraph | Table)[] = [];

    // 添加标题
    children.push(
      new Paragraph({
        text: '礼品卡二维码清单',
        alignment: AlignmentType.CENTER,
        spacing: { after: 400 }
      })
    );

    // 每行放置3个二维码，保持适当间距
    const itemsPerRow = 3;
    const rows = Math.ceil(qrCodeImages.length / itemsPerRow);

    for (let row = 0; row < rows; row++) {
      const startIndex = row * itemsPerRow;
      const endIndex = Math.min(startIndex + itemsPerRow, qrCodeImages.length);
      const rowItems = qrCodeImages.slice(startIndex, endIndex);

      // 创建表格行来放置二维码
      const qrCodeCells: TableCell[] = [];
      const infoCells: TableCell[] = [];

      for (let i = 0; i < itemsPerRow; i++) {
        if (i < rowItems.length) {
          const item = rowItems[i];

          // 将DataURL转换为Buffer
          const base64Data = item.dataUrl.split(',')[1];
          const binaryData = atob(base64Data);
          const bytes = new Uint8Array(binaryData.length);
          for (let j = 0; j < binaryData.length; j++) {
            bytes[j] = binaryData.charCodeAt(j);
          }

          qrCodeCells.push(
            new TableCell({
              children: [
                new Paragraph({
                  children: [
                    // @ts-ignore
                    new ImageRun({
                      data: bytes,
                      transformation: {
                        width: 150,
                        height: 150
                      }
                    })
                  ],
                  alignment: AlignmentType.CENTER
                })
              ],
              width: { size: 33, type: WidthType.PERCENTAGE }
            })
          );

          infoCells.push(
            new TableCell({
              children: [
                new Paragraph({
                  text: `${item.giftInfo.code || '未设置'}`,
                  alignment: AlignmentType.CENTER
                }),
                new Paragraph({
                  text: `${item.giftInfo.name || ''}`,
                  alignment: AlignmentType.CENTER
                })
              ],
              width: { size: 33, type: WidthType.PERCENTAGE }
            })
          );
        } else {
          // 空单元格
          qrCodeCells.push(
            new TableCell({
              children: [new Paragraph({ text: '' })],
              width: { size: 33, type: WidthType.PERCENTAGE }
            })
          );
          infoCells.push(
            new TableCell({
              children: [new Paragraph({ text: '' })],
              width: { size: 33, type: WidthType.PERCENTAGE }
            })
          );
        }
      }

      // 添加表格
      children.push(
        new Table({
          rows: [
            new TableRow({
              children: qrCodeCells
            }),
            new TableRow({
              children: infoCells
            })
          ],
          width: { size: 100, type: WidthType.PERCENTAGE }
        })
      );

      // 添加行间距
      children.push(
        new Paragraph({
          text: '',
          spacing: { after: 400 }
        })
      );
    }

    // 创建文档
    const doc = new Document({
      sections: [
        {
          properties: {
            page: {
              size: {
                orientation: 'portrait',
                width: 11906, // A4宽度 (210mm)
                height: 16838 // A4高度 (297mm)
              },
              margin: {
                top: 1134, // 2cm
                right: 1134, // 2cm
                bottom: 1134, // 2cm
                left: 1134 // 2cm
              }
            }
          },
          children
        }
      ]
    });

    // 生成并下载文档
    try {
      const buffer = await Packer.toBlob(doc);
      const fileName = `礼品卡二维码清单_${new Date()
        .toISOString()
        .slice(0, 10)}.docx`;
      saveAs(buffer, fileName);
    } catch (error) {
      console.error('文档生成失败:', error);
      // 如果Packer.toBlob失败，尝试使用toBuffer
      const buffer = await Packer.toBuffer(doc);
      const blob = new Blob([buffer], {
        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      });
      const fileName = `礼品卡二维码清单_${new Date()
        .toISOString()
        .slice(0, 10)}.docx`;
      saveAs(blob, fileName);
    }
  };

  // 创建HTML文档（备用方案）
  const createHtmlDocument = (
    qrCodeImages: { dataUrl: string; giftInfo: ShopGift }[]
  ) => {
    const itemsPerRow = 3;
    let htmlContent = `
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title>礼品卡二维码清单</title>
        <style>
          @page {
            size: A4;
            margin: 2cm;
          }
          body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
          }
          .title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
          }
          .qr-grid {
            display: grid;
            grid-template-columns: repeat(${itemsPerRow}, 1fr);
            gap: 20px;
            margin-bottom: 30px;
          }
          .qr-item {
            text-align: center;
            page-break-inside: avoid;
          }
          .qr-code {
            width: 150px;
            height: 150px;
            margin: 0 auto 10px;
          }
          .qr-info {
            font-size: 12px;
            line-height: 1.4;
          }
          @media print {
            .no-print { display: none; }
          }
        </style>
      </head>
      <body>
        <div class="title">礼品卡二维码清单</div>
        <div class="qr-grid">
    `;

    qrCodeImages.forEach((item) => {
      htmlContent += `
        <div class="qr-item">
          <img src="${item.dataUrl}" alt="QR Code" class="qr-code">
          <div class="qr-info">
            <div>礼品卡编号: ${item.giftInfo.code || '未设置'}</div>
            <div>礼品卡名称: ${item.giftInfo.name || ''}</div>
            <div>ID: ${item.giftInfo.id}</div>
          </div>
        </div>
      `;
    });

    htmlContent += `
        </div>
        <div class="no-print" style="text-align: center; margin-top: 30px;">
          <button onclick="window.print()" style="padding: 10px 20px; font-size: 16px;">打印文档</button>
          <button onclick="window.close()" style="padding: 10px 20px; font-size: 16px; margin-left: 10px;">关闭</button>
        </div>
      </body>
      </html>
    `;

    // 在新窗口中打开HTML文档
    const newWindow = window.open('', '_blank');
    if (newWindow) {
      newWindow.document.write(htmlContent);
      newWindow.document.close();
    } else {
      // 如果弹窗被阻止，创建下载链接
      const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
      const fileName = `礼品卡二维码清单_${new Date()
        .toISOString()
        .slice(0, 10)}.html`;
      saveAs(blob, fileName);
    }
  };

  // 使用原生 window.print() 的打印功能
  const handlePrint = async () => {
    try {
      message.loading('正在准备打印数据...', 0);

      // 获取打印数据
      let printData: ShopGift[] = [];

      if (props.selection && props.selection.length > 0) {
        printData = props.selection;
      } else {
        printData = await listShopGift();
      }

      if (!printData || printData.length === 0) {
        message.destroy();
        message.warning('没有数据可以打印');
        return;
      }

      message.destroy();

      // 创建打印窗口
      const printWindow = window.open('', '_blank');
      if (!printWindow) {
        message.error('无法打开打印窗口，请检查浏览器弹窗设置');
        return;
      }

      // 生成完整的HTML文档
      const printHtml = createPrintHtml(printData);

      // 写入HTML内容
      printWindow.document.write(printHtml);
      printWindow.document.close();

      // 等待内容加载完成后打印
      printWindow.onload = () => {
        printWindow.print();
        // 打印完成后关闭窗口
        printWindow.onafterprint = () => {
          printWindow.close();
        };
      };
    } catch (error) {
      message.destroy();
      console.error('打印失败:', error);
      message.error('打印失败，请重试');
    }
  };

  // 创建完整的打印HTML文档
  const createPrintHtml = (data: ShopGift[]) => {
    const getStatusText = (record: ShopGift) => {
      if (record.userId == 0) return '未领取';
      if (record.userId > 0 && record.status === 0) return '已领取';
      if (record.status === 1) return '已使用';
      if (record.status === 2) return '已失效';
      return '未知';
    };

    // 安全地处理数据，避免 undefined 或 null 值
    const safeValue = (value: any) => {
      if (value === null || value === undefined) return '';
      return String(value).replace(/</g, '&lt;').replace(/>/g, '&gt;');
    };

    let tableRows = '';
    data.forEach((record) => {
      tableRows += `
      <tr>
        <td>${safeValue(record.id)}</td>
        <td>${safeValue(record.name)}</td>
        <td>${safeValue(record.code)}</td>
        <td>${safeValue(record.goodsName)}</td>
        <td>${safeValue(getStatusText(record))}</td>
        <td>${safeValue(record.createTime)}</td>
      </tr>`;
    });

    return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>礼品卡清单</title>
      <style>
        @page {
          margin: 15mm;
          size: A4;
        }

        body {
          font-family: Arial, "Microsoft YaHei", sans-serif;
          margin: 0;
          padding: 20px;
          font-size: 14px;
        }

        .header {
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 20px;
          padding-bottom: 10px;
          border-bottom: 2px solid #333;
        }

        .info {
          margin-bottom: 15px;
          font-size: 12px;
          color: #666;
        }

        table {
          width: 100%;
          border-collapse: collapse;
          margin-top: 10px;
        }

        th, td {
          border: 1px solid #333;
          padding: 8px;
          text-align: center;
          font-size: 12px;
        }

        th {
          background-color: #f5f5f5;
          font-weight: bold;
          height: 35px;
        }

        tr:nth-child(even) {
          background-color: #f9f9f9;
        }

        .footer {
          margin-top: 20px;
          text-align: right;
          font-size: 12px;
          color: #666;
        }

        @media print {
          .no-print {
            display: none !important;
          }

          body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
          }
        }
      </style>
    </head>
    <body>
      <div class="header">礼品卡清单</div>

      <div class="info">
        <div>打印时间：${new Date().toLocaleString()}</div>
        <div>数据条数：${data.length} 条</div>
      </div>

      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>秘钥</th>
            <th>商品</th>
            <th>状态</th>
            <th>创建时间</th>
          </tr>
        </thead>
        <tbody>
          ${tableRows}
        </tbody>
      </table>

      <div class="footer">
        <div>共 ${data.length} 条记录</div>
      </div>

      <div class="no-print" style="text-align: center; margin-top: 20px;">
        <button onclick="window.print()" style="padding: 10px 20px; font-size: 14px;">重新打印</button>
        <button onclick="window.close()" style="padding: 10px 20px; font-size: 14px; margin-left: 10px;">关闭</button>
      </div>
    </body>
    </html>
  `;
  };

  watch(
    () => props.selection,
    () => {}
  );
</script>
