<template>
  <view class="role-entry-page">
    <!-- 全屏背景图 -->
    <image :src="config.baseUrl_api + '/fs/static/img/home_bg.png'" class="page-bg" mode="aspectFill"></image>

    <!-- 顶部 Logo 区域 -->
    <!-- <view class="header-wrapper">
      <view class="logo-box">
        <image :src="config.loginImage_api + '/fs/static/dg/ztx_b.svg'" class="logo" mode="aspectFit"></image>
      </view>
    </view> -->

    <!-- 功能按钮区域 -->
    <view class="btn-container">
      <view
        class="entry-btn"
        :class="{ active: activeEntry === 'unit' }"
        @click="goUnitLogin"
      >
        <image :src="activeEntry === 'unit' ? '/static/img/home_btn2.png' : '/static/img/home_btn.png'" class="btn-bg" mode="scaleToFill"></image>
        <text>单位会员入口</text>
      </view>

      <view
        class="entry-btn"
        :class="{ active: activeEntry === 'personal' }"
        @click="showLoginPopup"
      >
        <image :src="activeEntry === 'personal' ? '/static/img/home_btn2.png' : '/static/img/home_btn.png'" class="btn-bg" mode="scaleToFill"></image>
        <text>个人会员入口</text>
      </view>
    </view>

    <!-- 个人会员登录注册弹框 -->
    <uni-popup ref="loginPopup" :mask-click="true" type="center" @change="handlePopupChange">
      <view class="login-popup-content">
        <!-- <view class="popup-title">请选择办理方式</view> -->
        <view class="popup-btn active-btn" @click="goToPage('/personal/addVip_per')">
          个人会员注册
        </view>
        <view class="popup-btn plain-btn" @click="goToPage('/personal/home')">
          个人会员登录
        </view>
      </view>
    </uni-popup>

  </view>
</template>
<script setup>
import {ref} from 'vue'
import {onShow} from '@dcloudio/uni-app'
import config from '@/config.js'

const loginPopup = ref(null)
const activeEntry = ref('')

onShow(() => {
  uni.hideLoading();
})

const showLoginPopup = () => {
  activeEntry.value = 'personal'
  loginPopup.value.open()
}

const goUnitLogin = () => {
  activeEntry.value = 'unit'
  uni.navigateTo({
    url: '/login/loginC',
  })
}

const goToPage = (url) => {
  loginPopup.value?.close()
  uni.navigateTo({
    url,
  })
}

const handlePopupChange = (e) => {
  if (!e.show && activeEntry.value === 'personal') {
    activeEntry.value = ''
  }
}
</script>
<style lang="scss" scoped>
.role-entry-page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 20rpx 0;
  box-sizing: border-box;
  overflow: hidden;
}

.page-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.header-wrapper {
  text-align: center;
  // padding: 40rpx 0;
  border-radius: 16rpx;
  margin-top: 100rpx;
}

.btn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding-top: 1040rpx;
  gap: 52rpx;
}

.entry-btn {
  position: relative;
  width: 424rpx;
  height: 86rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2f2f2f;
  font-size: 34rpx;
  font-weight: 700;
  letter-spacing: 2rpx;
}

.entry-btn.active {
  color: #fff;
}

.btn-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.entry-btn text {
  position: relative;
  z-index: 1;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-content {
  color: white;
  font-size: 28rpx;
}

.login-popup-content {
  width: 560rpx;
  background: #fff;
  border-radius: 28rpx;
  padding: 42rpx 42rpx 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 20rpx 60rpx rgba(50, 0, 0, 0.25);
}

.popup-title {
  margin-bottom: 22rpx;
  color: #222;
  font-size: 34rpx;
  font-weight: 700;
}

.popup-btn {
  position: relative;
  width: 424rpx;
  height: 86rpx;
  line-height: 86rpx;
  text-align: center;
  border-radius: 16rpx;
  font-size: 34rpx;
  font-weight: 700;
  margin: 18rpx 0;
  box-sizing: border-box;
}

.active-btn {
  background: linear-gradient(90deg, #ff9a00 0%, #e50012 100%);
  color: #fff;
}

.plain-btn {
  background: #fff;
  color: #2f2f2f;
  border: 4rpx solid #0b94d2;
  box-shadow: inset 4rpx 0 0 #f7a100;
}
</style>