<template>
  <div class="phone-box" ref="containerRef">
    <img class="phone-bg" src="@/public/simulator/ios-phone.png" alt="">
    <div class="iphone-frame" :class="theme" id="capture-frame">
      <slot></slot>
    </div>
    <div v-if="!isVip" class="watermark-overlay"></div>
  </div>

</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'
import { ref } from 'vue'
import { useWatermarkGuard } from '@/hooks/useWatermarkGuard'

defineProps({
  theme: {
    type: String,
    default: 'light',
  }
})

const userStore = useUserStore()
const { isVip } = storeToRefs(userStore)

const containerRef = ref(null)
useWatermarkGuard(containerRef, isVip)
</script>

<style lang="scss" scoped>
$w: 375px;

.phone-box {
  width: 395px;
  height: 824px;
  position: relative;
  transform-origin: top center;
  transform: scale(calc(285/395));
  margin-bottom: calc(824px * (285 / 395) - 824px);

  .iphone-frame {
    position: relative;
    width: 375px;
    height: 812.98px;
    border-radius: 40px;
    background-color: var(--wx-bg-primary);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .phone-bg {
    position: absolute;
    width: 395px;
    height: 824px;
    top: -6px;
    left: -10px;
  }

  .watermark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    height: 812.98px;
    border-radius: 40px;
    background-image: url('@/public/common/watermaker.png');
    background-size: 125px 125px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 999;
  }

}
</style>
