<template>
  <view class="login-empty" v-if="!store.state.serveInfo.isNetWork">
    <jx-empty :title="notWifi" src="https://image.jxc4.com/image/85a01a6ee723403fae65cfa55441aaa9.png" color="#9b9b9b">
      <view
        class="first-login"
        hover-class="hoverLogin"
        hover-start-time="0"
        hover-stay-time="100"
        @tap="retry"
        >在试一次</view
      >
    </jx-empty>

    <jx-copyright></jx-copyright>
  </view>

  <view class="login-empty" v-else-if="store.state.serveInfo.isFirstLogin">
    <jx-empty :title="title" color="#9b9b9b">
      <view
        class="first-login"
        hover-class="hoverLogin"
        hover-start-time="0"
        hover-stay-time="1200"
        @tap="firstLogin"
        >立即登录</view
      >
    </jx-empty>

    <jx-copyright></jx-copyright>
  </view>
</template>

<script lang="ts" setup >
import { store } from '@/store'
import toast from '@/utils/toast'
import { onBeforeUnmount, ref } from 'vue'
function firstLogin() {
  uni.reLaunch({
    url: '/subPages/login/wxLogin/wxLogin',
  })
}

interface propsType {
  title?: string
}
defineProps<propsType>()

// 无无网络
const notWifi = ref<string>(`
没有检测到网络
请检查手机是否连上网络
`)

// 再试一次
let timer: any = null
function retry() {
  uni.showLoading({ title: '请稍后' })
  uni.getNetworkType({
    success: (res) => {
      if (res.networkType == 'none') {
        timer = setTimeout(() => {
          toast('未连接网络', 2)
          store.commit('serveInfo/setIsNetWorkS', false)
          clearTimeout(timer)
        }, 1200)
      } else {
        timer = setTimeout(() => {
          store.commit('serveInfo/setIsNetWorkS', true)
          clearTimeout(timer)
        }, 1200)
      }
    },
    complete: () => {
      timer = setTimeout(() => {
        uni.hideLoading()
        clearTimeout(timer)
      }, 1100)
    },
  })
}

onBeforeUnmount(() => {
  clearTimeout(timer)
})
</script>

<style lang="scss" scoped>
.login-empty {
  position: fixed;
  z-index: 99999999999;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}

.first-login {
  margin-top: 30rpx;
  background-color: $jx-primary;
  color: #fff;
  font-weight: bold;
  font-size: 35rpx;
  border: 2rpx solid #fff;
  padding: 15rpx 100rpx;
  border-radius: 100rpx;
}

.hoverLogin {
  background-color: #fff;
  border: 2rpx solid $jx-primary;
  color: $jx-primary;
}
</style>