<template>
  <uni-popup ref="popupbase" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
    <view v-if="visible" class="detail-popup" :style="{
      width: width,
      backgroundColor: bgColor,
      maxHeight: '80vh',
      overflowY: 'auto'
    }">
      <!-- 默认插槽，可以设置弹窗的内容 -->
      <slot></slot>
      
      <!-- 关闭按钮 -->
      <view class="close-btn" @click="close" v-if="showClose">
        <image :src="$img1('common/close.png')" mode="aspectFit"></image>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'DetailPopup',
  props: {
    // 自定义弹窗背景色
    bgColor: {
      type: String,
      default: '#FFFFFF'
    },
    // 自定义弹窗宽度
    width: {
      type: String,
      default: '570rpx'
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false
    }
  },
  created() {
    // 可以在这里初始化数据
  },
  methods: {
    // 打开弹窗方法
    open() {
      this.visible = true;
      
      // 使用nextTick确保DOM更新后再打开弹窗
      this.$nextTick(() => {
        if (this.$refs.popupbase) {
          // 小程序环境下需要额外延迟
          setTimeout(() => {
            this.$refs.popupbase.open();
          }, 50);
        } else {
          console.error('popup ref不存在，请检查组件是否正确挂载');
          // 延迟后再次尝试
          setTimeout(() => {
            if (this.$refs.popupbase) {
              this.$refs.popupbase.open();
            }
          }, 300);
        }
      });
      
      // 触发open事件
      this.$emit('open');
    },
    
    // 关闭弹窗方法
    close() {
      this.visible = false;
      if (this.$refs.popupbase) {
        this.$refs.popupbase.close();
      }
      
      // 触发close事件
      this.$emit('close');
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-popup {
  position: relative;
  border-radius: 16rpx;
  padding: 30rpx;
  box-sizing: border-box;
  
  // 关闭按钮
  .close-btn {
    width: 48rpx;
    height: 48rpx;
    position: absolute;
    left: 50%;
    bottom: -80rpx;
    transform: translateX(-50%);
    
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style> 