<template>
  <view class="demo-container">
    <view class="demo-header">
      <text class="demo-title">AgreePopup 组件演示</text>
    </view>
    
    <view class="demo-content">
      <button class="demo-btn" @click="showPopup">显示用户协议弹窗</button>
      
      <view class="demo-info">
        <text class="info-title">组件状态：</text>
        <text class="info-text">弹窗可见：{{ popupVisible }}</text>
        <text class="info-text">用户操作：{{ userAction }}</text>
      </view>
    </view>
    
    <!-- AgreePopup 组件 -->
    <AgreePopup 
      :visible="popupVisible"
      title="温馨提示"
      @agree="handleAgree"
      @close="handleClose"
      @cancel="handleCancel"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import AgreePopup from './index.vue'

// 响应式数据
const popupVisible = ref(false)
const userAction = ref('无')

// 方法定义
const showPopup = () => {
  popupVisible.value = true
  userAction.value = '显示弹窗'
}

const handleAgree = () => {
  popupVisible.value = false
  userAction.value = '用户同意协议'
  console.log('用户同意了协议')
}

const handleClose = () => {
  popupVisible.value = false
  userAction.value = '用户关闭弹窗'
  console.log('用户关闭了弹窗')
}

const handleCancel = () => {
  popupVisible.value = false
  userAction.value = '用户取消操作'
  console.log('用户取消了操作')
}
</script>

<style scoped lang="scss">
.demo-container {
  padding: 20px;
  min-height: 100vh;
  background: #f5f5f5;
  
  .demo-header {
    text-align: center;
    margin-bottom: 40px;
    
    .demo-title {
      font-size: 24px;
      font-weight: 600;
      color: #333333;
    }
  }
  
  .demo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .demo-btn {
      width: 200px;
      height: 44px;
      background: #007AFF;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 40px;
      cursor: pointer;
      
      &:hover {
        background: #0056CC;
      }
      
      &:active {
        background: #004499;
        transform: scale(0.98);
      }
    }
    
    .demo-info {
      background: #ffffff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      min-width: 300px;
      
      .info-title {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        display: block;
        margin-bottom: 12px;
      }
      
      .info-text {
        font-size: 14px;
        color: #666666;
        display: block;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>