<template>
  <footer class="foot glass card">
    <div class="row">
      <button class="btn" :disabled="ops.length===0" @click="$emit('print')">Enviar a imprimir ({{ ops.length }})</button>
      <span class="muted">Se enviará la cola en orden.</span>
    </div>
    <pre class="json">{{ JSON.stringify(result, null, 2) }}</pre>
  </footer>
</template>

<script setup>
defineProps({ ops: { type: Array, required: true }, result: { type: Object, required: true } });
defineEmits(['print']);
</script>

<style scoped>
.foot { grid-area: footer; }
.glass { background: var(--glass); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.card { box-shadow: 0 8px 24px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05); }
.row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.btn { appearance: none; border: 1px solid var(--border); background: rgba(255,255,255,0.08); color: var(--fg); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.json { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 10px; white-space: pre-wrap; word-break: break-word; }
.muted { color: var(--muted); }
</style>

