<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'
import indexDB from '@/utils/indexDB'
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} - ${
        window.localStorage.getItem('project-name') ||
        import.meta.env.VITE_APP_TITLE
      }`
    } else {
      document.title =
        window.localStorage.getItem('project-name') ||
        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

window.addEventListener('beforeunload', function (e) {
  console.log(1111)
  // var confirmationMessage = '确定要离开此页面吗？';
  // e.returnValue = confirmationMessage;
  console.log(e.type, 'type')
  if (e.type === 'unload') {
    console.log('页面被关闭')
    // 删除所有缓存数据
    indexDB.deleteAll()
  } else if (e.type === 'beforeunload') {
    console.log('页面被刷新')
  }
  // return confirmationMessage;
})
</script>

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

<style>
:root {
  --el-color-primary: #0d76d4 !important;
}
</style>