hereconnect/src/views/CreateView.vue

<template>
  <div class="max-w-lg mx-auto py-6 px-4 md:px-6">
    <section class="content">
      <div class="max-w-lg mx-auto py-8">
        <!-- Секция выбора размещения -->
        <CreateSection isActive>
          <CreatePlacementSection
            v-model="placement"
            @nextStep="placement && activateSections('actions')"
          />
        </CreateSection>

        <!-- Секция выбора доступных действий -->
        <CreateSection :isActive="activeSteps.includes('actions')">
          <CreateActionsSection
            v-model="selectedActions"
            @nextStep="
              selectedActions.length &&
                activateSections(selectedActions.includes('sendMessage') ? 'delivery' : 'summary')
            "
          />
        </CreateSection>

        <!-- Секция выбора способа доставки -->
        <CreateSection
          v-if="selectedActions.includes('sendMessage')"
          :isActive="activeSteps.includes('delivery')"
        >
          <CreateDeliverySection
            v-model="deliveryMethod"
            @nextStep="deliveryMethod && activateSections('messages', 'summary')"
          />
        </CreateSection>

        <!-- Секция сообщений для отправки -->
        <CreateSection
          v-if="selectedActions.includes('sendMessage') && activeSteps.includes('messages')"
          :isActive="true"
        >
          <CreateMessagesSection :placement v-model="messages" />
        </CreateSection>

        <!-- Секция итогового резюме -->
        <CreateSection :isActive="activeSteps.includes('summary')">
          <CreateSummarySection
            :placement="placement"
            :actions="selectedActions"
            :deliveryMethod="deliveryMethod"
            :user_uuid="user_uuid"
            :predefinedMessage="selectedActions.includes('sendMessage') ? messages : undefined"
          />
        </CreateSection>

        <div class="h-[30dvh] md:h-[10dvh] overflow-hidden"></div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Шаги и состояния для работы с секциями
const activeSteps = ref(['placement'])

const selectedActions = ref<string[]>([])
const placement = ref('')
const deliveryMethod = ref('')
const messages = ref<string[]>([])
const user_uuid = 'example-user-uuid' // Временно захардкожено, заменить на динамическое

// Функция активации следующих шагов
function activateSections(...sections: string[]) {
  sections.forEach((section) => {
    if (!activeSteps.value.includes(section)) {
      activeSteps.value.push(section)
    }
  })
}
</script>