<script setup>
import Init from '@/pages/Init.vue'
import Launch from '@/pages/Launch.vue'
import Update from '@/pages/Update.vue'
import { dateZhCN, zhCN } from 'naive-ui'

const loading = ref(true)
const page = ref(null)

function load_config() {
  pywebview.api.get_page().then((value) => {
    page.value = value
    loading.value = false
  })
}

const log = ref('')
provide('log', log)
const log_ele = ref(null)
provide('log_ele', log_ele)
watch(log, () => {
  nextTick(() => {
    log_ele.value?.scrollTo({ position: 'bottom' })
  })
})

onMounted(() => {
  if (window.pywebview && pywebview.api) {
    load_config()
  } else {
    window.addEventListener('pywebviewready', load_config)
  }
  window.addEventListener('log', (e) => {
    log.value += e.detail.log
  })
})

function set_page(value) {
  log.value = ''
  pywebview.api.set_page(value)
}

const running = ref(false)
provide('running', running)

const steps = ref([])
provide('steps', steps)
</script>

<template>
  <n-config-provider :locale="zhCN" :dateLocale="dateZhCN">
    <n-spin v-if="loading" class="container">
      <template #description>加载中</template>
    </n-spin>
    <n-notification-provider v-else>
      <n-tabs
        type="card"
        placement="left"
        class="container"
        :default-value="page"
        @update:value="set_page"
      >
        <n-tab-pane :disabled="running" name="init" tab="初始化"><init /></n-tab-pane>
        <n-tab-pane :disabled="running" name="update" tab="更新代码"><update /></n-tab-pane>
        <n-tab-pane :disabled="running" name="launch" tab="启动程序"><launch /></n-tab-pane>
      </n-tabs>
    </n-notification-provider>
    <n-global-style />
  </n-config-provider>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>
