<template>
  <view class="view-popup">
    <!-- #ifdef MP-WEIXIN -->
    <view v-if="nav" style="width: 100%;background-color: #fff;" :style="{height: height + 'px'}"></view>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view v-if="nav" style="width: 100%;height: calc( var(--status-bar-height) + 44px );background-color: #fff;"></view>
    <!-- #endif -->
    <view class="center">
      <slot></slot>
      <view class="up" @click="close">
        <text>点击收起</text>
        <up-icon name="arrow-up"></up-icon>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from "vue"

  const props = defineProps({
    nav: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: false
    }
  })

  const emit = defineEmits(['close', 'click'])
  const close = () => {
    emit('close')
  }

  // #ifdef MP-WEIXIN
  const height = ref(0);
  uni.getSystemInfo({
    success: (res) => {
      // 获取手机顶部状态栏的高度
      const statusBarHeight = res.statusBarHeight || 0;

      // 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;

      // 计算顶部图标距离
      const topIconDistance = statusBarHeight + navBarHeight;

      // 打印顶部图标距离
      console.log('顶部图标距离:', topIconDistance);
      height.value = topIconDistance;
    },
    fail: (err) => {
      console.error('获取系统信息失败:', err);
    },
  });
  // #endif
</script>

<style scoped lang="scss">
  .view-popup {
    height: 100vh;
    width: 100%;
    background-color: rgba(#000, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

    .center {
      animation: slideDown 0.3s forwards;
    }

    .up {
      width: 100%;
      height: 80rpx;
      background-color: #fff;
      border-radius: 0 0 28rpx 28rpx;
      border-top: 1rpx solid #f6f6f6;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
    }
  }

  @keyframes slideDown {
    from {
      transform: translateY(-100%);
      /* 初始状态：向上偏移100% */
    }

    to {
      transform: translateY(0);
      /* 最终状态：无偏移 */
    }
  }
</style>