<template>
  <div class="report-preview-wrapper">
    <div class="toolbar">
      <button @click="handlePrint">打印</button>
      <button @click="handleExportPDF">导出 PDF</button>
      <button @click="handleClose">关闭</button>
    </div>
    <div ref="previewRef" class="report-preview" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

interface ReportProps {
  templateUrl: string
  data: Record<string, unknown> | Record<string, unknown>[]
  detailData?: Record<string, unknown>[]
}

const props = defineProps<ReportProps>()
const emit = defineEmits<{ close: [] }>()

const previewRef = ref<HTMLDivElement | null>(null)
let reportInstance: GRReport | null = null

onMounted(async () => {
  if (!previewRef.value) return
  reportInstance = new window.GRReport()
  await reportInstance.LoadFromURL(props.templateUrl)

  reportInstance.DetailGrid.Recordset.Clear()
  if (Array.isArray(props.detailData)) {
    props.detailData.forEach((row) => {
      const rec = reportInstance!.DetailGrid.Recordset.Append()
      Object.entries(row).forEach(([k, v]) => rec.SetFieldValue(k, v))
    })
  }

  if (props.data && !Array.isArray(props.data)) {
    Object.entries(props.data).forEach(([k, v]) => {
      reportInstance!.SetParamValue(k, v as string | number)
    })
  }

  reportInstance.PreviewInDiv(previewRef.value)
})

onBeforeUnmount(() => {
  reportInstance?.Stop()
  reportInstance = null
})

const handlePrint = () => reportInstance?.Print(false)
const handleExportPDF = () => reportInstance?.ExportToPDF('report.pdf')
const handleClose = () => emit('close')
</script>

<style scoped>
.report-preview-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.toolbar { padding: 10px; border-bottom: 1px solid #ddd; }
.toolbar button { margin-right: 8px; }
.report-preview { flex: 1; overflow: auto; background: #f5f5f5; }
</style>

<!-- src/views/InvoicePage.vue -->
<template>
  <div class="invoice-page">
    <h2>销售发票 {{ invoiceNo }}</h2>
    <div ref="containerRef" class="preview-container" />
    <div class="actions">
      <button :disabled="isLoading" @click="print()">打印</button>
      <button :disabled="isLoading" @click="exportPDF()">导出 PDF</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useReport } from '@/composables/useReport'

const invoiceNo = ref('INV-2026-0512-001')
const containerRef = ref<HTMLDivElement | null>(null)
const { isLoading, loadReport, print, exportPDF, dispose } = useReport()

onMounted(async () => {
  if (!containerRef.value) return
  await loadReport(containerRef.value, {
    templateUrl: '/templates/invoice.grf',
    master: {
      InvoiceNo: invoiceNo.value,
      CustomerName: '深圳某科技有限公司',
      InvoiceDate: '2026-05-12'
    },
    detail: [
      { ProductName: 'AI 工具年度授权', UnitPrice: 999, Qty: 2, Amount: 1998 },
      { ProductName: '技术咨询服务',  UnitPrice: 800, Qty: 5, Amount: 4000 }
    ]
  })
})

onBeforeUnmount(dispose)
</script>

<style scoped>
.invoice-page { padding: 20px; }
.preview-container { height: 800px; border: 1px solid #ddd; margin: 20px 0; }
.actions button { margin-right: 8px; }
</style>

<!-- src/views/InvoicePrint.vue -->
<template>
  <div class="invoice-print">
    <header class="page-header">
      <h2>销售发票打印 — {{ invoice?.invoiceNo }}</h2>
      <div class="actions">
        <button :disabled="isLoading || !invoice" @click="print(false)">直接打印</button>
        <button :disabled="isLoading || !invoice" @click="print(true)">选择打印机</button>
        <button :disabled="isLoading || !invoice" @click="exportPDFBtn">导出 PDF</button>
      </div>
    </header>

    <div v-if="error" class="error">加载失败：{{ error.message }}</div>
    <div v-if="isLoading" class="loading">加载中…</div>

    <div ref="containerRef" class="preview" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { useReport } from '@/composables/useReport'

interface SalesInvoice { /* 见 8.1 节 */ }

const route = useRoute()
const containerRef = ref<HTMLDivElement | null>(null)
const invoice = ref<SalesInvoice | null>(null)
const { isLoading, error, loadReport, print, exportPDF, dispose } = useReport()

async function fetchInvoice(invoiceNo: string) {
  const resp = await axios.get<SalesInvoice>(`/api/invoices/${invoiceNo}`)
  invoice.value = resp.data
}

async function renderReport() {
  if (!containerRef.value || !invoice.value) return
  const inv = invoice.value
  await loadReport(containerRef.value, {
    templateUrl: '/templates/invoice.grf',
    master: {
      InvoiceNo: inv.invoiceNo,
      InvoiceDate: inv.invoiceDate,
      CustomerName: inv.customerName,
      CustomerTaxId: inv.customerTaxId,
      CustomerAddress: inv.customerAddress,
      Subtotal: inv.subtotal,
      TaxTotal: inv.taxTotal,
      Total: inv.total,
      TotalChinese: inv.totalChinese,
      Remark: inv.remark,
      Payee: inv.payee,
      Reviewer: inv.reviewer,
      Drawer: inv.drawer
    },
    detail: inv.items.map((it) => ({
      ProductName: it.productName,
      Spec: it.spec,
      Unit: it.unit,
      Qty: it.qty,
      UnitPrice: it.unitPrice,
      Amount: it.amount,
      TaxRate: `${(it.taxRate * 100).toFixed(0)}%`,
      TaxAmount: it.taxAmount
    }))
  })
}

function exportPDFBtn() {
  if (!invoice.value) return
  exportPDF(`Invoice-${invoice.value.invoiceNo}.pdf`)
}

onMounted(async () => {
  const invoiceNo = route.params.invoiceNo as string
  await fetchInvoice(invoiceNo)
  await renderReport()
})

onBeforeUnmount(dispose)
</script>

<style scoped>
.invoice-print { padding: 20px; }
.page-header { display: flex; justify-content: space-between; align-items: center; }
.actions button { margin-left: 8px; }
.error { color: red; padding: 10px; background: #fee; }
.loading { padding: 20px; text-align: center; color: #888; }
.preview { height: calc(100vh - 120px); border: 1px solid #ddd; margin-top: 16px; }
</style>