<template>
  <view class="example-container">
    <view class="btn-group">
      <button class="btn" @click="openBasicPopup">基础弹窗</button>
      <button class="btn" @click="openCustomPopup">自定义弹窗</button>
    </view>
    
    <!-- 基础弹窗 -->
    <detail-popup ref="basicPopup">
      <view class="popup-content">
        <view class="popup-title">基础弹窗</view>
        <view class="popup-text">这是一个基础弹窗示例，使用了默认配置。</view>
        <button class="popup-btn" @click="$refs.basicPopup.close()">关闭</button>
      </view>
    </detail-popup>
    
    <!-- 自定义弹窗 -->
    <detail-popup 
      ref="customPopup"
      bgColor="#F5F5F5"
      width="650rpx"
      @open="onPopupOpen"
      @close="onPopupClose"
    >
      <view class="popup-content custom">
        <view class="popup-title">自定义弹窗</view>
        <view class="popup-text">这是一个自定义弹窗示例，修改了背景色和宽度。</view>
        <image class="popup-image" :src="$img1('common/chouTitle.png')" mode="aspectFit"></image>
        <button class="popup-btn custom-btn" @click="$refs.customPopup.close()">确定</button>
      </view>
    </detail-popup>
  </view>
</template>

<script>
import DetailPopup from './index';

export default {
  components: {
    DetailPopup
  },
  methods: {
    // 打开基础弹窗
    openBasicPopup() {
      this.$refs.basicPopup.open();
    },
    
    // 打开自定义弹窗
    openCustomPopup() {
      this.$refs.customPopup.open();
    },
    
    // 弹窗打开回调
    onPopupOpen() {
      console.log('自定义弹窗已打开');
    },
    
    // 弹窗关闭回调
    onPopupClose() {
      console.log('自定义弹窗已关闭');
    }
  }
}
</script>

<style lang="scss" scoped>
.example-container {
  padding: 30rpx;
  
  .btn-group {
    display: flex;
    justify-content: space-around;
    
    .btn {
      width: 280rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #3b3941;
      color: #FFFFFF;
      border-radius: 40rpx;
    }
  }
}

.popup-content {
  padding: 20rpx;
  
  .popup-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20rpx;
  }
  
  .popup-text {
    font-size: 28rpx;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 30rpx;
  }
  
  .popup-image {
    width: 100%;
    height: 150rpx;
    margin-bottom: 30rpx;
  }
  
  .popup-btn {
    width: 80%;
    height: 80rpx;
    line-height: 80rpx;
    background: #3b3941;
    color: #FFFFFF;
    border-radius: 40rpx;
    margin: 0 auto;
  }
  
  &.custom {
    padding: 30rpx;
    
    .popup-title {
      color: #333333;
    }
    
    .custom-btn {
      background: linear-gradient(90deg, #2dcbff 0%, #ff873a 100%);
    }
  }
}
</style> 