<script setup lang="ts">
  import { ref } from 'vue';
  import { PageMode } from './config.data';
  import ListMode from './ListMode.vue';
  import SplitScreenMode from './SplitScreenMode.vue';
  const mode = ref<PageMode>(PageMode.SPLIT_SCREEN_MODE);

  const handleSwitchMode = (key: PageMode) => {
    mode.value = key;
  };
</script>

<template>
  <div>
    <SplitScreenMode
      :mode="mode"
      v-if="mode == PageMode.SPLIT_SCREEN_MODE"
      @switchMode="handleSwitchMode"
    />
    <ListMode v-if="mode === PageMode.LIST_MODE" @switchMode="handleSwitchMode" />
  </div>
</template>