<template>
  <view class="test-page">
    <view class="header">
      <text class="title">弹窗组件测试页面</text>
    </view>
    
    <view class="content">
      <view class="button-group">
        <button 
          class="btn btn-primary" 
          @click="showConfirmPopup = true"
        >
          显示确认弹窗
        </button>
        
        <button 
          class="btn btn-warning" 
          @click="showNoTimePopup = true"
        >
          显示无次数弹窗
        </button>
      </view>
    </view>
    
    <!-- 确认弹窗 -->
    <Xingmalabconfirmpop
      :visible="showConfirmPopup"
      title="确认发布"
      confirm-text="确认发布"
      cancel-text="取消"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      @close="showConfirmPopup = false"
    />
    
    <!-- 无次数弹窗 -->
    <Xingmalabnotimepop
      :visible="showNoTimePopup"
      title="发布次数已用完"
      @button-click="handleNoTimeButtonClick"
      @close="showNoTimePopup = false"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Xingmalabconfirmpop from '@/components/xingmaLab/Xingmalabconfirmpop.vue'
import Xingmalabnotimepop from '@/components/xingmaLab/Xingmalabnotimepop.vue'

// 弹窗显示状态
const showConfirmPopup = ref(false)
const showNoTimePopup = ref(false)

// 确认弹窗事件处理
const handleConfirm = () => {
  uni.showToast({
    title: '确认发布',
    icon: 'success'
  })
  showConfirmPopup.value = false
}

const handleCancel = () => {
  uni.showToast({
    title: '取消发布',
    icon: 'none'
  })
  showConfirmPopup.value = false
}

// 无次数弹窗事件处理
const handleNoTimeButtonClick = () => {
  uni.showToast({
    title: '发布次数已用完',
    icon: 'none'
  })
  showNoTimePopup.value = false
}
</script>

<style lang="less" scoped>
.test-page {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
  }
}

.content {
  .debug-info {
    margin-bottom: 30rpx;
    padding: 20rpx;
    background-color: #e0e0e0;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #555;

    .debug-title {
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .debug-item {
      margin-bottom: 5rpx;
    }
  }

  .button-group {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
    
    .btn {
      padding: 30rpx;
      border-radius: 16rpx;
      border: none;
      font-size: 32rpx;
      font-weight: 500;
      
      &.btn-primary {
        background-color: #007aff;
        color: white;
      }
      
      &.btn-warning {
        background-color: #ff3b30;
        color: white;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>
