template-10550/src/components/CouponUsageRecord.tsx

import React from 'react'
import { View, Text } from '@tarojs/components'
import { Tag } from '@nutui/nutui-react-taro'
import { Voucher, Clock, Agenda } from '@nutui/icons-react-taro'
import dayjs from 'dayjs'

export interface CouponUsageRecordProps {
  /** 优惠券ID */
  couponId: number
  /** 优惠券名称 */
  couponName: string
  /** 优惠券类型 */
  couponType: number
  /** 优惠券金额 */
  couponAmount: string
  /** 使用时间 */
  usedTime: string
  /** 订单号 */
  orderNo?: string
  /** 订单金额 */
  orderAmount?: string
  /** 节省金额 */
  savedAmount?: string
  /** 使用状态：1-已使用 2-已过期 */
  status: 1 | 2
  /** 点击事件 */
  onClick?: () => void
}

const CouponUsageRecord: React.FC<CouponUsageRecordProps> = ({
  couponName,
  couponType,
  couponAmount,
  usedTime,
  orderNo,
  orderAmount,
  savedAmount,
  status,
  onClick
}) => {
  // 获取优惠券类型文本
  const getCouponTypeText = () => {
    switch (couponType) {
      case 10: return '满减券'
      case 20: return '折扣券'
      case 30: return '免费券'
      default: return '优惠券'
    }
  }

  // 获取优惠券金额显示
  const getCouponAmountDisplay = () => {
    switch (couponType) {
      case 10: // 满减券
        return `¥${couponAmount}`
      case 20: // 折扣券
        return `${couponAmount}折`
      case 30: // 免费券
        return '免费'
      default:
        return `¥${couponAmount}`
    }
  }

  // 获取状态信息
  const getStatusInfo = () => {
    switch (status) {
      case 1:
        return {
          text: '已使用',
          color: 'success' as const,
          icon: <Voucher size="16" className="text-green-500" />
        }
      case 2:
        return {
          text: '已过期',
          color: 'danger' as const,
          icon: <Clock size="16" className="text-red-500" />
        }
      default:
        return {
          text: '未知',
          color: 'default' as const,
          icon: <Clock size="16" className="text-gray-500" />
        }
    }
  }

  const statusInfo = getStatusInfo()

  return (
    <View
      className="bg-white mx-4 mb-3 rounded-xl p-4 border border-gray-100"
      onClick={onClick}
    >
      {/* 头部信息 */}
      <View className="flex items-center justify-between mb-3">
        <View className="flex items-center">
          <View className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-3">
            <Text className="text-red-500 font-bold text-lg">
              {getCouponAmountDisplay()}
            </Text>
          </View>
          <View>
            <Text className="font-semibold text-gray-900 text-base">{couponName}</Text>
            <Text className="text-gray-500 text-sm">{getCouponTypeText()}</Text>
          </View>
        </View>

        <View className="flex items-center">
          {statusInfo.icon}
          <Tag type={statusInfo.color} className="ml-2">
            {statusInfo.text}
          </Tag>
        </View>
      </View>

      {/* 使用详情 */}
      <View className="bg-gray-50 rounded-lg p-3">
        <View className="flex items-center justify-between mb-2">
          <Text className="text-gray-600 text-sm">使用时间</Text>
          <Text className="text-gray-900 text-sm">
            {dayjs(usedTime).format('YYYY-MM-DD HH:mm')}
          </Text>
        </View>

        {orderNo && (
          <View className="flex items-center justify-between mb-2">
            <Text className="text-gray-600 text-sm">订单号</Text>
            <Text className="text-gray-900 text-sm">{orderNo}</Text>
          </View>
        )}

        {orderAmount && (
          <View className="flex items-center justify-between mb-2">
            <Text className="text-gray-600 text-sm">订单金额</Text>
            <Text className="text-gray-900 text-sm">¥{orderAmount}</Text>
          </View>
        )}

        {savedAmount && (
          <View className="flex items-center justify-between">
            <Text className="text-gray-600 text-sm">节省金额</Text>
            <Text className="text-red-500 text-sm font-semibold">¥{savedAmount}</Text>
          </View>
        )}
      </View>

      {/* 底部操作 */}
      {orderNo && (
        <View className="flex justify-end mt-3">
          <View className="flex items-center text-blue-500 text-sm">
            <Agenda size="14" className="mr-1" />
            <Text>查看订单</Text>
          </View>
        </View>
      )}
    </View>
  )
}

export default CouponUsageRecord