<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import useMainStore from '@/store/main'
import useMainLayoutStore from '@/store/layout'
import LockScreen from '@/layout/LockScreen.vue'
import LoadingFlag from '@/components/common/LoadingFlag.vue'
import RowNextBottomDialog from '@/components/common/RowNextBottomDialog.vue'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const mainStore = useMainStore()
const mainLayoutStore = useMainLayoutStore()

if (mainStore.loginInfo) {
  // mainStore.getMyUserInfo()
  mainStore.getUserMarkConfig()
  mainLayoutStore.getRenderMenuList()
}
window.addEventListener('online', () => {
  mainStore.setOnline(true)
})
window.addEventListener('offline', () => {
  mainStore.setOnline(false)
})

function getParentNodeIsScroll(el: any): any {
  if (el.className.includes('scroll-auto')) {
    return el
  } else {
    return getParentNodeIsScroll(el.parentNode)
  }
}
function keyBoardScroll(e: any) {
  let imgWrap = document.querySelector('.img-wrap')
  if (!imgWrap) {
    return
  }
  let word = e.key
  if (word !== 'ArrowDown' && word !== 'ArrowUp') {
    return
  }
  let pWrap = getParentNodeIsScroll(imgWrap)
  let t = (pWrap as any).scrollTop
  if (word === 'ArrowDown') {
    t += 100
  } else if (word === 'ArrowUp') {
    t -= 100
  } else {
    // e.returnValue = false
  }
  // pWrap.scrollTop = t
  pWrap.scrollTo({
    left: 0,
    top: t,
    behavior: 'smooth',
  })
}
onMounted(() => {
  // document.addEventListener('keydown', keyBoardScroll)
})
</script>

<template>
  <el-config-provider :locale="zhCn">
    <!-- <RouterView></RouterView> -->
    <router-view #default="{ Component }">
      <keep-alive :include="mainStore.keepAliveViews">
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <lock-screen v-if="mainStore.lockScreenStatus"></lock-screen>
    <loading-flag v-if="mainStore.globalLoading"></loading-flag>
    <row-next-bottom-dialog />
  </el-config-provider>
</template>

<style scoped lang="scss"></style>
