<template>
  <div class="flex flex-col h-b100">
    <DramaHeader @change-tab="changeTab" :indexVal="stepVal" />
    <div class="flex-1 overflow-y-auto">
      <StepOne v-if="stepVal === 0" @next="next" />
      <StepTwo v-if="stepVal === 1" @next="next" />
      <StepThreeFour v-if="stepVal === 2 || stepVal === 3" :stepVal="stepVal" @next="next"/>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import DramaHeader from './components/DramaHeader.vue';
import StepOne from './components/StepOne.vue';
import StepTwo from './components/StepTwo.vue';
import StepThreeFour from './components/StepThreeFour.vue';

const stepVal = ref(0);
const changeTab = (val: number) => {
  stepVal.value = val;
}

const next = (val: number) => {
  stepVal.value = val;
}


</script>
<style lang="scss" scoped>

</style>