import React, { useEffect, useCallback, useState } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Modal,
  InteractionManager,
  Alert,
  TextInput,
  ImageBackground,
} from "react-native";
import widthUtils from "../utils/widthUtils";
import fontSize from "../utils/fontsizeUtils";
import CloseIcon from "../components/CloseIcon";
import XIconBottom from "../components/XIconBottom";
import XIconTop from "../components/XIconTop";
import useBurialPointStore from "../store/burialPoint";
import {
  ProductDetailParams,
  ProductGroupList,
  SkuAttribute,
  Sku,
} from "../services/api/productApi";
import { cartApi } from "../services/api/cart";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import ImageView from "react-native-image-viewing";
import useProductCartStore from "../store/productCart";
import useUserStore from "../store/user";
interface ProductCardProps {
  onClose: () => void;
  product: ProductDetailParams;
  groupList: ProductGroupList[];
}

const ProductCard: React.FC<ProductCardProps> = ({
  onClose,
  product: localProduct,
  groupList: localGroupList,
}: {
  onClose: () => void;
  product: ProductDetailParams;
  groupList: ProductGroupList[];
}) => {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
  const [images, setImages] = useState<string[]>([]);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [imageViewerVisible, setImageViewerVisible] = useState(false);
  const {
    user: { user_id, vip_level, currency },
  } = useUserStore();
  const { logAddToCart } = useBurialPointStore();
  const {
    product,
    groupList,
    imgTitle,
    price,
    hasImg,
    noImgList,
    sizeTitle,
    size,
    flag,
    totalPrice,
    selectedSize,
    setProduct,
    setGroupList,
    setImgTitle,
    setPrice,
    setHasImg,
    setNoImgList,
    setSizeTitle,
    setSize,
    setFlag,
    setTotalPrice,
    setSelectedSize,
    processProductData,
    handleSizeSelect,
    handleNoImgSizeSelect,
    handleColorSelect,
  } = useProductCartStore();

  useEffect(() => {
    setProduct(localProduct);
    setGroupList(localGroupList);
    processProductData();
  }, [localProduct, localGroupList]);

  // 加入购物车
  const addCartHandel = () => {
    if (!user_id) {
      Alert.alert("添加失败", "请先登录");
      return;
    }
    if (totalPrice === 0) {
      Alert.alert("添加失败", "请选择商品");
      return;
    }
    if (selectedSize < product.min_order_quantity) {
      Alert.alert("添加失败", "小于最小购买数量");
      return;
    }
    if (groupList.length > 1) {
      const selectedSku =
        hasImg?.attributes?.filter((item) => (item.size ?? 0) > 0) || [];
      const skus: { sku_id: number; quantity: number }[] = [];
      selectedSku.forEach((item) => {
        item.list?.forEach((item) => {
          if ((item.size ?? 0) > 0) {
            skus.push({
              sku_id: item.sku_id,
              quantity: item.size as number,
            });
          }
        });
      });
      const data = {
        offer_id: product.offer_id,
        skus,
      };

      cartApi(data)
        .then((res) => {
          const log =
            selectedSku[0].list?.filter((item) => (item.size ?? 0) > 0) || [];
          log.forEach((item) => {
            const logData = {
              offer_id: product?.offer_id || 0,
              category_id: product?.category_id || 0,
              price: item.offer_price || price || 0,
              all_price: totalPrice || 0,
              currency: currency || "",
              sku_id: item?.sku_id || 0,
              quantity: (item?.size as number) || 0,
              product_name: product?.subject || "",
              timestamp: new Date().toISOString(),
              sku_img: selectedSku[0].sku_image_url || "",
              all_quantity: selectedSize || 0,
            };
            logAddToCart(
              logData,
              navigation.getState().routes[navigation.getState().index - 1]
                ?.name as string
            );
          });
        })
        .catch((err) => {
          Alert.alert("添加失败", "请稍后再试");
        });
    } else if (groupList.length === 1) {
      const selectedSku =
        noImgList.filter((item) => (item.size ?? 0) > 0) || [];
      const skus: { sku_id: number; quantity: number }[] = [];
      selectedSku.forEach((item) => {
        skus.push({
          sku_id: item.sku_id,
          quantity: item.size as number,
        });
      });
      const data = {
        offer_id: product.offer_id,
        skus,
      };
      cartApi(data)
        .then((res) => {
          console.log(selectedSku);

          selectedSku.forEach((item) => {
            console.log(item);

            const logData = {
              offer_id: product?.offer_id || 0,
              category_id: product?.category_id || 0,
              price: item.offer_price || price || 0,
              all_price: totalPrice || 0,
              currency: currency || "",
              sku_id: item?.sku_id || 0,
              quantity: (item?.size as number) || 0,
              product_name: product?.subject || "",
              timestamp: new Date().toISOString(),
              sku_img: selectedSku[0].sku_image_url || "",
              all_quantity: selectedSize || 0,
            };

            console.log(logData);

            //  logAddToCart(logData,navigation.getState().routes[navigation.getState().index - 1]?.name as string)
          });
        })
        .catch((err) => {
          Alert.alert("添加失败", "请稍后再试");
        });
    }
    setDeleteModalVisible(true);
  };

  const cancelDelete = () => {
    // 关闭确认对话框
    setDeleteModalVisible(false);
    onClose();
  };

  const handleNavigateToCart = useCallback(() => {
    setDeleteModalVisible(false);
    InteractionManager.runAfterInteractions(() => {
      navigation.navigate("MainTabs", { screen: "Cart" });
    });
  }, [navigation]);

  // 图片预览
  const handleImagePress = (imageUrl: string) => {
    setImages([imageUrl]);
    setCurrentImageIndex(0);
    setImageViewerVisible(true);
  };

  return (
    <View style={styles.wrapper}>
      <ScrollView style={{ flex: 1 }}>
        <View style={styles.container}>
          <View style={styles.productInfo}>
            <View style={styles.productBigImgBox}>
              <Image source={{ uri: imgTitle }} style={styles.productBigImg} />
              <View style={styles.cornerView}>
                <View style={styles.topRightIcon}>
                  <XIconTop size={6} />
                </View>
                <View style={styles.bottomLeftIcon}>
                  <XIconBottom size={6} />
                </View>
              </View>
            </View>
            <View style={styles.productInfoBox}>
              <View style={styles.priceInfo}>
                <View style={styles.priceInfoBox}>
                  <View style={styles.priceInfoBoxVip}>
                    {vip_level > 0 && (
                      <>
                        <View style={styles.priceInfoOffer}>
                          <Image
                            source={require("../../assets/img/折扣VIP1 (1).png")}
                            style={styles.priceInfoOfferImg}
                          />
                          <View style={styles.discountTextContainer}>
                            <Text style={styles.discountText}>-5%</Text>
                          </View>
                        </View>
                        <View style={styles.priceInfoVip}>
                          <ImageBackground
                            source={require("../../assets/img/vip1.png")}
                            style={styles.priceInfoVipImg}
                          >
                            <Text style={styles.vipStatusNumeric}>
                              VIP {vip_level}
                            </Text>
                          </ImageBackground>
                        </View>
                      </>
                    )}
                  </View>
                  <View style={styles.price}>
                    <Text style={styles.priceInfoText}>{price}</Text>
                    <Text style={styles.priceInfoTextCon}>{currency}</Text>
                  </View>
                </View>
                <View style={styles.priceInfoClose}>
                  <TouchableOpacity onPress={() => onClose()}>
                    <CloseIcon size={fontSize(20)} />
                  </TouchableOpacity>
                </View>
              </View>

              {/* <ScrollView
                horizontal
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
                style={styles.priceInfoList}
              >
                {product &&
                product.sale_info &&
                product.sale_info.price_range_list &&
                product.sale_info.price_range_list.length > 0
                  ? product.sale_info.price_range_list.map((item, index) => {
                      return (
                        <View style={styles.priceList} key={index}>
                          <View style={styles.priceListBox}>
                            <Text style={styles.priceListBoxText}>
                              {item.price}
                            </Text>
                            <Text style={styles.priceListBoxTextCon}>{currency}</Text>
                          </View>
                          <View style={styles.priceListBoxPie}>
                            <Text style={styles.priceListBoxListText}>
                              &gt;= {item.min_quantity} <Text>硬币</Text>
                            </Text>
                          </View>
                        </View>
                      );
                    })
                  : null}
              </ScrollView> */}
            </View>
          </View>
          {/* 图片和文字 */}
          {hasImg && groupList.length > 1 && hasImg.has_image && (
            <View style={styles.productBox}>
              {hasImg && (
                <>
                  <View style={styles.productTit}>
                    <Text style={styles.productTitText}>
                      {hasImg.attribute_name} :{" "}
                    </Text>
                    <Text style={styles.productTitText}>{size}</Text>
                  </View>

                  <ScrollView
                    style={styles.productBoxImgList}
                    horizontal
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                  >
                    {hasImg?.attributes?.map((item, index) => {
                      return (
                        <TouchableOpacity
                          style={[
                            styles.productBoxImgListBox,
                            item?.has_color &&
                              styles.productBoxImgListBoxActive,
                          ]}
                          key={index}
                          onPress={() =>
                            handleColorSelect(
                              item?.value || "",
                              index,
                              item?.sku_image_url || ""
                            )
                          }
                        >
                          <Image
                            source={{ uri: item?.sku_image_url || "" }}
                            style={styles.productBoxImgListBoxImg}
                          />
                          {(item?.size ?? 0) > 0 && (
                            <View style={styles.fixedCornerView}>
                              <Text style={styles.fixedCornerViewText}>
                                x{item.size}
                              </Text>
                            </View>
                          )}
                        </TouchableOpacity>
                      );
                    })}
                  </ScrollView>
                </>
              )}
              <View style={styles.productTit}>
                <Text style={styles.productTitText}>{sizeTitle}</Text>
              </View>
              <View style={{ flex: 1 }}>
                <ScrollView
                  style={styles.sizePrice}
                  showsHorizontalScrollIndicator={false}
                  showsVerticalScrollIndicator={false}
                >
                  <View style={styles.sizePriceBox}>
                    {hasImg &&
                      hasImg.attributes
                        ?.find((item) => item?.has_color)
                        ?.list.map((list, index1) => (
                          <View style={styles.sizePriceBoxItems} key={index1}>
                            <View style={styles.sizePriceBoxItem}>
                              <View style={styles.sizePriceBoxItemTextBox}>
                                {(list?.size ?? 0) > 0 && (
                                  <Text style={styles.selectedNumText}>
                                    x{list?.size}
                                  </Text>
                                )}
                                <Text style={styles.priceText}>
                                  {list?.offer_price || price || 0}
                                </Text>
                                <Text
                                  style={styles.sizePriceBoxItemText}
                                  numberOfLines={1}
                                  ellipsizeMode="tail"
                                >
                                  {list.attributes?.[0]?.value}
                                </Text>
                              </View>
                              <Text style={styles.amountText}>
                                库存 {list?.amount_on_sale ?? 0}
                              </Text>
                            </View>
                            <View style={styles.sizePriceBoxStepForward}>
                              <TouchableOpacity
                                style={styles.sizePriceBoxStepForwardButton}
                                onPress={() =>
                                  handleSizeSelect(
                                    list?.attributes?.[0]?.value,
                                    "-",
                                    index1,
                                    list?.amount_on_sale ?? 0
                                  )
                                }
                              >
                                <Text>-</Text>
                              </TouchableOpacity>
                              <TextInput
                                style={styles.sizePriceBoxStepForwardInput}
                                value={list?.size?.toString() ?? "0"}
                                keyboardType="numeric"
                                onChangeText={(text) =>
                                  handleSizeSelect(
                                    list?.attributes?.[0]?.value,
                                    text,
                                    index1,
                                    list?.amount_on_sale ?? 0
                                  )
                                }
                              />
                              <TouchableOpacity
                                style={styles.sizePriceBoxStepForwardButton}
                                onPress={() =>
                                  handleSizeSelect(
                                    list?.attributes?.[0]?.value,
                                    "+",
                                    index1,
                                    list?.amount_on_sale ?? 0
                                  )
                                }
                              >
                                <Text>+</Text>
                              </TouchableOpacity>
                            </View>
                          </View>
                        ))}
                  </View>
                </ScrollView>
              </View>
            </View>
          )}
          {/* 两个都是文字 */}
          {hasImg && groupList.length > 1 && !hasImg.has_image && (
            <View style={styles.productBox}>
              <View style={styles.productTit}>
                <Text style={styles.productTitText}>
                  {hasImg?.attribute_name || ""}
                </Text>
              </View>

              {hasImg.attributes?.map((item, index) => {
                return (
                  <TouchableOpacity
                    style={[
                      styles.noImgBoxs,
                      item?.has_color && styles.productBoxImgListBoxActive,
                    ]}
                    key={index}
                    onPress={() => {
                      handleColorSelect(
                        item?.value || "",
                        index,
                        item?.sku_image_url || ""
                      );
                    }}
                  >
                    {(item?.size ?? 0) > 0 && (
                      <Text style={styles.selectedNumText}>x{item?.size}</Text>
                    )}
                    <Text style={styles.noImgBoxsText}>
                      {item?.value || ""}
                    </Text>
                  </TouchableOpacity>
                );
              })}

              <View style={styles.productBox}>
                <Text style={styles.productTitText}>{sizeTitle}</Text>
              </View>
              <View style={{ flex: 1 }}>
                <ScrollView
                  style={[styles.sizePrice]}
                  showsHorizontalScrollIndicator={false}
                  showsVerticalScrollIndicator={false}
                >
                  <View style={styles.sizePriceBox}>
                    {hasImg &&
                      hasImg.attributes
                        ?.find((item) => item?.has_color)
                        ?.list.map((list, index1) => (
                          <View style={styles.sizePriceBoxItems} key={index1}>
                            <View style={styles.sizePriceBoxItem}>
                              <View style={styles.sizePriceBoxItemTextBox}>
                                {(list?.size ?? 0) > 0 && (
                                  <Text style={styles.selectedNumText}>
                                    x{list?.size}
                                  </Text>
                                )}
                                <Text style={styles.priceText}>
                                  {list?.offer_price || price || 0}
                                </Text>
                                <Text
                                  style={styles.sizePriceBoxItemText}
                                  numberOfLines={1}
                                  ellipsizeMode="tail"
                                >
                                  {list.attributes?.[0]?.value}
                                </Text>
                              </View>
                              <Text style={styles.amountText}>
                                库存 {list?.amount_on_sale ?? 0}
                              </Text>
                            </View>
                            <View style={styles.sizePriceBoxStepForward}>
                              <TouchableOpacity
                                style={styles.sizePriceBoxStepForwardButton}
                                onPress={() =>
                                  handleSizeSelect(
                                    list?.attributes?.[0]?.value,
                                    "-",
                                    index1,
                                    list?.amount_on_sale ?? 0
                                  )
                                }
                              >
                                <Text>-</Text>
                              </TouchableOpacity>
                              <TextInput
                                style={styles.sizePriceBoxStepForwardInput}
                                value={list?.size?.toString() ?? "0"}
                                keyboardType="numeric"
                                onChangeText={(text) =>
                                  handleSizeSelect(
                                    list?.attributes?.[0]?.value,
                                    text,
                                    index1,
                                    list?.amount_on_sale ?? 0
                                  )
                                }
                              />
                              <TouchableOpacity
                                style={styles.sizePriceBoxStepForwardButton}
                                onPress={() =>
                                  handleSizeSelect(
                                    list?.attributes?.[0]?.value,
                                    "+",
                                    index1,
                                    list?.amount_on_sale ?? 0
                                  )
                                }
                              >
                                <Text>+</Text>
                              </TouchableOpacity>
                            </View>
                          </View>
                        ))}
                  </View>
                </ScrollView>
              </View>
            </View>
          )}
          {/* 只有一个文字 */}
          {noImgList && groupList.length === 1 && !flag && (
            <View style={styles.productBox}>
              <View style={styles.productTit}>
                <Text style={styles.productTitText}>{sizeTitle}</Text>
              </View>
              <View style={{ flex: 1 }}>
                <ScrollView
                  style={[styles.sizePrice]}
                  showsVerticalScrollIndicator={false}
                >
                  {noImgList &&
                    noImgList?.map((list, index1) => (
                      <View style={styles.sizePriceBoxItems} key={index1}>
                        <View style={styles.sizePriceBoxItem}>
                          <View style={styles.sizePriceBoxItemTextBox}>
                            {(list?.size ?? 0) > 0 && (
                              <Text style={styles.selectedNumText}>
                                x{list?.size}
                              </Text>
                            )}
                            <Text style={styles.priceText}>
                              {list?.offer_price || price || 0}
                            </Text>
                            <Text
                              style={styles.sizePriceBoxItemText}
                              numberOfLines={1}
                              ellipsizeMode="tail"
                            >
                              {list.attributes?.[0]?.value}
                            </Text>
                          </View>
                          <Text style={styles.amountText}>
                            库存 {list?.amount_on_sale ?? 0}
                          </Text>
                        </View>
                        <View style={styles.sizePriceBoxStepForward}>
                          <TouchableOpacity
                            style={styles.sizePriceBoxStepForwardButton}
                            onPress={() =>
                              handleNoImgSizeSelect(
                                list?.attributes?.[0]?.value,
                                "-",
                                index1,
                                list?.amount_on_sale ?? 0
                              )
                            }
                          >
                            <Text>-</Text>
                          </TouchableOpacity>
                          <TextInput
                            style={styles.sizePriceBoxStepForwardInput}
                            value={list?.size?.toString() ?? "0"}
                            keyboardType="numeric"
                            onChangeText={(text) =>
                              handleNoImgSizeSelect(
                                list?.attributes?.[0]?.value,
                                text,
                                index1,
                                list?.amount_on_sale ?? 0
                              )
                            }
                          />
                          <TouchableOpacity
                            style={styles.sizePriceBoxStepForwardButton}
                            onPress={() =>
                              handleNoImgSizeSelect(
                                list?.attributes?.[0]?.value,
                                "+",
                                index1,
                                list?.amount_on_sale ?? 0
                              )
                            }
                          >
                            <Text>+</Text>
                          </TouchableOpacity>
                        </View>
                      </View>
                    ))}
                </ScrollView>
              </View>
            </View>
          )}

          {/* 只有图片 */}
          {noImgList && groupList.length === 1 && flag && (
            <View style={styles.productBox}>
              <View style={styles.productTit}>
                <Text style={styles.productTitText}>{sizeTitle}</Text>
              </View>
              <View style={{ flex: 1 }}>
                <ScrollView
                  style={[styles.sizePrice]}
                  showsHorizontalScrollIndicator={false}
                  showsVerticalScrollIndicator={false}
                >
                  {noImgList.map((list, index1) => (
                    <View style={styles.allImageBox} key={index1}>
                      <View style={styles.allImageBoxImg}>
                        <Image
                          source={{ uri: list.attributes?.[0]?.sku_image_url }}
                          style={styles.allImageBoxImgImg}
                        />
                      </View>

                      <View style={styles.allImageBoxList}>
                        <View style={styles.allImageBoxListBox}>
                          <View
                            style={{
                              flexDirection: "row",
                              alignItems: "center",
                            }}
                          >
                            <Text
                              style={{
                                fontSize: fontSize(16),
                                fontWeight: "700",
                                fontFamily: "Segoe UI",
                                color: "red",
                                marginRight: 5,
                              }}
                            >
                              {list?.offer_price || price || 0}
                            </Text>
                            <Text
                              style={styles.allImageBoxListBoxText}
                              numberOfLines={1}
                              ellipsizeMode="tail"
                            >
                              {list.attributes?.[0]?.value}
                            </Text>
                          </View>

                          <Text style={styles.amountText}>
                            库存 {list?.amount_on_sale ?? 0}
                          </Text>
                        </View>
                        <View style={styles.allImageBoxListStop}>
                          <TouchableOpacity
                            style={styles.sizePriceBoxStepForwardButton}
                            onPress={() =>
                              handleNoImgSizeSelect(
                                list.attributes?.[0]?.value,
                                "-",
                                index1,
                                list?.amount_on_sale ?? 0
                              )
                            }
                          >
                            <Text>-</Text>
                          </TouchableOpacity>
                          <TextInput
                            style={styles.sizePriceBoxStepForwardInput}
                            keyboardType="numeric"
                            value={list?.size?.toString() ?? "0"}
                            onChangeText={(text) =>
                              handleNoImgSizeSelect(
                                list.attributes?.[0]?.value,
                                text,
                                index1,
                                list?.amount_on_sale ?? 0
                              )
                            }
                          />
                          <TouchableOpacity
                            style={styles.sizePriceBoxStepForwardButton}
                            onPress={() =>
                              handleNoImgSizeSelect(
                                list.attributes?.[0]?.value,
                                "+",
                                index1,
                                list?.amount_on_sale ?? 0
                              )
                            }
                          >
                            <Text>+</Text>
                          </TouchableOpacity>
                        </View>
                      </View>
                    </View>
                  ))}
                </ScrollView>
              </View>
            </View>
          )}
        </View>
      </ScrollView>

      <View style={styles.fixedBottomView}>
        <View style={styles.fixedBottomViewBox}>
          <View style={styles.fixedBottomViewBoxLeft}>
            <Text style={styles.fixedBottomViewBoxLeftText}>总数量:</Text>
            <Text style={styles.fixedBottomViewBoxPriceText}>
              {selectedSize}
            </Text>
          </View>
          <View style={styles.fixedBottomViewBoxRight}>
            <Text style={styles.fixedBottomViewBoxRightText}>总价:</Text>
            <Text style={styles.fixedBottomViewBoxPriceText}>
              {totalPrice.toFixed(2)} {currency}
            </Text>
          </View>
        </View>

        <TouchableOpacity
          style={styles.fixedBottomViewButton}
          onPress={addCartHandel}
        >
          <Text style={styles.fixedBottomViewButtonText}>加入购物车</Text>
        </TouchableOpacity>
      </View>

      <Modal
        visible={deleteModalVisible}
        transparent
        animationType="fade"
        onRequestClose={cancelDelete}
      >
        <View style={styles.overlay}>
          <View style={styles.popup}>
            {/* <Image
      source={require("../assets/image_5f59afb0.png")} // 替换成你实际的路径
      style={styles.image}
    /> */}
            <Text style={styles.promptText}>Supprimer l'article ?</Text>
            <View style={styles.buttonContainer}>
              <TouchableOpacity
                style={styles.cancelButton1}
                onPress={cancelDelete}
              >
                <Text style={styles.cancelText}>Non</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.confirmButton}
                onPress={handleNavigateToCart}
              >
                <Text style={styles.confirmText}>Voir le panier</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  container: {
    flex: 1,
    padding: 19,
    paddingBottom: widthUtils(118, 118).height,
  },
  productInfo: {
    flexDirection: "row",
    height: widthUtils(100, 100).height,
  },
  productBigImgBox: {
    width: widthUtils(100, 100).width,
    height: widthUtils(100, 81000).height,
    borderRadius: 10,
  },
  productBigImg: {
    width: "100%",
    height: "100%",
    borderRadius: 10,
  },
  productInfoBox: {
    flex: 1,
    paddingLeft: 10,
  },
  priceInfo: {
    width: "100%",
    height: "40%",
    flexDirection: "row",
    justifyContent: "space-between",
  },
  priceInfoBox: {
    width: "90%",
    height: "100%",
    gap: 18,
    justifyContent: "space-between",
  },
  priceInfoBoxVip: {
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
  },
  price: {
    flexDirection: "row",
    
  },
  priceInfoText: {
    fontWeight: "700",
    fontSize: fontSize(30),
    fontFamily: "Segoe UI",
    color: "#ff5100",
  },
  priceListBoxText: {
    fontWeight: "700",
    fontSize: fontSize(20),
    fontFamily: "Segoe UI",
  },
  priceListBoxTextCon: {
    fontWeight: "700",
    fontSize: fontSize(14),
    fontFamily: "Segoe UI",
    lineHeight: fontSize(20),
  },
  priceListBoxListText: {
    fontFamily: "Segoe UI",
  },
  priceInfoTextCon: {
    fontWeight: "700",
    fontSize: fontSize(14),
    fontFamily: "Segoe UI",
    color: "#ff5100",
    lineHeight: fontSize(30),
  },
  priceInfoOffer: {
    width: widthUtils(28, 28).width,
    height: widthUtils(28, 28).height,
    position: "relative",
  },
  priceInfoOfferImg: {
    width: "100%",
    height: "100%",
  },
  discountTextContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
  },
  discountText: {
    color: "#512003",
    fontSize: fontSize(12),
    fontWeight: "600",
    fontStyle: "italic",
  },
  priceInfoVip: {
    width: widthUtils(21, 63).width,
    height: widthUtils(21, 63).height,
  },
  priceInfoVipImg: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  vipStatusNumeric: {
    fontStyle: "italic",
    fontWeight: "900",
    fontSize: fontSize(18),
    color: "#f1c355",
    textAlign: "center",
    marginLeft: 2,
  },
  priceInfoClose: {
    width: "10%",
    alignItems: "flex-end",
  },
  priceInfoList: {
    width: "100%",
    padding: 5,
    backgroundColor: "#f3f4f8",
    borderRadius: 10,
    height: "60%",
  },
  priceList: {
    width: widthUtils(100, 100).width,
    height: "100%",
    borderRadius: 10,
    marginRight: 5,
    justifyContent: "flex-start",
    alignItems: "flex-start",
    paddingLeft: 10,
  },
  priceListBox: {
    flexDirection: "row",
    justifyContent: "center",
  },
  priceListBoxPie: {
    alignItems: "flex-start",
  },
  productBox: {
    marginTop: 10,
    flex: 1,
    display: "flex",
    flexDirection: "column",
  },
  productTit: {
    flexDirection: "row",
    width: "100%",
  },
  productTitText: {
    fontSize: fontSize(16),
    fontWeight: "700",
    fontFamily: "Segoe UI",
    color: "#000",
  },
  productBoxImgList: {
    width: "100%",
    paddingTop: 10,
    flexGrow: 0,
    flexDirection: "row",
    flexWrap: "wrap",
  },
  productBoxImgListBox: {
    width: widthUtils(90, 90).width,
    height: widthUtils(90, 90).height,
    backgroundColor: "#f4f4f4",
    borderRadius: 10,
    marginRight: 10,
    marginBottom: 10,
    position: "relative",
  },
  productBoxImgListBoxActive: {
    borderWidth: 1,
    borderColor: "#ff5100",
  },
  noImgBoxsText: {
    width: "100%",
  },
  productBoxImgListBoxImg: {
    width: "100%",
    height: "100%",
    borderRadius: 10,
  },
  sizePrice: {
    flex: 1,
    width: "100%",
  },
  sizePriceBox: {
    width: "100%",
    paddingBottom: 10,
  },
  sizePriceBoxItem: {
    width: "70%",
  },
  sizePriceBoxItemTextBox: {
    flexDirection: "row",
    alignItems: "center",
  },
  selectedNumText: {
    width: widthUtils(16, 30).width,
    height: widthUtils(16, 30).height,
    backgroundColor: "#ff5217",
    borderRadius: 5,
    color: "white",
    textAlign: "center",
    fontSize: fontSize(12),
    fontWeight: "600",
    fontFamily: "Segoe UI",
    marginRight: 5,
    lineHeight: 18,
  },
  sizePriceBoxItems: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 10,
    width: "100%",
  },
  sizePriceBoxItemText: {
    fontSize: fontSize(18),
    color: "#000",
  },
  priceText: {
    fontSize: fontSize(16),
    fontWeight: "700",
    fontFamily: "Segoe UI",
    color: "red",
    marginRight: 5,
  },
  amountText: {
    fontSize: fontSize(16),
    fontWeight: "600",
    fontFamily: "Segoe UI",
    color: "#bdbdbd",
  },
  sizePriceBoxStepForward: {
    width: "30%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  sizePriceBoxStepForwardButton: {
    width: widthUtils(40, 30).width,
    height: widthUtils(40, 30).height,
    backgroundColor: "#f3f4f8",
    justifyContent: "center",
    alignItems: "center",
  },
  sizePriceBoxStepForwardInput: {
    width: widthUtils(40, 30).width,
    height: widthUtils(40, 30).height,
    backgroundColor: "#fff",
    textAlign: "center",
    fontSize: fontSize(14),
    borderWidth: 1,
    borderColor: "#f3f4f8",
    padding: 0,
    lineHeight: fontSize(14),
  },
  fixedBottomView: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    height: widthUtils(118, 118).height,
    width: "100%",
    borderTopWidth: 1,
    borderTopColor: "#f3f4f8",
    padding: 10,
    zIndex: 1000,
    backgroundColor: "white",
  },
  fixedBottomViewBox: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
  },
  fixedBottomViewBoxLeft: {
    width: "50%",
    flexDirection: "row",
    alignItems: "center",
  },
  fixedBottomViewBoxLeftText: {
    fontSize: fontSize(16),
    fontFamily: "Segoe UI",
    color: "#000",
  },
  fixedBottomViewBoxPriceText: {
    fontSize: fontSize(20),
    fontFamily: "Segoe UI",
    color: "#ff5217",
    fontWeight: "700",
  },
  fixedBottomViewBoxRight: {
    width: "50%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  fixedBottomViewBoxRightText: {
    fontSize: fontSize(16),
    fontFamily: "Segoe UI",
  },
  fixedBottomViewButton: {
    marginTop: 10,
    width: "100%",
    height: widthUtils(50, 50).height,
    backgroundColor: "#ff5217",
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  fixedBottomViewButtonText: {
    fontSize: fontSize(16),
    fontFamily: "Segoe UI",
    color: "#fff",
    fontWeight: "700",
    lineHeight: widthUtils(50, 50).height,
  },
  noImgBoxs: {
    width: "100%",
    marginTop: 10,
    padding: 10,
    borderRadius: 10,
    backgroundColor: "#efefef",
    flexDirection: "row",
  },
  allImage: {
    flex: 1,
  },
  allImageBox: {
    flexDirection: "row",
    marginTop: 10,
    alignItems: "center",
  },
  allImageBoxImg: {
    width: 50,
    height: 50,
    borderRadius: 10,
  },
  allImageBoxImgImg: {
    width: "100%",
    height: "100%",
    borderRadius: 10,
  },
  allImageBoxList: {
    flex: 1,
    paddingLeft: 10,
    flexDirection: "row",
  },
  allImageBoxListBox: {
    width: "60%",
    justifyContent: "center",
  },
  allImageBoxListBoxText: {
    fontSize: fontSize(16),
    fontFamily: "Segoe UI",
    color: "#000",
  },
  allImageBoxListStop: {
    width: "40%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  cornerView: {
    position: "absolute",
    top: 0,
    right: 0,
    width: 22,
    height: 22,
    backgroundColor: "#787675",
  },
  topRightIcon: {
    position: "absolute",
    top: 3,
    right: 3,
  },
  bottomLeftIcon: {
    position: "absolute",
    bottom: 3,
    left: 3,
  },
  fixedCornerView: {
    position: "absolute",
    top: 0,
    left: 0,
    width: 30,
    height: 16,
    backgroundColor: "#ff5217",
    borderRadius: 10,
    justifyContent: "center",
    zIndex: 1,
  },
  fixedCornerViewText: {
    fontSize: fontSize(12),
    fontFamily: "Segoe UI",
    color: "#fff",
    fontWeight: "700",
    textAlign: "center",
    lineHeight: 16,
  },
  overlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.4)",
    justifyContent: "center",
    alignItems: "center",
  },
  popup: {
    backgroundColor: "white",
    borderRadius: 10,
    paddingVertical: 27,
    paddingHorizontal: 20,
    alignItems: "center",
    gap: 21,
  },
  image: {
    width: widthUtils(80, 80).width,
    height: widthUtils(80, 80).height,
    borderRadius: 5,
    resizeMode: "cover",
  },
  promptText: {
    fontSize: fontSize(20),
    fontWeight: "600",
    color: "black",
    fontFamily: "Segoe UI", // 注意要在项目中配置字体
  },
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "center",
    marginTop: 10,
  },
  cancelButton1: {
    width: widthUtils(50, 160).width,
    height: widthUtils(50, 160).height,
    borderRadius: 25,
    backgroundColor: "#f2f3f5",
    justifyContent: "center",
    alignItems: "center",
  },
  confirmButton: {
    width: widthUtils(50, 160).width,
    height: widthUtils(50, 160).height,
    borderRadius: 25,
    backgroundColor: "#002fa7",
    justifyContent: "center",
    alignItems: "center",
    marginLeft: 20,
  },
  cancelText: {
    fontSize: fontSize(16),
    fontWeight: "500",
    color: "#333333",
    fontFamily: "Source Han Sans CN", // 注意要在项目中配置字体
  },
  confirmText: {
    fontSize: fontSize(16),
    fontWeight: "500",
    color: "#ffffff",
    fontFamily: "Source Han Sans CN", // 同上
  },
});

export default ProductCard;