<template>
  <!-- #ifdef H5 -->
  <teleport to="body">
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <root-portal externalClass="theme-ie">
      <!-- #endif -->
      <uv-popup ref="popupRef" mode="center" :close-on-click-overlay="true" :closeable="false" :round="16">
        <view class="theme-ie w-[88vw] box-border px-54 pt-60 pb-80 bg-white text-center relative overflow-hidden">
          <view class="relative z-1">
            <view class="text-40 text-fore-title font-bold">
              <text>当前无</text>
              <text class="text-primary">VIP</text>
              <text>权限</text>
            </view>
            <view class="mt-10 text-32 text-fore-light">开通会员，立即畅享专属权益与服务</view>
            <!-- <ie-button custom-class="mt-60" @click="handleBuy">升级VIP权限</ie-button> -->
            <ie-button type="info" custom-class="mt-40" @click="handleActivate">已线下购买，去激活</ie-button>
          </view>
          <ie-image :is-oss="true" src="/study-bg14.png" custom-class="absolute bottom-0 left-0 w-full h-full z-0"
            mode="aspectFill" />
        </view>
      </uv-popup>
      <!-- #ifdef MP-WEIXIN -->
    </root-portal>
    <!-- #endif -->
    <!-- #ifdef H5 -->
  </teleport>
  <!-- #endif -->
</template>
<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';
const { transferTo } = useTransferPage();
const popupRef = ref();
const open = () => {
  console.log('open');
  popupRef.value.open();
}
const close = () => {
  popupRef.value.close();
}
const handleBuy = () => {
  close();
}
const handleActivate = () => {
  close();
  transferTo('/pagesSystem/pages/card-verify/card-verify', {
    data: {}
  });
}
defineExpose({
  open,
  close
});
</script>
<style lang="scss" scoped></style>