<script lang="ts" setup>
  import { ref } from 'vue';
  import TableMode from './TableMode.vue';
  import CardMode from './CardMode.vue';
  import { EnumTableCardMode } from '/@/components/Widget';
  const mode = ref(EnumTableCardMode.CARD);

  const handleChangeMode = (flag: EnumTableCardMode) => {
    mode.value = flag;
  };
</script>

<template>
  <section>
    <CardMode v-if="mode === EnumTableCardMode.CARD" :mode="mode" @change-mode="handleChangeMode" />
    <TableMode
      v-if="mode === EnumTableCardMode.TABLE"
      :mode="mode"
      @change-mode="handleChangeMode"
    />
  </section>
</template>