<template>
  <view class="example-page">
    <view class="header">
      <text class="title">XingmaLab 弹窗组件示例</text>
    </view>
    
    <view class="content">
      <view class="section">
        <text class="section-title">确认弹窗组件</text>
        <view class="button-group">
          <button 
            class="btn btn-primary" 
            @click="showBasicConfirm = true"
          >
            基础确认弹窗
          </button>
          
          <button 
            class="btn btn-secondary" 
            @click="showCustomConfirm = true"
          >
            自定义文本弹窗
          </button>
          
          <button 
            class="btn btn-warning" 
            @click="showDeleteConfirm = true"
          >
            删除确认弹窗
          </button>
        </view>
      </view>
      
      <view class="section">
        <text class="section-title">无时间弹窗组件</text>
        <view class="button-group">
          <button 
            class="btn btn-info" 
            @click="showNoTime = true"
          >
            显示无时间弹窗
          </button>
          
          <button 
            class="btn btn-success" 
            @click="showCustomNoTime = true"
          >
            自定义标题弹窗
          </button>
        </view>
      </view>
    </view>
    
    <!-- 基础确认弹窗 -->
    <Xingmalabconfirmpop
      :visible="showBasicConfirm"
      @confirm="handleBasicConfirm"
      @cancel="handleBasicCancel"
      @close="showBasicConfirm = false"
    />
    
    <!-- 自定义文本弹窗 -->
    <Xingmalabconfirmpop
      :visible="showCustomConfirm"
      title="自定义操作"
      confirm-text="确定执行"
      cancel-text="暂不执行"
      @confirm="handleCustomConfirm"
      @cancel="handleCustomCancel"
      @close="showCustomConfirm = false"
    />
    
    <!-- 删除确认弹窗 -->
    <Xingmalabconfirmpop
      :visible="showDeleteConfirm"
      title="删除确认"
      confirm-text="删除"
      cancel-text="取消"
      @confirm="handleDeleteConfirm"
      @cancel="handleDeleteCancel"
      @close="showDeleteConfirm = false"
    />
    
    <!-- 无时间弹窗 -->
    <Xingmalabnotimepop
      :visible="showNoTime"
      @button-click="handleNoTimeButtonClick"
      @close="showNoTime = false"
    />
    
    <!-- 自定义标题无时间弹窗 -->
    <Xingmalabnotimepop
      :visible="showCustomNoTime"
      title="系统繁忙"
      @button-click="handleCustomNoTimeButtonClick"
      @close="showCustomNoTime = false"
    />
  </view>
</template>

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

// 确认弹窗显示状态
const showBasicConfirm = ref(false)
const showCustomConfirm = ref(false)
const showDeleteConfirm = ref(false)

// 无时间弹窗显示状态
const showNoTime = ref(false)
const showCustomNoTime = ref(false)

// 基础确认弹窗事件处理
const handleBasicConfirm = () => {
  uni.showToast({
    title: '用户点击了确认',
    icon: 'success'
  })
  showBasicConfirm.value = false
}

const handleBasicCancel = () => {
  uni.showToast({
    title: '用户点击了取消',
    icon: 'none'
  })
  showBasicConfirm.value = false
}

// 自定义文本弹窗事件处理
const handleCustomConfirm = () => {
  uni.showToast({
    title: '执行自定义操作',
    icon: 'success'
  })
  showCustomConfirm.value = false
}

const handleCustomCancel = () => {
  uni.showToast({
    title: '暂不执行操作',
    icon: 'none'
  })
  showCustomConfirm.value = false
}

// 删除确认弹窗事件处理
const handleDeleteConfirm = () => {
  uni.showModal({
    title: '提示',
    content: '确定要删除这个项目吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
      }
    }
  })
  showDeleteConfirm.value = false
}

const handleDeleteCancel = () => {
  uni.showToast({
    title: '取消删除',
    icon: 'none'
  })
  showDeleteConfirm.value = false
}

// 无时间弹窗事件处理
const handleNoTimeButtonClick = () => {
  uni.showToast({
    title: '用户点击了按钮',
    icon: 'success'
  })
  showNoTime.value = false
}

const handleCustomNoTimeButtonClick = () => {
  uni.showToast({
    title: '系统繁忙，请稍后再试',
    icon: 'none'
  })
  showCustomNoTime.value = false
}
</script>

<style lang="less" scoped>
.example-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 {
  .section {
    margin-bottom: 60rpx;
    
    .section-title {
      display: block;
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 30rpx;
      padding-left: 20rpx;
      border-left: 8rpx solid #007aff;
    }
    
    .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-secondary {
          background-color: #34c759;
          color: white;
        }
        
        &.btn-warning {
          background-color: #ff3b30;
          color: white;
        }
        
        &.btn-info {
          background-color: #5ac8fa;
          color: white;
        }
        
        &.btn-success {
          background-color: #4cd964;
          color: white;
        }
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
