<template>
  <div class="flex flex-col h-b100">
    <DramaHeader @change-tab="changeTab" :indexVal="indexVal" />
    <div class="flex-1 overflow-y-auto">
      <StepOne v-if="indexVal === 0" @next="next" />
      <StepTwo v-if="indexVal === 1" @next="next" />
      <StepThree v-if="indexVal === 2" />
      <StepFour v-if="indexVal === 3" />
    </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 StepThree from './components/StepThree.vue';
import StepFour from './components/StepFour.vue';

const indexVal = ref(2);
const changeTab = (val: number) => {
  indexVal.value = val;
}

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


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

</style>