<template>
  <view class="test-page">
    <view class="test-header">
      <text class="test-title">ShareButton组件分享功能测试</text>
    </view>
    
    <view class="test-content">
      <!-- 测试数据展示 -->
      <view class="test-section">
        <text class="section-title">测试数据：</text>
        <view class="data-display">
          <text>活动标题：{{ testActivityData.title }}</text>
          <text>活动描述：{{ testActivityData.description }}</text>
          <text>分享标题：{{ testShareConfig.title }}</text>
          <text>分享路径：{{ testShareConfig.path }}</text>
        </view>
      </view>
      
      <!-- ShareButton组件测试 -->
      <view class="test-section">
        <text class="section-title">ShareButton组件：</text>
        <ShareButton
          :activity-data="testActivityData"
          :share-config="testShareConfig"
          @share-activity="onShareActivity"
          @share-poster="onSharePoster"
        />
      </view>
      
      <!-- 分享日志显示 -->
      <view class="test-section">
        <text class="section-title">分享日志：</text>
        <view class="log-display">
          <text v-for="(log, index) in shareLogs" :key="index" class="log-item">
            {{ log }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import ShareButton from '@/components/ShareButton/index.vue'

/**
 * ShareButton组件分享功能测试页面
 */

// 测试用的活动数据
const testActivityData = ref({
  id: 'test-activity-001',
  title: '测试活动 - 南京路商圈时尚Citywalk',
  description: '这是一个用于测试ShareButton组件分享功能的测试活动',
  banner: 'https://img.yzcdn.cn/vant/cat.jpeg',
  dateRange: '2024年1月15日 - 2024年1月31日'
})

// 测试用的分享配置
const testShareConfig = ref({
  title: '精彩活动等你参与 - 测试分享',
  path: '/pages/ShareButtonTest/index',
  imageUrl: 'https://img.yzcdn.cn/vant/cat.jpeg'
})

// 分享日志
const shareLogs = ref([
  '页面初始化完成',
  'ShareButton组件已加载'
])

/**
 * 处理分享活动事件
 * @param {Object} data - 分享数据
 */
const onShareActivity = (data) => {
  console.log('=== 测试页面收到分享活动事件 ===')
  console.log('分享数据:', data)
  
  const logMessage = `[${new Date().toLocaleTimeString()}] 分享活动事件触发 - 标题: ${data.shareData?.title || '未知'}`
  shareLogs.value.push(logMessage)
  
  Taro.showToast({
    title: '分享活动事件已触发',
    icon: 'success',
    duration: 2000
  })
}

/**
 * 处理分享海报事件
 * @param {Object} data - 活动数据
 */
const onSharePoster = (data) => {
  console.log('=== 测试页面收到分享海报事件 ===')
  console.log('活动数据:', data)
  
  const logMessage = `[${new Date().toLocaleTimeString()}] 分享海报事件触发 - 活动: ${data.title || '未知'}`
  shareLogs.value.push(logMessage)
  
  Taro.showToast({
    title: '分享海报事件已触发',
    icon: 'success',
    duration: 2000
  })
}

/**
 * 页面分享配置（用于测试页面本身的分享）
 */
const onShareAppMessage = () => {
  const logMessage = `[${new Date().toLocaleTimeString()}] 页面分享函数被调用`
  shareLogs.value.push(logMessage)
  
  return {
    title: 'ShareButton组件测试页面',
    path: '/pages/ShareButtonTest/index'
  }
}

// 导出分享方法供Taro使用
defineExpose({
  onShareAppMessage
})
</script>

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

.test-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.test-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.test-content {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.test-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.data-display {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.data-display text {
  font-size: 28rpx;
  color: #666;
  padding: 12rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.log-display {
  max-height: 400rpx;
  overflow-y: auto;
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
}

.log-item {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
  padding: 8rpx;
  background: white;
  border-radius: 4rpx;
  border-left: 4rpx solid #007aff;
}
</style>