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}>
      <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.price}>
                  <Text style={styles.priceInfoText}>{price}</Text>
                  <Text style={styles.priceInfoTextCon}>FCFA</Text>
                </View>
                {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.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}>FCFA</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>

      <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)} FCFA
            </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%",
    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;
