<script setup>
import { computed } from 'vue';

const props = defineProps({
  template: {
    type: Object,
    required: true,
  },
  productos: {
    type: Array,
    required: true,
  },
});

const formatCurrency = (value) => {
  return new Intl.NumberFormat("es-MX", {
    style: "currency",
    currency: "MXN",
  }).format(value);
};

const isRemision = computed(() => {
  return props.template.documentType === 'REMISION';
});
</script>

<template>
  <table v-if="isRemision">
    <thead>
        <tr class="text-white" :style="{ backgroundColor: template.primaryColor }">
            <th class="border border-white px-1 py-0.5">CANT</th>
            <th class="border border-white px-1 py-0.5">UNIDAD</th>
            <th class="border border-white px-1 py-0.5">CODIGO</th>
            <th class="border border-white px-1 py-0.5">DESCRIPCION</th>
            <th class="border border-white px-1 py-0.5">CANTIDAD</th>
            <th class="border border-white px-1 py-0.5">PRECIO UNIT.</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="producto in productos" :key="producto.lote" class="odd:bg-blue-100">
            <td class="border border-gray-300 px-1 py-0.5 text-center">{{ producto.cantidad }}</td>
            <td class="border border-gray-300 px-1 py-0.5 text-center">{{ producto.unidad || producto.unidadSAT }}</td>
            <td class="border border-gray-300 px-1 py-0.5">{{ producto.codigo }}</td>
            <td class="border border-gray-300 px-1 py-0.5">{{ producto.descripcion }}</td>
            <td class="border border-gray-300 px-1 py-0.5">{{ formatCurrency(producto.precioUnitario) }}</td>
            <td class="border border-gray-300 px-1 py-0.5">{{ formatCurrency(producto.cantidad * producto.precioUnitario) }}</td>
        </tr>
    </tbody>
  </table>
  <table v-else class="w-full border-collapse mb-3">
    <thead>
      <tr
        class="text-white"
        :style="{ backgroundColor: template.primaryColor }"
      >
        <th class="border border-white px-1 py-0.5">LOTE</th>
        <th class="border border-white px-1 py-0.5">CANT</th>
        <th class="border border-white px-1 py-0.5">UNIDAD</th>
        <th class="border border-white px-1 py-0.5">CODIGO</th>
        <th class="border border-white px-1 py-0.5">DESCRIPCION</th>
        <th class="border border-white px-1 py-0.5">P. UNIT.</th>
        <th class="border border-white px-1 py-0.5">IMPORTE</th>
        <th class="border border-white px-1 py-0.5">DESC</th>
        <th class="border border-white px-1 py-0.5">TOTAL</th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="producto in productos"
        :key="producto.lote"
        class="odd:bg-blue-100"
      >
        <td class="border border-gray-300 px-1 py-0.5 text-center">{{ producto.lote }}</td>
        <td class="border border-gray-300 px-1 py-0.5 text-center">{{ producto.cantidad }}</td>
        <td class="border border-gray-300 px-1 py-0.5 text-center">{{ producto.unidad || producto.unidadSAT }}</td>
        <td class="border border-gray-300 px-1 py-0.5">{{ producto.codigo }}</td>
        <td class="border border-gray-300 px-1 py-0.5">{{ producto.descripcion }}</td>
        <td class="border border-gray-300 px-1 py-0.5 text-right whitespace-nowrap">
          {{ formatCurrency(producto.precioUnitario) }}
        </td>
        <td class="border border-gray-300 px-1 py-0.5 text-right whitespace-nowrap">
          {{ formatCurrency(producto.cantidad * producto.precioUnitario) }}
        </td>
        <td class="border border-gray-300 px-1 py-0.5 text-right whitespace-nowrap">
          {{ formatCurrency(producto.descuento || 0) }}
        </td>
        <td class="border border-gray-300 px-1 py-0.5 text-right font-semibold whitespace-nowrap">
          {{ formatCurrency(producto.cantidad * producto.precioUnitario - (producto.descuento || 0)) }}
        </td>
      </tr>
    </tbody>
  </table>
</template>
