<template>
  <div class="bg-white box-border w-full h-full flex">
    <SystemConfig @change=onChange />

    <component :is="currentComponent" />
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import SystemConfig from './components/SystemConfig/index.vue'
import AccountSetting from './components/AccountSetting/index.vue'
import Version from './components/Version/index.vue'
import ChannelSetting from './components/ChannelSetting/index.vue'
import RoomTypeSetting from './components/RoomTypeSetting/index.vue'

const currentComponent = shallowRef(AccountSetting)
const components: any = {
  AccountSetting,
  ChannelSetting,
  RoomTypeSetting,
  Version,
}
const onChange = ({ componentName }: any) => currentComponent.value = components[componentName]
</script>
