<template>
  <div v-for="(step, index) in steps" :key="index">
    {{ step }}
    <q-btn v-if="editable" icon="mdi-delete" @click="deleteStep(index)" />
  </div>
  <div v-if="editable" class="row q-gutter-sm">
    <q-input v-model="newStep" />
    <q-btn label="Schritt hinzufügen" @click="addStep" />
  </div>
</template>

<script lang="ts">
import { PropType, defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'BuildManual',
  props: {
    steps: {
      type: Array as PropType<Array<string>>,
      required: true,
    },
    editable: {
      type: Boolean,
      default: true,
    },
  },
  emits: {
    deleteStep: (index: number) => true,
    addStep: (val: string) => true,
  },
  setup(_, { emit }) {
    const newStep = ref('');
    function deleteStep(index: number) {
      emit('deleteStep', index);
    }
    function addStep() {
      emit('addStep', newStep.value);
      newStep.value = '';
    }
    return { newStep, addStep, deleteStep };
  },
});
</script>

<style scoped></style>
