asios/components/home/GoodsCard.tsx

import { Images } from '@/constants/images';
import { GoodsItem } from '@/services/mall';
import { Image } from 'expo-image';
import React from 'react';
import { Dimensions, ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
// 小程序: width = (screenWidth - 18) / 2, height = 504rpx = 252pt
const CARD_WIDTH = (SCREEN_WIDTH - 18) / 2;
const CARD_HEIGHT = 252;
// 图片区域: 340rpx = 170pt, 356rpx = 178pt
const IMG_BOX_WIDTH = 170;
const IMG_BOX_HEIGHT = 178;

interface GoodsCardProps {
  data: GoodsItem;
  onPress?: (item: GoodsItem) => void;
}

export function GoodsCard({ data, onPress }: GoodsCardProps) {
  return (
    <TouchableOpacity activeOpacity={0.8} onPress={() => onPress?.(data)}>
      <ImageBackground
        source={{ uri: Images.home.cellGoodsBg }}
        style={[styles.cell, { width: CARD_WIDTH }]}
        resizeMode="stretch"
      >
        <View style={[styles.content, { width: CARD_WIDTH - 10 }]}>
          <View style={styles.imgBox}>
            <Image 
                source={typeof data.cover === 'string' ? { uri: data.cover } : data.cover} 
                style={styles.image} 
                contentFit="contain" 
            />
            {/* 图片边框装饰 - scaled to 70% to match Vue implementation */}
            <ImageBackground
              source={{ uri: Images.home.imgBoxBorder }}
              style={styles.imgBoxBorder}
              resizeMode="contain"
            />
          </View>
          <View style={styles.textBox}>
            <Text style={styles.name} numberOfLines={1}>
              {data.name}
            </Text>
            <View style={styles.priceRow}>
              <Text style={styles.currency}>¥</Text>
              <Text style={styles.price}>{data.price}</Text>
              {data.sellType === 2 && (
                <View style={styles.presellTag}>
                  <Text style={styles.presellText}>预售</Text>
                </View>
              )}
            </View>
          </View>
        </View>
      </ImageBackground>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  cell: {
    height: CARD_HEIGHT,
    marginBottom: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    overflow: 'hidden',
    borderRadius: 8,
    alignItems: 'center',
    // Width set inline to CARD_WIDTH - 10
  },
  imgBox: {
    width: IMG_BOX_WIDTH, // Vue uses fixed width 340rpx (170pt)
    height: IMG_BOX_HEIGHT,
    borderRadius: 7,
    overflow: 'hidden',
    paddingHorizontal: 6, // Match Vue: padding: 0 12rpx
    alignSelf: 'center',
    justifyContent: 'center', // Ensure content centers if padding affects it
    alignItems: 'center',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  imgBoxBorder: {
    position: 'absolute',
    width: '85%', // 70% background-size in Vue roughly maps to shrinking this, but let's try 85% first as 70% might be too small if cover is contain. Vue says bg-size 70%.
    height: '85%',
    alignSelf: 'center',
    top: '7.5%', // Center it vertically
  },
  textBox: {
    paddingHorizontal: 9,
    marginTop: 6,
  },
  name: {
    fontSize: 12,
    color: '#fff',
  },
  priceRow: {
    flexDirection: 'row',
    alignItems: 'baseline',
    marginTop: 3,
  },
  currency: {
    fontSize: 10,
    color: '#fff',
  },
  price: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
  },
  presellTag: {
    width: 64,
    height: 22,
    lineHeight: 22,
    borderRadius: 11,
    marginLeft: 8,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(255,255,255,0.2)',
  },
  presellText: {
    fontSize: 12,
    color: '#fff',
    textAlign: 'center',
  },
});