<script setup lang="ts">
import { provide, computed, watch, onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { ComponentSize, ElConfigProvider, ElMessageBox } from 'element-plus'
import { useLocaleStore } from '@/store/modules/locale'
import { useWindowSize, useFullscreen } from '@vueuse/core'
import { useAppStore } from '@/store/modules/app'
import { setCssVar } from '@/utils'
import { useDesign } from '@/hooks/web/useDesign'
import { isMobile } from '@/utils/domUtils'

const { variables } = useDesign()

const appStore = useAppStore()

const props = defineProps({
  size: propTypes.oneOf<ComponentSize>(['default', 'small', 'large']).def('default')
})

const mobile_landscape = import.meta.env.VITE_MOBILE_LANDSCAPE === 'true'

provide('configGlobal', props)

// 初始化所有主题色
onMounted(() => {
  appStore.setCssVarTheme()
})

const { width } = useWindowSize()
const { toggle } = useFullscreen()

const setFullScreen = () => {
  appStore.setFullscreen(true)
  toggle()
}

// 监听窗口变化
watch(
  () => width.value,
  (width: number) => {
    if (isMobile() && mobile_landscape) {
      if (!appStore.getMobile) {
        appStore.setMobile(true)
      }
      setCssVar('--left-menu-min-width', '0')
      appStore.setCollapse(true)
      appStore.getLayout !== 'classic' ? appStore.setLayout('classic') : undefined
    } else {
      appStore.getMobile ? appStore.setMobile(false) : undefined
      setCssVar('--left-menu-min-width', '64px')
    }
  },
  {
    immediate: true
  }
)

// 多语言相关
const localeStore = useLocaleStore()

const currentLocale = computed(() => localeStore.currentLocale)

const onFullscreenChange = () => {
  if (appStore.getMobile && !document.fullscreenElement) appStore.setFullscreen(false)
}

const isShow = computed(() => {
  return appStore.getMobile && !appStore.getFullscreen && document.fullscreenElement === null
})
onMounted(() => {
  if (appStore.getMobile) window.addEventListener('fullscreenchange', onFullscreenChange)
})

onUnmounted(() => {
  if (appStore.getMobile) window.removeEventListener('fullscreenchange', onFullscreenChange)
})
</script>

<template>
  <ElConfigProvider
    :namespace="variables.elNamespace"
    :locale="currentLocale.elLocale"
    :message="{ max: 5 }"
    :size="size"
  >
    <slot></slot>
  </ElConfigProvider>
  <div
    v-if="isShow"
    class="w-100% h-100% pos-fixed top-0 right-0 z-9 flex justify-center items-center bg-#000000"
    style="background-color: rgb(0 0 0 / 50%)"
  >
    <div class="h-40% w-45% rounded-16px bg-white p-80px p-t-60px p-b-60px">
      <div class="text-78px c-#303133 h-30%">全屏显示</div>
      <div class="text-54px flex items-center c-#606266 h-30%">手机端需要开启全屏显示</div>
      <div class="w-100% h-40% flex justify-end items-end">
        <button
          @click="setFullScreen"
          class="w-300px h-110px text-42px bg-#66b1ff b-none rounded-16px c-white cursor-pointer flex justify-center items-center"
          >确认开启</button
        >
      </div>
    </div>
  </div>
</template>
