<script lang="ts" setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import hotkeys from 'hotkeys-js'
import eventBus from './utils/eventBus'
import useSettingsStore from '@/store/modules/settings'
import useMenuStore from '@/store/modules/menu'

const settingsStore = useSettingsStore()
const $router = useRouter()
const buttonConfig = ref({
  autoInsertSpace: true,
})

// 侧边栏主导航当前实际宽度
const mainSidebarActualWidth = computed(() => {
  let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
  if (['head', 'single', 'top'].includes(settingsStore.menu.menuMode)) {
    actualWidth = 0
  }
  return `${actualWidth}px`
})

// 侧边栏次导航当前实际宽度
const subSidebarActualWidth = computed(() => {
  let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
  if (settingsStore.menu.menuMode === 'top') {
    actualWidth = 0
  }
  else if (settingsStore.menu.subMenuCollapse) {
    actualWidth = 55
  }
  return `${actualWidth}px`
})

watch(() => settingsStore.app.colorScheme, () => {
  if (settingsStore.app.colorScheme === 'dark') {
    document.documentElement.classList.add('dark')
  }
  else {
    document.documentElement.classList.remove('dark')
  }
}, {
  immediate: true,
})

watch(() => settingsStore.mode, () => {
  if (settingsStore.mode === 'pc') {
    settingsStore.$patch((state) => {
      state.menu.subMenuCollapse = settingsStore.subMenuCollapseLastStatus
    })
  }
  else if (settingsStore.mode === 'mobile') {
    settingsStore.$patch((state) => {
      state.menu.subMenuCollapse = true
    })
  }
  document.body.setAttribute('data-mode', settingsStore.mode)
}, {
  immediate: true,
})

watch(() => settingsStore.menu.menuMode, () => {
  document.body.setAttribute('data-menu-mode', settingsStore.menu.menuMode)
}, {
  immediate: true,
})

watch([
  () => settingsStore.app.enableDynamicTitle,
  () => settingsStore.title,
], () => {
  if (settingsStore.app.enableDynamicTitle && settingsStore.title) {
    const title = settingsStore.title
    document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
  }
  else {
    document.title = import.meta.env.VITE_APP_TITLE
  }
}, {
  immediate: true,
})

onMounted(() => {
  // // 浏览器访问当前位置
  // if ('geolocation' in navigator) {
  //   navigator.geolocation.getCurrentPosition(function (position) {
  //     // 允许
  //     console.log('纬度: ', position.coords.latitude)
  //     console.log('经度: ', position.coords.longitude)
  //   }, function (error) {
  //     // 拒绝
  //     console.error("Error Code = " + error.code + " - " + error.message);
  //   })
  // } else {
  //   console.error("Geolocation is not supported by this browser.")
  // }
  settingsStore.setMode(document.documentElement.clientWidth)
  window.onresize = () => {
    settingsStore.setMode(document.documentElement.clientWidth)
    // 监听浏览器类型变化 刷新浏览器
    const userAgent = navigator.userAgent || navigator.vendor || window.opera
    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
      $router.push('/')
      setTimeout(() => {
        window.location.reload()
      }, 1000)
    }
  }
  hotkeys('alt+i', () => {
    eventBus.emit('global-system-info-toggle')
  })
})
const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
</script>

<template>
  <el-config-provider :locale="zhCn" :size="settingsStore.app.elementSize" :button="buttonConfig">
    <router-view
      :style="{
        '--g-main-sidebar-actual-width': mainSidebarActualWidth,
        '--g-sub-sidebar-actual-width': subSidebarActualWidth,
      }"
    />
    <system-info v-if="browserType !== 'mobile'" />
  </el-config-provider>
</template>