<template>
  <uni-popup ref="popup" type="center" maskBackgroundColor="rgba(0,0,0,0.9)">
    <view v-if="visible" class="preview-popup">
      <!-- 商品图片 -->
      <view class="pic center relative">
        <image :src="innerImgUrl" lazy-load></image>
        <view class="type-tag justify-center" v-if="innerTipTitle">{{ innerTipTitle }}</view>
      </view>

      <!-- 商品标题 -->
      <view class="title">
        <text class="hang1">{{ innerTitle }}</text>
      </view>

      <!-- 商品信息列表 -->
      <view class="info-list">
        <view class="info-item" v-if="innerProbability">{{ innerProbability }}</view>
        <view class="info-item" v-if="innerProductType">产品类型: {{ innerProductType }}</view>
        <view class="info-item" v-for="(item, index) in innerExtraInfo" :key="index">{{ item }}</view>
      </view>

      <!-- 关闭按钮 -->
      <view class="close icon" @click="closePopup">
        <image :src="$img('/static/img/close.png')" lazy-load></image>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'DetailPreviewPopup',
  props: {
    // 商品标题
    title: {
      type: String,
      default: ''
    },
    // 商品图片地址
    imgUrl: {
      type: String,
      default: ''
    },
    // 商品提示标签标题
    tipTitle: {
      type: String,
      default: ''
    },
    // 商品类型
    productType: {
      type: String,
      default: ''
    },
    // 商品概率
    probability: {
      type: String,
      default: ''
    },
    // 额外信息(可选)
    extraInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      // 内部数据，用于显示
      innerTitle: '',
      innerImgUrl: '',
      innerTipTitle: '',
      innerProductType: '',
      innerProbability: '',
      innerExtraInfo: []
    }
  },
  watch: {
    // 监听props变化，更新内部数据
    title(val) {
      this.innerTitle = val;
    },
    imgUrl(val) {
      this.innerImgUrl = val;
    },
    tipTitle(val) {
      this.innerTipTitle = val;
    },
    productType(val) {
      this.innerProductType = val;
    },
    probability(val) {
      this.innerProbability = val;
    },
    extraInfo(val) {
      this.innerExtraInfo = val;
    }
  },
  created() {
    // 初始化内部数据
    this.innerTitle = this.title;
    this.innerImgUrl = this.imgUrl;
    this.innerTipTitle = this.tipTitle;
    this.innerProductType = this.productType;
    this.innerProbability = this.probability;
    this.innerExtraInfo = this.extraInfo;
    
    // 监听全局预览事件
    uni.$on('global-preview-event', this.handleGlobalEvent);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    uni.$off('global-preview-event', this.handleGlobalEvent);
  },
  methods: {
    // 处理全局预览事件
    handleGlobalEvent(options) {
      console.log('收到全局预览事件', options);
      this.setPreviewData(options);
    },
    
    // 设置预览数据并打开弹窗
    setPreviewData(data) {
      console.log('设置预览数据', data);
      if (!data) return;
      
      // 更新内部数据
      if (data.title !== undefined) this.innerTitle = data.title;
      if (data.imgUrl !== undefined) this.innerImgUrl = data.imgUrl;
      if (data.tipTitle !== undefined) this.innerTipTitle = data.tipTitle;
      if (data.productType !== undefined) this.innerProductType = data.productType;
      if (data.probability !== undefined) this.innerProbability = data.probability;
      if (data.extraInfo !== undefined) this.innerExtraInfo = data.extraInfo;
      
      // 打开弹窗
      this.open();
    },
    
    // 打开弹窗
    open() {
      console.log('尝试打开弹窗', this.$refs.popup);
      this.visible = true;
      
      // 使用nextTick确保DOM更新后再打开弹窗
      this.$nextTick(() => {
        console.log('DOM已更新，准备打开弹窗');
        if (this.$refs.popup) {
          // 小程序环境下需要额外延迟
          setTimeout(() => {
            this.$refs.popup.open();
            console.log('弹窗已打开');
          }, 50);
        } else {
          console.error('popup ref不存在，请检查组件是否正确挂载');
          // 延迟后再次尝试
          setTimeout(() => {
            if (this.$refs.popup) {
              this.$refs.popup.open();
              console.log('弹窗已打开（延迟尝试）');
            }
          }, 300);
        }
      });
    },
    
    // 关闭弹窗
    closePopup() {
      this.visible = false;
      if (this.$refs.popup) {
        this.$refs.popup.close();
      }
      this.$emit('close');
    }
  }
}
</script>

<style lang="scss" scoped>
.preview-popup {
  position: relative;
  width: 570rpx;
  box-sizing: border-box;

  // 商品图片区域
  .pic {
    width: 570rpx;
    height: 598rpx;
    background: #FFFFFF;
    border-radius: 16rpx;

    image {
      width: 548rpx;
      height: 549rpx;
    }

    // 商品标签
    .type-tag {
      width: 68rpx;
      height: 32rpx;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 12rpx;
      left: 24rpx;
      font-weight: 400;
      font-size: 14rpx;
      color: #FFFFFF;
      box-sizing: border-box;
      background: url($imgurl + 'common/chouLabel.png') no-repeat 0 0 / 100% 100%;
    }
  }

  // 商品标题
  .title {
    margin: 40rpx auto 0;
    width: 564rpx;
    height: 60rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    border-radius: 12rpx;
    background: #F5F5F5;

    text {
      font-weight: 600;
      font-size: 24rpx;
      color: #333333;
    }
  }

  // 商品信息列表
  .info-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 20rpx 0 0;

    .info-item {
      margin-top: 14rpx;
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }

  // 关闭按钮
  .close {
    width: 48rpx;
    height: 48rpx;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 160%);
    
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style> 