template-10584/src/user/coupon/detail.tsx

import {useState, useEffect} from "react";
import {useRouter} from '@tarojs/taro'
import {Button, ConfigProvider, Tag, Divider} from '@nutui/nutui-react-taro'
import {ArrowLeft, Gift, Clock, CartCheck, Share} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import {ShopCoupon} from "@/api/shop/shopCoupon/model";
import {getShopCoupon} from "@/api/shop/shopCoupon";
import CouponShare from "@/components/CouponShare";
import dayjs from "dayjs";

const CouponDetail = () => {
  const router = useRouter()
  const [coupon, setCoupon] = useState<ShopCoupon | null>(null)
  const [loading, setLoading] = useState(true)
  const [showShare, setShowShare] = useState(false)
  const couponId = router.params.id

  useEffect(() => {
    if (couponId) {
      loadCouponDetail()
    }
  }, [couponId])

  const loadCouponDetail = async () => {
    try {
      setLoading(true)
      const data = await getShopCoupon(Number(couponId))
      setCoupon(data)
    } catch (error) {
      console.error('获取优惠券详情失败:', error)
      Taro.showToast({
        title: '获取优惠券详情失败',
        icon: 'error'
      })
    } finally {
      setLoading(false)
    }
  }

  // 获取优惠券类型文本
  const getCouponTypeText = (type?: number) => {
    switch (type) {
      case 10: return '满减券'
      case 20: return '折扣券'
      case 30: return '免费券'
      default: return '优惠券'
    }
  }

  // 获取优惠券金额显示
  const getCouponAmountDisplay = () => {
    if (!coupon) return ''

    switch (coupon.type) {
      case 10: // 满减券
        return `¥${coupon.reducePrice}`
      case 20: // 折扣券
        return `${coupon.discount}折`
      case 30: // 免费券
        return '免费'
      default:
        return `¥${coupon.reducePrice || 0}`
    }
  }

  // 获取使用条件文本
  const getConditionText = () => {
    if (!coupon) return ''

    if (coupon.type === 30) return '无门槛使用'
    if (coupon.minPrice && parseFloat(coupon.minPrice) > 0) {
      return `满${coupon.minPrice}元可用`
    }
    return '无门槛使用'
  }

  // 获取有效期文本
  const getValidityText = () => {
    if (!coupon) return ''

    if (coupon.expireType === 10) {
      return `领取后${coupon.expireDay}天内有效`
    } else {
      return `${dayjs(coupon.startTime).format('YYYY年MM月DD日')} 至 ${dayjs(coupon.endTime).format('YYYY年MM月DD日')}`
    }
  }

  // 获取适用范围文本
  const getApplyRangeText = () => {
    if (!coupon) return ''

    switch (coupon.applyRange) {
      case 10: return '全部商品'
      case 20: return '指定商品'
      case 30: return '指定分类'
      default: return '全部商品'
    }
  }

  // 获取优惠券状态
  const getCouponStatus = () => {
    if (!coupon) return { status: 0, text: '未知', color: 'default' }

    if (coupon.isExpire === 1) {
      return { status: 2, text: '已过期', color: 'danger' }
    } else if (coupon.status === 1) {
      return { status: 1, text: '已使用', color: 'warning' }
    } else {
      return { status: 0, text: '可使用', color: 'success' }
    }
  }

  // 使用优惠券
  const handleUseCoupon = () => {
    if (!coupon) return

    Taro.showModal({
      title: '使用优惠券',
      content: `确定要使用"${coupon.name}"吗？`,
      success: (res) => {
        if (res.confirm) {
          // 跳转到商品页面或购物车页面
          Taro.navigateTo({
            url: '/pages/index/index'
          })
        }
      }
    })
  }

  // 返回上一页
  const handleBack = () => {
    Taro.navigateBack()
  }

  if (loading) {
    return (
      <ConfigProvider>
        <View className="flex justify-center items-center h-screen">
          <Text>加载中...</Text>
        </View>
      </ConfigProvider>
    )
  }

  if (!coupon) {
    return (
      <ConfigProvider>
        <View className="flex flex-col justify-center items-center h-screen">
          <Text className="text-gray-500 mb-4">优惠券不存在</Text>
          <Button onClick={handleBack}>返回</Button>
        </View>
      </ConfigProvider>
    )
  }

  const statusInfo = getCouponStatus()

  return (
    <ConfigProvider>
      {/* 自定义导航栏 */}
      <View className="flex items-center justify-between p-4 bg-white border-b border-gray-100">
        <View className="flex items-center" onClick={handleBack}>
          <ArrowLeft size="20" />
          <Text className="ml-2 text-lg">优惠券详情</Text>
        </View>
        <View className="flex items-center gap-3">
          <View onClick={() => setShowShare(true)}>
            <Share size="20" className="text-gray-600" />
          </View>
          <Tag type={statusInfo.color as any}>{statusInfo.text}</Tag>
        </View>
      </View>

      {/* 优惠券卡片 */}
      <View className="m-4 p-6 bg-gradient-to-r from-red-400 to-red-500 rounded-2xl text-white">
        <View className="flex items-center justify-between mb-4">
          <View>
            <Text className="text-4xl font-bold">{getCouponAmountDisplay()}</Text>
            <Text className="text-lg opacity-90 mt-1">{getCouponTypeText(coupon.type)}</Text>
          </View>
          <Gift size="40" />
        </View>

        <Text className="text-xl font-semibold mb-2">{coupon.name}</Text>
        <Text className="text-base opacity-90">{getConditionText()}</Text>
      </View>

      {/* 详细信息 */}
      <View className="bg-white mx-4 rounded-xl p-4">
        <Text className="text-lg font-semibold mb-4">使用说明</Text>

        <View className="gap-2">
          <View className="flex items-center">
            <Clock size="16" className="text-gray-400 mr-3" />
            <View>
              <Text className="text-gray-600 text-sm">有效期</Text>
              <Text className="text-gray-900">{getValidityText()}</Text>
            </View>
          </View>

          <Divider />

          <View className="flex items-center">
            <CartCheck size="16" className="text-gray-400 mr-3" />
            <View>
              <Text className="text-gray-600 text-sm">适用范围</Text>
              <Text className="text-gray-900">{getApplyRangeText()}</Text>
            </View>
          </View>

          {coupon.description && (
            <>
              <Divider />
              <View>
                <Text className="text-gray-600 text-sm mb-2">使用说明</Text>
                <Text className="text-gray-900 leading-relaxed">{coupon.description}</Text>
              </View>
            </>
          )}
        </View>
      </View>

      {/* 底部操作按钮 */}
      {statusInfo.status === 0 && (
        <View className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
          <Button
            type="primary"
            size="large"
            block
            onClick={handleUseCoupon}
          >
            立即使用
          </Button>
        </View>
      )}

      {/* 分享弹窗 */}
      {coupon && (
        <CouponShare
          visible={showShare}
          coupon={{
            id: coupon.id || 0,
            name: coupon.name || '',
            type: coupon.type || 10,
            amount: coupon.type === 10 ? coupon.reducePrice || '0' :
                   coupon.type === 20 ? coupon.discount?.toString() || '0' : '0',
            minAmount: coupon.minPrice,
            description: coupon.description
          }}
          onClose={() => setShowShare(false)}
        />
      )}
    </ConfigProvider>
  );
};

export default CouponDetail;