<template>
  <view class="promotion-code-page">
    <!-- 推广码卡片 -->
    <view class="code-card gradient-bg">
      <view class="card-header">
        <text class="card-title">我的推广码</text>
        <text class="card-subtitle">分享给好友即可获得佣金</text>
      </view>
      
      <view class="code-display">
        <text class="code-text">{{ promotionCode }}</text>
      </view>
      
      <view class="code-actions">
        <button class="action-btn primary" @click="copyCode">
          <text class="btn-icon">📋</text>
          <text>复制推广码</text>
        </button>
        <button class="action-btn" @click="shareCode">
          <text class="btn-icon">📤</text>
          <text>分享推广码</text>
        </button>
      </view>
    </view>
    
    <!-- 推广二维码 -->
    <view class="qrcode-section">
      <view class="section-header">
        <text class="section-title">推广二维码</text>
      </view>
      <view class="qrcode-container">
        <image class="qrcode-image" :src="qrcodeUrl" mode="aspectFit"></image>
        <button class="save-btn" @click="saveQrcode">保存二维码</button>
      </view>
    </view>
    
    <!-- 推广数据 -->
    <view class="stats-section">
      <view class="section-header">
        <text class="section-title">推广数据</text>
      </view>
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{ stats.viewCount }}</text>
          <text class="stat-label">浏览次数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ stats.registerCount }}</text>
          <text class="stat-label">注册人数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ stats.orderCount }}</text>
          <text class="stat-label">成交订单</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ stats.conversionRate }}%</text>
          <text class="stat-label">转化率</text>
        </view>
      </view>
    </view>
    
    <!-- 推广链接 -->
    <view class="link-section">
      <view class="section-header">
        <text class="section-title">推广链接</text>
      </view>
      <view class="link-item">
        <text class="link-text">{{ promotionLink }}</text>
        <button class="copy-link-btn" @click="copyLink">复制</button>
      </view>
    </view>
  </view>
</template>

<script>
import { distributorApi } from '@/api/index.js'

export default {
  data() {
    return {
      promotionCode: '',
      qrcodeUrl: '',
      promotionLink: '',
      stats: {
        viewCount: 0,
        registerCount: 0,
        orderCount: 0,
        conversionRate: 0
      }
    }
  },
  
  onLoad() {
    this.loadPromotionData()
  },
  
  methods: {
    async loadPromotionData() {
      try {
        const res = await distributorApi.getPromotionCode()
        if (res.code === 200 && res.data) {
          this.promotionCode = res.data.code || ''
          this.promotionLink = res.data.link || ''
          this.qrcodeUrl = res.data.qrcodeUrl || ''
          this.stats = {
            viewCount: res.data.viewCount || 0,
            registerCount: res.data.registerCount || 0,
            orderCount: res.data.orderCount || 0,
            conversionRate: res.data.conversionRate || 0
          }
        } else {
          // 模拟数据
          this.promotionCode = 'XZ' + Date.now().toString().slice(-8)
          this.qrcodeUrl = '/static/images/qrcode-placeholder.png'
          this.promotionLink = `https://xz.com/register?code=${this.promotionCode}`
          this.stats = {
            viewCount: 128,
            registerCount: 15,
            orderCount: 8,
            conversionRate: 6.25
          }
        }
      } catch (error) {
        console.error('加载推广数据失败:', error)
        uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' })
      }
    },
    
    copyCode() {
      uni.setClipboardData({
        data: this.promotionCode,
        success: () => {
          uni.showToast({
            title: '推广码已复制',
            icon: 'success'
          })
        }
      })
    },
    
    copyLink() {
      uni.setClipboardData({
        data: this.promotionLink,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          })
        }
      })
    },
    
    shareCode() {
      // 微信小程序使用转发功能，需要在页面配置中启用
      uni.showModal({
        title: '分享推广码',
        content: '请点击右上角"..."按钮，选择"转发"分享给好友',
        showCancel: false
      })
    },
    
    // 微信小程序转发配置
    onShareAppMessage() {
      return {
        title: `习正陪伴 - 我的推广码：${this.promotionCode}`,
        path: `/pages/index/index?code=${this.promotionCode}`,
        imageUrl: this.qrcodeUrl
      }
    },
    
    // 微信小程序分享到朋友圈
    onShareTimeline() {
      return {
        title: `习正陪伴 - 我的推广码：${this.promotionCode}`,
        query: `code=${this.promotionCode}`,
        imageUrl: this.qrcodeUrl
      }
    },
    
    saveQrcode() {
      uni.downloadFile({
        url: this.qrcodeUrl,
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: '二维码已保存',
                icon: 'success'
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.promotion-code-page {
  min-height: 100vh;
  background: #f0f9f7;
  padding: 20rpx;
}

.gradient-bg {
  background: linear-gradient(135deg, #7dd3c0 0%, #5fb8a8 100%);
}

.code-card {
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(125, 211, 192, 0.3);
}

.card-header {
  margin-bottom: 40rpx;
}

.card-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10rpx;
}

.card-subtitle {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.code-display {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16rpx;
  padding: 30rpx;
  text-align: center;
  margin-bottom: 30rpx;
}

.code-text {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 4rpx;
}

.code-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  padding: 24rpx;
  border-radius: 12rpx;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 28rpx;
  border: none;
  
  &.primary {
    background: #ffffff;
    color: #7dd3c0;
  }
}

.btn-icon {
  font-size: 32rpx;
}

.qrcode-section, .stats-section, .link-section {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-header {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-image {
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 30rpx;
}

.save-btn {
  width: 300rpx;
  padding: 20rpx;
  background: #7dd3c0;
  color: #ffffff;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.stat-item {
  text-align: center;
  padding: 30rpx;
  background: #f0f9f7;
  border-radius: 16rpx;
}

.stat-value {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #7dd3c0;
  margin-bottom: 10rpx;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  color: #999999;
}

.link-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
  background: #f0f9f7;
  border-radius: 12rpx;
}

.link-text {
  flex: 1;
  font-size: 24rpx;
  color: #666666;
  word-break: break-all;
}

.copy-link-btn {
  padding: 16rpx 32rpx;
  background: #7dd3c0;
  color: #ffffff;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: none;
}
</style>
