glt-taro/src/components/CouponShare.tsx

import React from 'react'
import { View, Text } from '@tarojs/components'
import { Popup } from '@nutui/nutui-react-taro'
import { Share, Link, Close } from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'

export interface CouponShareProps {
  /** 是否显示分享弹窗 */
  visible: boolean
  /** 优惠券信息 */
  coupon: {
    id: number
    name: string
    type: number
    amount: string
    minAmount?: string
    description?: string
  }
  /** 关闭回调 */
  onClose: () => void
}

const CouponShare: React.FC<CouponShareProps> = ({
  visible,
  coupon,
  onClose
}) => {
  // 生成分享文案
  const generateShareText = () => {
    const typeText = coupon.type === 10 ? '满减券' : coupon.type === 20 ? '折扣券' : '免费券'
    const amountText = coupon.type === 10 ? `¥${coupon.amount}` :
                      coupon.type === 20 ? `${coupon.amount}折` : '免费'
    const conditionText = coupon.minAmount ? `满${coupon.minAmount}元可用` : '无门槛'

    return `🎁 ${coupon.name}\n💰 ${amountText} ${typeText}\n📋 ${conditionText}\n快来领取吧！`
  }

  // 生成分享链接
  const generateShareUrl = () => {
    // 这里应该是实际的分享链接，包含优惠券ID等参数
    return `https://your-domain.com/coupon/share?id=${coupon.id}`
  }

  // 微信分享
  const handleWechatShare = () => {
    Taro.showShareMenu({
      withShareTicket: true,
      success: () => {
        Taro.showToast({
          title: '分享成功',
          icon: 'success'
        })
        onClose()
      },
      fail: () => {
        Taro.showToast({
          title: '分享失败',
          icon: 'error'
        })
      }
    })
  }

  // 复制链接
  const handleCopyLink = () => {
    const shareUrl = generateShareUrl()
    const shareText = generateShareText()
    const fullText = `${shareText}\n\n${shareUrl}`

    Taro.setClipboardData({
      data: fullText,
      success: () => {
        Taro.showToast({
          title: '已复制到剪贴板',
          icon: 'success'
        })
        onClose()
      },
      fail: () => {
        Taro.showToast({
          title: '复制失败',
          icon: 'error'
        })
      }
    })
  }

  // 保存图片分享
  const handleSaveImage = async () => {
    try {
      // 这里可以生成优惠券图片并保存到相册
      // 实际实现需要canvas绘制优惠券图片
      Taro.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    } catch (error) {
      Taro.showToast({
        title: '保存失败',
        icon: 'error'
      })
    }
  }

  const shareOptions = [
    {
      icon: <Share size="32" className="text-green-500" />,
      label: '微信好友',
      onClick: handleWechatShare
    },
    {
      icon: <Link size="32" className="text-blue-500" />,
      label: '复制链接',
      onClick: handleCopyLink
    },
    {
      icon: <Share size="32" className="text-purple-500" />,
      label: '保存图片',
      onClick: handleSaveImage
    }
  ]

  return (
    <Popup
      visible={visible}
      position="bottom"
      style={{ height: 'auto' }}
      round
    >
      <View className="p-6">
        {/* 头部 */}
        <View className="flex items-center justify-between mb-6">
          <Text className="text-lg font-semibold">分享优惠券</Text>
          <View onClick={onClose}>
            <Close size="20" className="text-gray-500" />
          </View>
        </View>

        {/* 优惠券预览 */}
        <View className="bg-gradient-to-r from-red-400 to-red-500 rounded-xl p-4 mb-6 text-white">
          <Text className="text-xl font-bold mb-2">{coupon.name}</Text>
          <View className="flex items-center justify-between">
            <View>
              <Text className="text-2xl font-bold">
                {coupon.type === 10 ? `¥${coupon.amount}` :
                 coupon.type === 20 ? `${coupon.amount}折` : '免费'}
              </Text>
              <Text className="text-sm opacity-90">
                {coupon.minAmount ? `满${coupon.minAmount}元可用` : '无门槛使用'}
              </Text>
            </View>
            <Share size="24" />
          </View>
        </View>

        {/* 分享选项 */}
        <View className="grid grid-cols-3 gap-4 mb-4">
          {shareOptions.map((option, index) => (
            <View
              key={index}
              className="flex flex-col items-center py-4 bg-gray-50 rounded-lg"
              onClick={option.onClick}
            >
              <View className="mb-2">{option.icon}</View>
              <Text className="text-sm text-gray-700">{option.label}</Text>
            </View>
          ))}
        </View>

        {/* 分享文案预览 */}
        <View className="bg-gray-50 rounded-lg p-3">
          <Text className="text-xs text-gray-500 mb-2">分享文案预览：</Text>
          <Text className="text-sm text-gray-700 leading-relaxed">
            {generateShareText()}
          </Text>
        </View>
      </View>
    </Popup>
  )
}

export default CouponShare