<template>
  <PopupMobile
    :modelValue="modelValue"
    @close="$emit('update:modelValue', false)"
    @update:modelValue="$emit('update:modelValue', $event)"
  >
    <div v-if="step === 1" v-hm="809" v-wm="393" class="relative">
      <img src="~/assets/images/mobile/uebersicht/popups/rechnung-einreichen-1-frame.png" />
      <button v-h:809="48" v-w:393="48" v-x:393="341" v-y:809="8" @click="$emit('update:modelValue', false)">
        <Spot />
      </button>
      <button v-h:809="145" v-w:393="360" v-x:393="17" v-y:809="547" @click="step++">
        <Spot />
      </button>
    </div>
    <div v-else-if="step === 2" v-hm="802" v-wm="393" class="relative">
      <img src="~/assets/images/mobile/uebersicht/popups/rechnung-einreichen-2-frame.png" />
      <button v-h:802="48" v-w:393="48" v-x:393="341" v-y:802="8" @click="$emit('update:modelValue', false)">
        <Spot />
      </button>
      <button v-h:802="48" v-w:393="48" v-x:393="16" v-y:802="742" @click="step--">
        <Spot />
      </button>
      <button v-h:802="40" v-w:393="157" v-x:393="32" v-y:802="422" @click="step++">
        <Spot />
      </button>
      <button v-h:802="40" v-w:393="156" v-x:393="204" v-y:802="422" @click="step++">
        <Spot />
      </button>
    </div>
    <div v-else-if="step === 3" v-hm="802" v-wm="393" class="relative">
      <img src="~/assets/images/mobile/uebersicht/popups/rechnung-einreichen-3-frame.png" />
      <button v-h:802="48" v-w:393="48" v-x:393="341" v-y:802="8" @click="$emit('update:modelValue', false)">
        <Spot />
      </button>
      <button v-h:802="48" v-w:393="48" v-x:393="16" v-y:802="742" @click="step--">
        <Spot />
      </button>
      <button v-h:802="40" v-w:393="99" v-x:393="278" v-y:802="746" @click="step++">
        <Spot />
      </button>
    </div>
    <div v-else-if="step === 4" v-hm="802" v-wm="393" class="relative">
      <img src="~/assets/images/mobile/uebersicht/popups/rechnung-einreichen-4-frame.png" />
      <button v-h:802="40" v-w:393="361" v-x:393="16" v-y:802="746" @click="$emit('update:modelValue', false)">
        <Spot />
      </button>
    </div>
  </PopupMobile>
</template>

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

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

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