<template>
  <Popup
    :modelValue="modelValue"
    @close="$emit('update:modelValue', false)"
    @update:modelValue="$emit('update:modelValue', $event)"
  >
    <div v-if="step === 1" v-frame-h="700" v-frame-w="500" class="relative">
      <img src="~/assets/images/desktop/uebersicht/popups/rechnung-einreichen-1-frame.png" />
      <button v-h:700="48" v-w:500="48" v-x:500="448" v-y:700="8" @click="$emit('update:modelValue', false)">
        <Spot />
      </button>
      <button v-h:700="121" v-w:500="468" v-x:500="16" v-y:700="501" @click="step++">
        <Spot />
      </button>
    </div>
    <div v-else-if="step === 2" v-frame-h="700" v-frame-w="500" class="relative">
      <img src="~/assets/images/desktop/uebersicht/popups/rechnung-einreichen-2-frame.png" />
      <button v-h:700="48" v-w:500="48" v-x:500="448" v-y:700="8" @click="$emit('update:modelValue', false)">
        <Spot />
      </button>
      <button v-h:700="48" v-w:500="48" v-x:500="16" v-y:700="636" @click="step--">
        <Spot />
      </button>
      <button v-h:700="40" v-w:500="206" v-x:500="33" v-y:700="406" @click="step++">
        <Spot />
      </button>
      <button v-h:700="40" v-w:500="205" v-x:500="258" v-y:700="406" @click="step++">
        <Spot />
      </button>
    </div>
    <div v-else-if="step === 3" v-frame-h="700" v-frame-w="500" class="relative">
      <img src="~/assets/images/desktop/uebersicht/popups/rechnung-einreichen-3-frame.png" />
      <button v-h:700="48" v-w:500="48" v-x:500="448" v-y:700="8" @click="$emit('update:modelValue', false)">
        <Spot />
      </button>
      <button v-h:700="48" v-w:500="48" v-x:500="16" v-y:700="636" @click="step--">
        <Spot />
      </button>
      <button v-h:700="40" v-w:500="86" v-x:500="398" v-y:700="640" @click="step++">
        <Spot />
      </button>
    </div>
    <div v-else-if="step === 4" v-frame-h="700" v-frame-w="500" class="relative">
      <img src="~/assets/images/desktop/uebersicht/popups/rechnung-einreichen-4-frame.png" />
      <button v-h:700="40" v-w:500="459.29" v-x:500="20" v-y:700="640" @click="$emit('update:modelValue', false)">
        <Spot />
      </button>
    </div>
  </Popup>
</template>

<script lang="ts" setup>
const step = ref(1)

defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
})

defineEmits<{
  'update:modelValue': [boolean]
}>()
</script>
