<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
import { useCounterStore } from '@/store/store'
import { useRouter } from 'vue-router'
const store = useCounterStore()
// store.getSystemInfo()
// store.getUserInfo()

const i = 'orientationchange' in window ? 'orientationchange' : 'resize'
const setViewHeight = () => {
  const windowVH = window.innerHeight / 100
  document.documentElement.style.setProperty('--vh', windowVH + 'px')
}
document.addEventListener('DOMContentLoaded', setViewHeight)
window.addEventListener(i, setViewHeight)
onLaunch(() => {
  store.token = uni.getStorageSync('token') || null
  store.userId = uni.getStorageSync('userId') || null
  store.userInfo = uni.getStorageSync('userInfo') || null

  // show()
  const router = useRouter()
  router.beforeEach((to, from, next) => {
    hide(next)
  })
  router.afterEach(() => {
    setTimeout(() => show(), 10)
  })
})
onShow(() => {})
onHide(() => {})

const hide = (callback) => {
  const classList = document.querySelector('uni-page').classList
  classList.add('animation-before', 'animation-leave')
  classList.remove('animation-show')
  setTimeout(() => {
    classList.remove('animation-before', 'animation-leave')
    callback && callback()
  }, 300)
}
const show = () => {
  const classList = document.querySelector('uni-page')?.classList
  classList.add('animation-before')
  setTimeout(() => {
    classList.add('animation-enter', 'animation-after', 'animation-show')
    setTimeout(() => {
      classList.remove('animation-before', 'animation-after', 'animation-enter')
    }, 300)
  }, 20)
}
</script>
<style lang="scss">
.uni-input-input {
  color: #fff;
}
.tabbar {
  border-radius: 0.625rem 0.625rem 0px 0px;
  // box-shadow: 0px 0px 5px 2px #f4f4f4;
}
body {
  background: linear-gradient(168deg, #08182b 0.74%, #1b5191 99.61%);
  // fill: linear-gradient(191deg, #f3e0eb 0.38%, #f2e7fd 10.66%, #fff 26.2%);
}
::v-deep .uni-toast__icon {
  margin: 0.625rem auto 0 !important;
}

.uni-modal {
  padding: 0 1.25rem 1.25rem 1.25rem;
  border-radius: 0.625rem;
  .uni-modal__ft:after {
    display: none;
  }
  .uni-modal__btn:after {
    display: none;
  }
  .uni-modal__btn_default {
    width: 8.4375rem;
    height: 3.0625rem;
    border-radius: 1.5625rem;
    background: #efefff;
    color: #6a69e9 !important;
    font-size: 1rem;
    margin-right: 0.625rem;
  }
  .uni-modal__btn_primary {
    width: 8.4375rem;
    height: 3.0625rem;
    border-radius: 1.5625rem;
    background: #6a69e9;
    font-size: 1rem;
    color: #fff !important;
  }
}

.up {
  color: $uni-text-color-red;
}
.down {
  color: $uni-text-color-green;
}
.ping {
  color: $uni-text-color;
}
.rotate {
  transform: rotate(180deg);
}
.nodata {
  font-size: $uni-font-size-lg;
  text-align: center;
  margin-top: 25.6px;
}
uni-tabbar {
  display: none;
}

/* #ifdef H5 */
uni-page {
  opacity: 1;
  transition: all 0.3s ease;
}

uni-page.animation-before {
  /* 在页面上使用 transform 会导致页面内的 fixed 定位渲染为 absolute，需要在动画完成后移除 */
  transform: translateY(0.625rem);
  opacity: 0;
}

uni-page.animation-leave {
  transition: all 0.3s ease;
}

uni-page.animation-enter {
  transition: all 0.3s ease;
}

uni-page.animation-show {
  opacity: 1;
}

uni-page.animation-after {
  /* 在页面上使用 transform 会导致页面内的 fixed 定位渲染为 absolute，需要在动画完成后移除 */
  transform: translateY(0);
}

/* #endif */
</style>
