<template>
  <wd-config-provider class="h-full" :themeVars="themeVars">
    <view class="" v-if="!isConnected&&configStore.showNetworkAnomaly">
      <navbar :fixed="false" :title="t('navbar-network-anomaly')"/>
    </view>
    <slot v-else/>
  </wd-config-provider>
  <wd-toast/>
  <wd-message-box/>
</template>

<script lang="ts" setup>
import type {ConfigProviderThemeVars} from 'wot-design-uni'
import {useConfigStore} from "@/store";

const {t} = useI18n()
const configStore = useConfigStore()
const isConnected = ref(true)

const themeVars: ConfigProviderThemeVars = {
  colorTheme: '#333',
  buttonPrimaryBgColor: '#14181B',
}

const OnNetworkStatusChange = (res: any) => {
  console.log('=>(useNetworkStatusChange)', res)
  isConnected.value = !!res.isConnected
}

onLoad(() => {
  uni.onNetworkStatusChange(OnNetworkStatusChange)
})

onShow(() => {
  uni.getNetworkType({
    success: function (res) {
      console.log('networkType', res.networkType);
    }
  });
})

onUnload(() => {
  if (configStore.showNetworkAnomaly) {
    configStore.showNetworkAnomaly = false
  }
  uni.offNetworkStatusChange(OnNetworkStatusChange)
})
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
  font-family: 'UberMove', sans-serif;
}

.poynter-oldstyle-text {
  font-family: 'UberMove', sans-serif;
}


.helvetica-now-text {
  font-family: 'UberMove', sans-serif;
}

/* #endif */
</style>

