439 lines
12 KiB
TypeScript
439 lines
12 KiB
TypeScript
import { EmptyPlaceholder } from "@/components/empty-placeholder";
|
|
import { ThemedText } from "@/components/themed-text";
|
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import { addFavorite, checkFavorite, removeFavorite } from "@/lib/api";
|
|
import { storage } from "@/lib/storage";
|
|
import { MatchDetailData } from "@/types/api";
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
import { useRouter } from "expo-router";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
|
|
|
|
interface ScoreHeaderProps {
|
|
data: MatchDetailData;
|
|
isDark: boolean;
|
|
topInset: number;
|
|
}
|
|
|
|
export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
|
|
const router = useRouter();
|
|
const { t } = useTranslation();
|
|
const { match } = data;
|
|
const isTennis = match.sportId === 3;
|
|
|
|
const [isFav, setIsFav] = useState(false);
|
|
const [favLoading, setFavLoading] = useState(false);
|
|
|
|
const [isHomeFav, setIsHomeFav] = useState(false);
|
|
const [isAwayFav, setIsAwayFav] = useState(false);
|
|
const [homeFavLoading, setHomeFavLoading] = useState(false);
|
|
const [awayFavLoading, setAwayFavLoading] = useState(false);
|
|
|
|
// 检查比赛收藏状态
|
|
React.useEffect(() => {
|
|
const loadFavStatus = async () => {
|
|
const token = await storage.getAccessToken();
|
|
if (!token) return;
|
|
try {
|
|
const res = await checkFavorite("match", match.eventKey.toString());
|
|
setIsFav(res.isFavorite);
|
|
} catch (error) {
|
|
console.error("Check match favorite status error:", error);
|
|
}
|
|
};
|
|
if (match.eventKey) {
|
|
loadFavStatus();
|
|
}
|
|
}, [match.eventKey]);
|
|
|
|
// 检查主队/第一球员收藏状态
|
|
React.useEffect(() => {
|
|
const loadHomeFav = async () => {
|
|
const token = await storage.getAccessToken();
|
|
if (!token) return;
|
|
try {
|
|
const teamKey = isTennis ? match.firstPlayerKey : match.homeTeamKey;
|
|
if (teamKey) {
|
|
const res = await checkFavorite("team", teamKey.toString());
|
|
setIsHomeFav(res.isFavorite);
|
|
}
|
|
} catch (error) {
|
|
console.error("Check home team favorite status error:", error);
|
|
}
|
|
};
|
|
if (isTennis ? match.firstPlayerKey : match.homeTeamKey) {
|
|
loadHomeFav();
|
|
}
|
|
}, [match.homeTeamKey, match.firstPlayerKey, isTennis]);
|
|
|
|
// 检查客队/第二球员收藏状态
|
|
React.useEffect(() => {
|
|
const loadAwayFav = async () => {
|
|
const token = await storage.getAccessToken();
|
|
if (!token) return;
|
|
try {
|
|
const teamKey = isTennis ? match.secondPlayerKey : match.awayTeamKey;
|
|
if (teamKey) {
|
|
const res = await checkFavorite("team", teamKey.toString());
|
|
setIsAwayFav(res.isFavorite);
|
|
}
|
|
} catch (error) {
|
|
console.error("Check away team favorite status error:", error);
|
|
}
|
|
};
|
|
if (isTennis ? match.secondPlayerKey : match.awayTeamKey) {
|
|
loadAwayFav();
|
|
}
|
|
}, [match.awayTeamKey, match.secondPlayerKey, isTennis]);
|
|
|
|
const toggleFavorite = async () => {
|
|
if (favLoading) return;
|
|
setFavLoading(true);
|
|
const newFavState = !isFav;
|
|
try {
|
|
if (newFavState) {
|
|
await addFavorite({
|
|
matchId: Number(match.eventKey),
|
|
type: "match",
|
|
typeId: match.eventKey.toString(),
|
|
notify: true,
|
|
});
|
|
} else {
|
|
await removeFavorite({
|
|
type: "match",
|
|
typeId: match.eventKey.toString(),
|
|
});
|
|
}
|
|
setIsFav(newFavState);
|
|
} catch (error) {
|
|
console.error("Toggle favorite error:", error);
|
|
} finally {
|
|
setFavLoading(false);
|
|
}
|
|
};
|
|
|
|
const toggleTeamFavorite = async (teamKey: string, isHome: boolean) => {
|
|
const isTeamFav = isHome ? isHomeFav : isAwayFav;
|
|
const setLoading = isHome ? setHomeFavLoading : setAwayFavLoading;
|
|
const setFav = isHome ? setIsHomeFav : setIsAwayFav;
|
|
const loading = isHome ? homeFavLoading : awayFavLoading;
|
|
|
|
if (loading || !teamKey) return;
|
|
setLoading(true);
|
|
|
|
const newFavState = !isTeamFav;
|
|
try {
|
|
if (newFavState) {
|
|
await addFavorite({
|
|
teamId: Number(teamKey),
|
|
type: "team",
|
|
typeId: teamKey.toString(),
|
|
notify: true,
|
|
});
|
|
} else {
|
|
await removeFavorite({
|
|
type: "team",
|
|
typeId: teamKey.toString(),
|
|
});
|
|
}
|
|
setFav(newFavState);
|
|
} catch (error) {
|
|
console.error("Toggle team favorite error:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const getScoreDisplay = () => {
|
|
if (isTennis) {
|
|
const scores = (match.scores as any) || [];
|
|
if (scores.length > 0) {
|
|
const lastSet = scores[scores.length - 1];
|
|
return `${lastSet.score_first || "0"}-${lastSet.score_second || "0"}`;
|
|
}
|
|
return match.eventGameResult && match.eventGameResult !== "-"
|
|
? match.eventGameResult
|
|
: "0-0";
|
|
}
|
|
return match.eventFinalResult && match.eventFinalResult !== "-"
|
|
? match.eventFinalResult
|
|
: "0-0";
|
|
};
|
|
|
|
const firstPlayerName = isTennis ? match.eventFirstPlayer : match.eventHomeTeam;
|
|
const secondPlayerName = isTennis ? match.eventSecondPlayer : match.eventAwayTeam;
|
|
const firstPlayerLogo = isTennis ? match.eventFirstPlayerLogo : match.homeTeamLogo;
|
|
const secondPlayerLogo = isTennis ? match.eventSecondPlayerLogo : match.awayTeamLogo;
|
|
const firstPlayerKey = isTennis ? match.firstPlayerKey : match.homeTeamKey;
|
|
const secondPlayerKey = isTennis ? match.secondPlayerKey : match.awayTeamKey;
|
|
|
|
const hasFirstLogo = firstPlayerLogo && firstPlayerLogo.trim() !== "" && !firstPlayerLogo.includes("placehold");
|
|
const hasSecondLogo = secondPlayerLogo && secondPlayerLogo.trim() !== "" && !secondPlayerLogo.includes("placehold");
|
|
|
|
return (
|
|
<LinearGradient
|
|
colors={["#521e10", "#0e0e10"]}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={[styles.container, { paddingTop: Math.max(topInset, 10) }]}
|
|
>
|
|
{/* Top Bar */}
|
|
<View style={styles.topBar}>
|
|
<View style={styles.leftContainer}>
|
|
<TouchableOpacity
|
|
onPress={() => router.back()}
|
|
style={styles.iconBtn}
|
|
>
|
|
<IconSymbol name="chevron-back" size={28} color="#FFF" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.statusContainer}>
|
|
<ThemedText style={styles.statusText}>
|
|
{match.eventStatus || t("detail.pending")}
|
|
</ThemedText>
|
|
</View>
|
|
|
|
<View style={styles.rightContainer}>
|
|
<TouchableOpacity style={styles.iconBtn}>
|
|
<IconSymbol name="notifications-outline" size={24} color="#FFF" />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.iconBtn}
|
|
onPress={toggleFavorite}
|
|
disabled={favLoading}
|
|
>
|
|
<IconSymbol
|
|
name={isFav ? "star" : "star-outline"}
|
|
size={24}
|
|
color={isFav ? "#FFD700" : "#FFF"}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Score Section */}
|
|
<View style={styles.scoreRow}>
|
|
<View style={styles.teamInfo}>
|
|
<View style={styles.teamLogoRow}>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
if (firstPlayerKey) {
|
|
toggleTeamFavorite(firstPlayerKey, true);
|
|
}
|
|
}}
|
|
disabled={homeFavLoading || !firstPlayerKey}
|
|
style={styles.starBtnLeft}
|
|
>
|
|
<IconSymbol
|
|
name={isHomeFav ? "star" : "star-outline"}
|
|
size={20}
|
|
color={isHomeFav ? "#FFD700" : "rgba(255,255,255,0.5)"}
|
|
/>
|
|
</TouchableOpacity>
|
|
<View style={styles.logoContainer}>
|
|
{hasFirstLogo ? (
|
|
<Image
|
|
source={{ uri: firstPlayerLogo }}
|
|
style={styles.teamLogo}
|
|
/>
|
|
) : (
|
|
<EmptyPlaceholder type={isTennis ? "player" : "team"} size={60} />
|
|
)}
|
|
</View>
|
|
</View>
|
|
<ThemedText style={styles.teamName} numberOfLines={2}>
|
|
{firstPlayerName}
|
|
</ThemedText>
|
|
</View>
|
|
|
|
<View style={styles.centerScore}>
|
|
<View style={styles.scoreBox}>
|
|
<ThemedText style={styles.scoreValue}>
|
|
{getScoreDisplay()}
|
|
</ThemedText>
|
|
</View>
|
|
<TouchableOpacity style={styles.fieldBtn}>
|
|
<IconSymbol
|
|
name={isTennis ? "tennisball-outline" : "football-outline"}
|
|
size={16}
|
|
color="#FFF"
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.teamInfo}>
|
|
<View style={styles.teamLogoRow}>
|
|
<View style={styles.logoContainer}>
|
|
{hasSecondLogo ? (
|
|
<Image
|
|
source={{ uri: secondPlayerLogo }}
|
|
style={styles.teamLogo}
|
|
/>
|
|
) : (
|
|
<EmptyPlaceholder type={isTennis ? "player" : "team"} size={60} />
|
|
)}
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
if (secondPlayerKey) {
|
|
toggleTeamFavorite(secondPlayerKey, false);
|
|
}
|
|
}}
|
|
disabled={awayFavLoading || !secondPlayerKey}
|
|
style={styles.starBtnRight}
|
|
>
|
|
<IconSymbol
|
|
name={isAwayFav ? "star" : "star-outline"}
|
|
size={20}
|
|
color={isAwayFav ? "#FFD700" : "rgba(255,255,255,0.5)"}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<ThemedText style={styles.teamName} numberOfLines={2}>
|
|
{secondPlayerName}
|
|
</ThemedText>
|
|
</View>
|
|
</View>
|
|
</LinearGradient>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
paddingBottom: 24,
|
|
paddingHorizontal: 16,
|
|
},
|
|
topBar: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 16,
|
|
minHeight: 44,
|
|
},
|
|
leftContainer: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
statusContainer: {
|
|
flex: 2,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
rightContainer: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
justifyContent: "flex-end",
|
|
alignItems: "center",
|
|
gap: 4,
|
|
},
|
|
statusText: {
|
|
color: "#FFF",
|
|
fontSize: 17,
|
|
fontWeight: "600",
|
|
opacity: 0.9,
|
|
},
|
|
iconBtn: {
|
|
width: 40,
|
|
height: 40,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderRadius: 20,
|
|
backgroundColor: "rgba(255,255,255,0.1)",
|
|
marginHorizontal: 4,
|
|
},
|
|
scoreRow: {
|
|
flexDirection: "row",
|
|
alignItems: "flex-start",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 0,
|
|
marginTop: 10,
|
|
},
|
|
teamInfo: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
},
|
|
teamLogoRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginBottom: 10,
|
|
},
|
|
logoContainer: {
|
|
width: 70,
|
|
height: 70,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
starBtnLeft: {
|
|
padding: 8,
|
|
marginRight: -4,
|
|
},
|
|
starBtnRight: {
|
|
padding: 8,
|
|
marginLeft: -4,
|
|
},
|
|
teamLogo: {
|
|
width: 60,
|
|
height: 60,
|
|
resizeMode: "contain",
|
|
borderRadius: 30,
|
|
},
|
|
teamLogoGradient: {
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
teamLogoText: {
|
|
fontSize: 20,
|
|
fontWeight: "700",
|
|
color: "rgba(255, 255, 255, 0.92)",
|
|
},
|
|
teamName: {
|
|
color: "#FFF",
|
|
fontSize: 14,
|
|
fontWeight: "700",
|
|
textAlign: "center",
|
|
lineHeight: 18,
|
|
},
|
|
centerScore: {
|
|
flex: 1.4,
|
|
alignItems: "center",
|
|
paddingTop: 8,
|
|
},
|
|
scoreBox: {
|
|
backgroundColor: "#FFF",
|
|
borderRadius: 16,
|
|
paddingHorizontal: 24,
|
|
paddingVertical: 12,
|
|
marginBottom: 16,
|
|
minWidth: 100,
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 4,
|
|
elevation: 4,
|
|
},
|
|
scoreValue: {
|
|
color: "#000",
|
|
fontSize: 25,
|
|
fontWeight: "700",
|
|
lineHeight: 30,
|
|
letterSpacing: 1,
|
|
},
|
|
fieldBtn: {
|
|
backgroundColor: "#0044FF",
|
|
width: 60,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
borderColor: "rgba(255,255,255,0.2)",
|
|
},
|
|
});
|