<template>
  <layout>
    <div class="bg-white box-border w-full h-full flex rounded-[16px]">
      <SystemConfig @change=onChange />
      <component :is="currentComponent" />
    </div>
  </layout>
</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 RoomTypeSetting from './components/RoomTypeSetting/index.vue'

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