<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { computed } from 'vue'
import { RouterView, useRoute } from 'vue-router'

import InAppBrowserPrompt from './components/InAppBrowserPrompt.vue'
import AdminLayout from './layouts/AdminLayout.vue'
import AppLayout from './layouts/AppLayout.vue'

const route = useRoute()
const layout = computed(() => {
  if (route.path === '/m' || route.path.startsWith('/m/')) {
    return 'blank'
  }

  return route.meta.layout || 'app'
})
</script>

<template>
  <ElConfigProvider :locale="zhCn">
    <AdminLayout v-if="layout === 'admin'">
      <RouterView />
    </AdminLayout>
    <RouterView v-else-if="layout === 'blank'" />
    <AppLayout v-else>
      <RouterView />
    </AppLayout>
    <InAppBrowserPrompt />
  </ElConfigProvider>
</template>
