<template>
  <aside class="side">
    <div class="row">
      <h2>Cola de impresión</h2>
      <div class="spacer"></div>
      <button class="btn ghost" @click="$emit('clear-ops')">Limpiar</button>
    </div>
    <div class="list">
      <CommandCard
        v-for="(op, i) in ops"
        :key="i"
        v-model="local[i]"
        @update:modelValue="(val) => onUpdate(i, val)"
        @move-up="$emit('move-up', i)"
        @move-down="$emit('move-down', i)"
        @remove="$emit('remove-op', i)"
      />
      <p v-if="ops.length===0" class="muted">No hay comandos en la cola.</p>
    </div>
  </aside>
</template>

<script setup>
import { reactive, watch } from 'vue';
import CommandCard from './CommandCard.vue';

const props = defineProps({ ops: { type: Array, required: true } });
const emit = defineEmits(['update-op','remove-op','move-up','move-down','clear-ops']);

const local = reactive([]);
watch(() => props.ops, (val) => { local.length = 0; val.forEach(v => local.push(v)); }, { immediate: true, deep: true });

function onUpdate(i, val) { emit('update-op', i, val); }
</script>

<style scoped>
.side { grid-area: sidebar; display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.btn { appearance: none; border: 1px solid var(--border); background: rgba(255,255,255,0.08); color: var(--fg); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.ghost { background: transparent; }
.list { display: grid; gap: 10px; }
.muted { color: var(--muted); }
</style>

