<script setup>
import { ref, watch } from "vue";
import { buildSeguimientoBarcodeDataUrl } from "@/utils/ticketPosPdf";

const props = defineProps({
  /** Folio (si no hay codigoQr). */
  folioUnico: { type: String, default: "" },
  /** Misma cadena que en BD para POST escanear-qr / laundry/scans. */
  codigoQr: { type: String, default: "" },
  /** Alto visual aproximado del código de barras (px) */
  size: { type: Number, default: 80 },
});

const src = ref("");

watch(
  () => [props.codigoQr, props.folioUnico],
  async ([cq, folio]) => {
    src.value = "";
    const ordenLike = { codigo_qr: cq, folio_unico: folio };
    if (!folio && !cq) return;
    src.value = await buildSeguimientoBarcodeDataUrl(ordenLike, {
      width: 2,
      height: Math.min(96, Math.max(36, Math.round(props.size * 0.7))),
    });
  },
  { immediate: true }
);
</script>

<template>
  <div class="seguimiento-barcode-thumb text-center">
    <img
      v-if="src"
      :src="src"
      :width="Math.round(size * 1.9)"
      :height="Math.round(size * 0.7)"
      alt=""
      class="rounded border bg-white p-1"
      role="presentation"
    />
    <span v-else class="text-muted small">—</span>
  </div>
</template>
