<template>
  <div class="ultraman_wrap_bg">
    <div class="ultraman_header">
      <img class="ultraman_header_title" src="@/static/home/logo.png" alt="" />
    </div>

    <div class="ultraman_logo_blk">
      <img class="ultraman_logo" src="@/static/home/bi.png" alt="" />
    </div>

    <div class="ultraman_content_blk">
      <img class="content-img" src="@/static/xbxz/syq.png" alt="" />
      <div class="ultraman_btn" @click="handleApply">
        {{ userInfo.extend1 == 2 ? '立即开户' :
          userInfo.extend1 == 3 ? '开户成功' :
            '申请使用' }}
      </div>
    </div>
    <div class="ultraman_foot">
      <img src="@/static/xbgz/gongan.png" alt="" />
    </div>
    <LandscapePopup ref="popup" :type="popupType" />
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { usePageHook } from '@/hooks/usePageHook'
import request from '@/utils/request'
const popup = ref(null)
const popupType = ref('app')
const router = useRouter()
const userInfo = ref(JSON.parse(sessionStorage.getItem('userInfo') || '{}'))
const handleApply = () => {
  if (userInfo.value.data != 'true') {
    showToast('请先进行实名认证');
    setTimeout(() => {
      router.push('/user/shiming');
    }, 2000);
    return;
  }
  if (userInfo.value.extend1 == 2) {
    router.push('/user/payUp?amount=500&paytitle=开户预存&paytype=1')
    return false
  } else if (userInfo.value.extend1 == 3) {
    return false
  } else {
    request.get('/yw2/tjsysq').then(res => {
      if (res.code == 200) {
        showToast('申请成功');
        request.get('/system/user/').then(res => {
          if (res.code == 200) {
            userInfo.value = res
            sessionStorage.setItem('userInfo', JSON.stringify(userInfo.value))
          }
        })
      }
    })
  }
}

usePageHook({
  onPageShow: () => {
    userInfo.value = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
    if (userInfo.value.data != 'true') {
      popupType.value = 'shiming'
      popup.value?.open()
    }
  }
})

</script>

<style scoped>
/* 继承基础样式 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ultraman_wrap_bg {
  max-width: 550px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 30px;
  background-position: center;
  overflow: scroll;
  background: url('@/static/home/beijing.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.ultraman_wrap_bg::-webkit-scrollbar {
  display: none;
}

.ultraman_header {
  width: 50%;
  margin: 0 auto;
  margin-top: 30px;
}

.ultraman_header_title,
.ultraman_logo {
  width: 100%;
}

.ultraman_logo_blk {
  width: 67%;
  margin: 0 auto;
  margin-top: 20px;
}

.ultraman_content_blk {
  width: 88%;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 15px;
  background-color: #fefefe;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-img {
  width: 100%;
  margin-bottom: 20px;
}

.ultraman_btn {
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
  padding: 12px 36px;
  text-align: center;
  letter-spacing: 1.3px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(107, 107, 107, 0.3),
    2px 2px 0 rgba(101, 101, 101, 0.2);
  background: url('@/static/xbxz/shenqing.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}

.ultraman_foot {
  width: 70%;
  margin: 0 auto;
  margin-top: 1rem;
  text-align: center;
}

.ultraman_foot img {
  max-width: 100%;
}
</style>