152 lines
3.9 KiB
TypeScript
152 lines
3.9 KiB
TypeScript
import { ThemedText } from "@/components/themed-text";
|
|
import { CardEvent, MatchDetailData } from "@/types/api";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { StyleSheet, View } from "react-native";
|
|
|
|
interface CardsCardProps {
|
|
data: MatchDetailData;
|
|
isDark: boolean;
|
|
}
|
|
|
|
export function CardsCard({ data, isDark }: CardsCardProps) {
|
|
const { t } = useTranslation();
|
|
const bgColor = isDark ? "#1C1C1E" : "#FFF";
|
|
const borderColor = isDark ? "#2C2C2E" : "#EEE";
|
|
|
|
// events 可能在 data.events 或 match.events 中
|
|
const events = (data as any).events || (data.match as any).events;
|
|
if (!events || typeof events !== "object") {
|
|
return null;
|
|
}
|
|
|
|
// 处理数组格式的 events
|
|
let eventsObj = events;
|
|
if (Array.isArray(events) && events.length > 0) {
|
|
eventsObj = events[0];
|
|
}
|
|
|
|
const cards = eventsObj?.cards || [];
|
|
const filteredCards = cards.filter((card: CardEvent) => card.home_fault || card.away_fault);
|
|
|
|
if (filteredCards.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const renderCardEvent = (card: CardEvent, index: number) => {
|
|
const isHome = !!card.home_fault;
|
|
const cardType = card.card?.toLowerCase() || "";
|
|
const isRed = cardType.includes("red");
|
|
const isYellow = cardType.includes("yellow");
|
|
const cardColor = isRed ? "#F44336" : isYellow ? "#FFC107" : "#9E9E9E";
|
|
const playerName = card.home_fault || card.away_fault || "";
|
|
|
|
return (
|
|
<View key={`card-${index}`} style={[styles.eventRow, { borderBottomColor: borderColor }]}>
|
|
<View style={styles.eventTime}>
|
|
<ThemedText style={styles.timeText}>
|
|
{card.time ? `${card.time}'` : ""}
|
|
</ThemedText>
|
|
</View>
|
|
<View style={[styles.eventContent, isHome ? styles.homeEvent : styles.awayEvent]}>
|
|
<View style={[styles.cardIcon, { backgroundColor: cardColor }]} />
|
|
<ThemedText style={styles.eventText} numberOfLines={1}>
|
|
{playerName}
|
|
</ThemedText>
|
|
{card.card && (
|
|
<View style={[styles.cardBadge, { backgroundColor: cardColor + "20" }]}>
|
|
<ThemedText style={[styles.cardTypeText, { color: cardColor }]}>
|
|
{isRed ? t("detail.events.red_card") : isYellow ? t("detail.events.yellow_card") : card.card}
|
|
</ThemedText>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
|
|
<ThemedText style={styles.title}>
|
|
{t("detail.events.cards")}
|
|
</ThemedText>
|
|
<View style={styles.content}>
|
|
{filteredCards.map((card: CardEvent, index: number) => renderCardEvent(card, index))}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
margin: 16,
|
|
marginTop: 0,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
borderWidth: 1,
|
|
elevation: 2,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
},
|
|
title: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
marginBottom: 12,
|
|
opacity: 0.7,
|
|
},
|
|
content: {
|
|
gap: 0,
|
|
},
|
|
eventRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingVertical: 8,
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
},
|
|
eventTime: {
|
|
width: 40,
|
|
alignItems: "center",
|
|
},
|
|
timeText: {
|
|
fontSize: 12,
|
|
fontWeight: "500",
|
|
opacity: 0.6,
|
|
},
|
|
eventContent: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
paddingLeft: 12,
|
|
},
|
|
homeEvent: {
|
|
justifyContent: "flex-start",
|
|
},
|
|
awayEvent: {
|
|
justifyContent: "flex-end",
|
|
flexDirection: "row-reverse",
|
|
},
|
|
eventText: {
|
|
fontSize: 13,
|
|
fontWeight: "500",
|
|
flex: 1,
|
|
},
|
|
cardIcon: {
|
|
width: 12,
|
|
height: 16,
|
|
borderRadius: 2,
|
|
},
|
|
cardTypeText: {
|
|
fontSize: 10,
|
|
fontWeight: "600",
|
|
textTransform: "uppercase",
|
|
},
|
|
cardBadge: {
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
borderRadius: 4,
|
|
},
|
|
});
|