cataRio/nuxt4/app/components/cata/ResumenMuestra.vue

<template>
  <div class="resumen-muestra w-full">
    <!-- Primera línea: Número, nombre y puntaje -->
    <div class="flex items-center gap-2 mb-2">
      <!-- Número de muestra -->
      <div class="muestra-numero cata-text font-bold flex-shrink-0">
        #{{ muestra.muestraId }}
      </div>

      <!-- Nombre de muestra -->
      <div class="flex-1 min-w-0">
        <div class="muestra-nombre cata-text font-semibold truncate text-sm">
          {{ muestra.nombre }}
        </div>
      </div>

      <!-- Puntaje final -->
      <div class="puntaje-final flex-shrink-0 px-2 py-1 rounded-md" :class="puntajeClass">
        <span class="text-xs font-bold">{{ muestra.puntajeFinal }}</span>
      </div>
    </div>

    <!-- Segunda línea: Chips informativos -->
    <div class="chips-container flex flex-wrap gap-1">
      <!-- Fragancia/Aroma -->
      <div v-if="muestra.fraganciaAromaNotas.categorias.length > 0" class="chip">
        <span class="chip-label">Frag/Aro:</span>
        <span class="chip-value">{{ categoriasFragancia }}</span>
      </div>

      <!-- Sabor -->
      <div v-if="muestra.saborNotas.categorias.length > 0" class="chip">
        <span class="chip-label">Sabor:</span>
        <span class="chip-value">{{ categoriasSabor }}</span>
      </div>

      <!-- Gustos predominantes -->
      <div v-if="muestra.gustosPredominantes.length > 0" class="chip">
        <span class="chip-label">Gustos:</span>
        <span class="chip-value">{{ muestra.gustosPredominantes.join(', ') }}</span>
      </div>

      <!-- Sensación en boca -->
      <div v-if="muestra.sensacionEnBoca.length > 0" class="chip">
        <span class="chip-label">Sensación:</span>
        <span class="chip-value">{{ muestra.sensacionEnBoca.join(', ') }}</span>
      </div>

      <!-- Valores Descriptivo/Afectivo -->
      <div v-if="muestra.intensidades.fragancia.afectiva !== null || muestra.intensidades.fragancia.descriptiva !== null" class="chip">
        <span class="chip-label">Fragancia:</span>
        <span v-if="muestra.intensidades.fragancia.afectiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.afectiva }}❤️</span>
        <span v-if="muestra.intensidades.fragancia.descriptiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.descriptiva }}📊</span>
      </div>

      <div v-if="muestra.intensidades.aroma.afectiva !== null || muestra.intensidades.aroma.descriptiva !== null" class="chip">
        <span class="chip-label">Aroma:</span>
        <span v-if="muestra.intensidades.aroma.afectiva !== null" class="chip-value">{{ muestra.intensidades.aroma.afectiva }}❤️</span>
        <span v-if="muestra.intensidades.aroma.descriptiva !== null" class="chip-value">{{ muestra.intensidades.aroma.descriptiva }}📊</span>
      </div>

      <div v-if="muestra.intensidades.sabor.afectiva !== null || muestra.intensidades.sabor.descriptiva !== null" class="chip">
        <span class="chip-label">Sabor:</span>
        <span v-if="muestra.intensidades.sabor.afectiva !== null" class="chip-value">{{ muestra.intensidades.sabor.afectiva }}❤️</span>
        <span v-if="muestra.intensidades.sabor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sabor.descriptiva }}📊</span>
      </div>

      <div v-if="muestra.intensidades.saborResidual.afectiva !== null || muestra.intensidades.saborResidual.descriptiva !== null" class="chip">
        <span class="chip-label">S.Residual:</span>
        <span v-if="muestra.intensidades.saborResidual.afectiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.afectiva }}❤️</span>
        <span v-if="muestra.intensidades.saborResidual.descriptiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.descriptiva }}📊</span>
      </div>

      <div v-if="muestra.intensidades.acidez.afectiva !== null || muestra.intensidades.acidez.descriptiva !== null" class="chip">
        <span class="chip-label">Acidez:</span>
        <span v-if="muestra.intensidades.acidez.afectiva !== null" class="chip-value">{{ muestra.intensidades.acidez.afectiva }}❤️</span>
        <span v-if="muestra.intensidades.acidez.descriptiva !== null" class="chip-value">{{ muestra.intensidades.acidez.descriptiva }}📊</span>
      </div>

      <div v-if="muestra.intensidades.dulzor.afectiva !== null || muestra.intensidades.dulzor.descriptiva !== null" class="chip">
        <span class="chip-label">Dulzor:</span>
        <span v-if="muestra.intensidades.dulzor.afectiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.afectiva }}❤️</span>
        <span v-if="muestra.intensidades.dulzor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.descriptiva }}📊</span>
      </div>

      <div v-if="muestra.intensidades.sensacionBoca.afectiva !== null || muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip">
        <span class="chip-label">Sensación:</span>
        <span v-if="muestra.intensidades.sensacionBoca.afectiva !== null" class="chip-value">{{ muestra.intensidades.sensacionBoca.afectiva }}❤️</span>
        <span v-if="muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sensacionBoca.descriptiva }}📊</span>
      </div>

      <div v-if="muestra.intensidades.impresionGlobal.afectiva !== null || muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip">
        <span class="chip-label">Impresión:</span>
        <span v-if="muestra.intensidades.impresionGlobal.afectiva !== null" class="chip-value">{{ muestra.intensidades.impresionGlobal.afectiva }}❤️</span>
        <span v-if="muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip-value">{{ muestra.intensidades.impresionGlobal.descriptiva }}📊</span>
      </div>

      <!-- Tazas no uniformes -->
      <div v-if="muestra.tazasNoUniformes.length > 0" class="chip chip-warning">
        <span class="chip-label">No Uniformes:</span>
        <span class="chip-value">{{ muestra.tazasNoUniformes.join(', ') }}</span>
      </div>

      <!-- Tazas defectuosas -->
      <div v-if="muestra.tazasDefectuosas.length > 0" class="chip chip-error">
        <span class="chip-label">Defectuosas:</span>
        <span class="chip-value">{{ muestra.tazasDefectuosas.join(', ') }}</span>
        <span v-if="muestra.defecto" class="chip-value">({{ muestra.defecto }})</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Muestra } from '~/types/catacion'

interface ResumenMuestraProps {
  /** Muestra a mostrar */
  muestra: Muestra
}

const props = defineProps<ResumenMuestraProps>()

// Formatear categorías de fragancia/aroma
const categoriasFragancia = computed(() => {
  return props.muestra.fraganciaAromaNotas.categorias.slice(0, 2).join(', ')
})

// Formatear categorías de sabor
const categoriasSabor = computed(() => {
  return props.muestra.saborNotas.categorias.slice(0, 2).join(', ')
})

// Clase CSS para el puntaje final basado en el valor
const puntajeClass = computed(() => {
  const puntaje = props.muestra.puntajeFinal
  if (puntaje >= 90) return 'puntaje-excelente'
  if (puntaje >= 85) return 'puntaje-muy-bueno'
  if (puntaje >= 80) return 'puntaje-bueno'
  if (puntaje >= 70) return 'puntaje-regular'
  return 'puntaje-bajo'
})
</script>

<style scoped>
.resumen-muestra {
  min-height: 36px;
}

.muestra-numero {
  font-size: 1rem;
}

/* Puntaje final */
.puntaje-final {
  border: 1px solid;
  min-width: 2.5rem;
  text-align: center;
}

.puntaje-excelente {
  background-color: color-mix(in srgb, #10b981 20%, transparent);
  border-color: #10b981;
  color: #10b981;
}

.puntaje-muy-bueno {
  background-color: color-mix(in srgb, #3b82f6 20%, transparent);
  border-color: #3b82f6;
  color: #3b82f6;
}

.puntaje-bueno {
  background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  border-color: #f59e0b;
  color: #f59e0b;
}

.puntaje-regular {
  background-color: color-mix(in srgb, #ef4444 20%, transparent);
  border-color: #ef4444;
  color: #ef4444;
}

.puntaje-bajo {
  background-color: color-mix(in srgb, #6b7280 20%, transparent);
  border-color: #6b7280;
  color: #6b7280;
}

/* Chips */
.chips-container {
  font-size: 0.75rem;
  line-height: 1;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
}

.chip-label {
  font-weight: 600;
  opacity: 0.75;
  color: var(--cata-text);
}

.chip-value {
  color: var(--cata-text);
  font-weight: 500;
}

.chip-warning {
  background-color: color-mix(in srgb, #f59e0b 15%, transparent);
  border-color: #f59e0b;
}

.chip-warning .chip-label,
.chip-warning .chip-value {
  color: #f59e0b;
}

.chip-error {
  background-color: color-mix(in srgb, #ef4444 15%, transparent);
  border-color: #ef4444;
}

.chip-error .chip-label,
.chip-error .chip-value {
  color: #ef4444;
}

/* Modo oscuro */
.dark .puntaje-excelente {
  background-color: color-mix(in srgb, #10b981 30%, transparent);
}

.dark .puntaje-muy-bueno {
  background-color: color-mix(in srgb, #3b82f6 30%, transparent);
}

.dark .puntaje-bueno {
  background-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

.dark .puntaje-regular {
  background-color: color-mix(in srgb, #ef4444 30%, transparent);
}

.dark .puntaje-bajo {
  background-color: color-mix(in srgb, #6b7280 30%, transparent);
}

.dark .chip {
  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
}

.dark .chip-warning {
  background-color: color-mix(in srgb, #f59e0b 20%, transparent);
}

.dark .chip-error {
  background-color: color-mix(in srgb, #ef4444 20%, transparent);
}

/* Responsive */
@media (max-width: 640px) {
  .muestra-numero {
    font-size: 0.875rem;
  }

  .chips-container {
    font-size: 0.7rem;
  }

  .chip {
    padding: 0.2rem 0.4rem;
  }
}
</style>