tiefen_space_app/screeens/Search/index.jsx

import {
  View,
  Text,
  Image as NativeImage,
  ScrollView,
  TouchableOpacity,
  Dimensions,
  Platform,
} from "react-native";
import React, { useState, useEffect, useRef, useCallback } from "react";
import { useTailwind } from "tailwind-rn";
import {
  useSafeAreaInsets,
  SafeAreaProvider,
} from "react-native-safe-area-context";
import {
  SearchBar,
  ListItem,
  Icon,
  CheckBox,
  BottomSheet,
} from "@rneui/themed";
import { Image } from "expo-image";
import { useFocusEffect } from "@react-navigation/native";
import Empty from "../../components/Empty";
import Toast from "react-native-toast-message";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";
import MyDivider from "../../components/MyDivider/index";
import MySlider from "../../components/MySlider";
import Picker from "../../components/Picker";
import { get } from "../../utils/storeInfo";
const filterComprehensiveItems = {
  age: { lower_bound: 18, upper_bound: 60 },
  fans: { lower_bound: 1, upper_bound: 1000 },
  weight: { lower_bound: 35, upper_bound: 100 },
  height: { lower_bound: 140, upper_bound: 200 },
  city: "",
  constellation: "",
  is_active_within_a_week: 0,
  comprehensiveUsed: { show: false, used: false },
};
const filterPriceItems = {
  zone_admission_price: { lower_bound: 0, upper_bound: 4000 },
  wechat_coin_price: { lower_bound: 0, upper_bound: 100000 },
  priceUsed: { show: false, used: false },
};
export default function Search({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  const searchRef = useRef(null);
  const screenDimensions = Dimensions.get("screen");
  const [search, setSearch] = useState("");
  const [isMember, setIsMember] = useState(0);
  const [streamers, setStreamers] = useState([]);
  const [recommList, setRecommList] = useState([]);
  const [zones, setZones] = useState([]);
  const [isloading, setIsloading] = useState(false);
  const [dontScroll, setDontScroll] = useState(true);
  const [isFilterVisible, setIsFilterVisible] = useState({
    comprehensive: false,
    zone_admission_price: false,
  });
  const filters = [
    {
      name: "年龄",
      upper_bound: 60,
      lower_bound: 18,
      default: 19,
      step: 1,
      type: "slider",
      unit: "岁",
      key: "age",
      stepValues: Array(61)
        .fill(null)
        .map((_, index) => index),
    },
    {
      name: "全网粉丝",
      upper_bound: 200,
      lower_bound: 1,
      default: 24,
      step: 200 / 9,
      type: "slider",
      unit: "万",
      key: "fans",
      stepValues: [1, 5, 10, 20, 50, 75, 100, 150, 200, 1000],
    },
    {
      name: "身高",
      upper_bound: 200,
      lower_bound: 140,
      default: 160,
      step: 1,
      type: "slider",
      unit: "cm",
      key: "height",
      stepValues: Array(201)
        .fill(null)
        .map((_, index) => index),
    },
    {
      name: "体重",
      upper_bound: 100,
      lower_bound: 35,
      default: 50,
      step: 1,
      type: "slider",
      unit: "kg",
      key: "weight",
      stepValues: Array(101)
        .fill(null)
        .map((_, index) => index),
    },
    {
      name: "所在地",
      upper_bound: 1000,
      lower_bound: 10,
      default: 0,
      step: 1,
      type: "select",
      items: [
        "北京市",
        "天津市",
        "河北省",
        "山西省",
        "内蒙古自治区",
        "辽宁省",
        "吉林省",
        "黑龙江省",
        "上海市",
        "江苏省",
        "浙江省",
        "安徽省",
        "福建省",
        "江西省",
        "山东省",
        "河南省",
        "湖北省",
        "湖南省",
        "广东省",
        "广西壮族自治区",
        "海南省",
        "重庆市",
        "四川省",
        "贵州省",
        "云南省",
        "西藏自治区",
        "陕西省",
        "甘肃省",
        "青海省",
        "宁夏回族自治区",
        "新疆维吾尔自治区",
        "台湾省",
        "香港特别行政区",
        "澳门特别行政区",
      ],
      key: "city",
    },
    {
      name: "星座",
      upper_bound: 1000,
      lower_bound: 10,
      default: 0,
      step: 1,
      type: "select",
      key: "constellation",
      items: [
        "白羊座",
        "‌金牛座",
        "‌双子座",
        "‌巨蟹座",
        "‌狮子座",
        "‌处女座",
        "‌天秤座",
        "‌天蝎座",
        "‌射手座",
        "‌摩羯座",
        "‌水瓶座",
        "‌双鱼座",
      ],
    },
    {
      name: "最近7日内空间有更新",
      upper_bound: 1000,
      lower_bound: 10,
      default: 24,
      step: 1,
      type: "checkbox",
      key: "is_active_within_a_week",
    },
  ];
  const priceFilters = [
    {
      name: "空间价格",
      upper_bound: 300,
      lower_bound: 0,
      default: 24,
      step: 300 / 7,
      type: "slider",
      unit: "¥",
      key: "zone",
      stepValues: [0, 10, 50, 100, 150, 200, 300, 4000],
    },
    {
      name: "微信价格",
      desc: "10金币=1元",
      upper_bound: 30000,
      lower_bound: 0,
      default: 24,
      step: 30000 / 9,
      type: "slider",
      unit: "金币",
      key: "wechat",
      stepValues: [0, 100, 300, 500, 1000, 5000, 10000, 20000, 30000, 100000],
    },
  ];
  const [filtersValue, setFiltersValue] = useState({
    ...filterComprehensiveItems,
    ...filterPriceItems,
  });
  const [currentFiltersChangeValue, setCurrentFiltersChangeValue] = useState({
    ...filterComprehensiveItems,
    ...filterPriceItems,
  });
  const updateSearch = (search) => {
    setSearch(search);
    if (!search) return;
    setIsloading(true);
  };

  //进入页面默认focus
  useEffect(() => {
    searchRef.current.focus();
  }, []);
  useFocusEffect(
    useCallback(() => {
      const getIsMember = async () => {
        const apiUrl = process.env.EXPO_PUBLIC_API_URL;
        let api;
        api = "/api/account/list_by_mid";
        const account = await get("account");
        try {
          const base = await baseRequest();
          const signature = await generateSignature({
            ...base,
            mid: account.mid,
          });
          const response = await fetch(
            `${apiUrl}${api}?signature=${signature}`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                ...base,
                mid: account.mid,
              }),
            }
          );
          const data = await response.json();
          setIsMember(data.data.account.is_a_member);
        } catch (error) {
          console.error(error);
        }
      };
      getIsMember();
    }, [])
  );

  //搜索框文本变化时进行搜索
  useEffect(() => {
    if (!search) {
      setStreamers([]);
      setZones([]);
      return;
    }
    const isNumeric = (str) => {
      return /^\d+$/.test(str);
    };
    const getResult = async () => {
      if (filtersValue.comprehensiveUsed.used || filtersValue.priceUsed.used) {
        handleResetFiltersValue();
        handleResetFiltersSearchValue();
      }
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const isSearchInt = isNumeric(search);
      let api;
      let querryParams;
      if (isSearchInt) {
        api = "/api/streamer/list_ext_fuzzily_by_user_id";
        querryParams = { user_id: parseInt(search, 10) };
      } else {
        api = "/api/streamer/list_ext_fuzzily_by_name";
        querryParams = { name: search };
      }
      try {
        const base = await baseRequest();
        const signature = await generateSignature({
          ...base,
          ...querryParams,
          offset: 0,
          limit: 20,
        });
        const response = await fetch(`${apiUrl}${api}?signature=${signature}`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            ...base,
            ...querryParams,
            offset: 0,
            limit: 20,
          }),
        });
        const data = await response.json();
        if (data.ret === -1) {
          Toast.show({
            type: "error",
            text1: data.msg,
            topOffset: 60,
          });
          return;
        }
        if (!ignore) {
          const zonesData = data.data.list.filter(
            (item) => item.zones.length > 0
          );
          setStreamers(data.data.list);
          setZones(zonesData);
          setRecommList([]);
        }
        setIsloading(false);
      } catch (error) {
        console.error(error);
      }
    };
    let ignore = false;
    getResult();
    return () => {
      ignore = true;
    };
  }, [search]);
  const getFiltersResult = async (obj) => {
    if (search != "") {
      setSearch("");
    }
    setFiltersValue((old) => {
      return {
        ...old,
        ...obj,
      };
    });
    const apiUrl = process.env.EXPO_PUBLIC_API_URL;
    const newObj = obj || { ...filtersValue, ...currentFiltersChangeValue };
    let api;
    let querryParams;
    api = "/api/streamer/filter";
    let currentFilterValue = {
      ...newObj,
      zone_admission_price: {
        lower_bound: newObj.zone_admission_price.lower_bound * 100,
        upper_bound: newObj.zone_admission_price.upper_bound * 100,
      },
    };
    delete currentFilterValue.comprehensiveUsed;
    delete currentFilterValue.priceUsed;
    querryParams = currentFilterValue;

    try {
      const base = await baseRequest();
      const signature = await generateSignature({
        ...base,
        ...querryParams,
        // offset: 0,
        // limit: 20,
      });

      const response = await fetch(`${apiUrl}${api}?signature=${signature}`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...base,
          ...querryParams,
          // offset: 0,
          // limit: 20,
        }),
      });
      const data = await response.json();
      if (data.ret === -1) {
        Toast.show({
          type: "error",
          text1: data.msg,
          topOffset: 60,
        });
        return;
      }
      const zonesData = data.data.streamer_list.filter(
        (item) => item.zones.length > 0
      );
      setStreamers(data.data.streamer_list);
      setZones(zonesData);
      setRecommList(data.data.recomm_list);
      setIsloading(false);
    } catch (error) {
      console.error(error);
    }
  };
  // 更新MySlider值
  const handleChangePriceSliderValue = useCallback((value, item) => {
    if (item.key == "zone") {
      setCurrentFiltersChangeValue((old) => ({
        ...old,
        zone_admission_price: value,
      }));
    } else if (item.key == "wechat") {
      setCurrentFiltersChangeValue((old) => ({
        ...old,
        wechat_coin_price: value,
      }));
    }
  }, []);
  const handleChangeComprehensiveSliderValue = useCallback((value, item) => {
    setCurrentFiltersChangeValue((old) => {
      let newCurrentFiltersChangeValue = {
        ...old,
      };
      newCurrentFiltersChangeValue[item.key] = value;
      return { ...old, ...newCurrentFiltersChangeValue };
    });
  }, []);

  // 重置重置筛选值
  const handleResetFiltersValue = (type) => {
    let obj = filtersValue;
    if (type == "comprehensive") {
      obj = {
        ...filtersValue,
        ...filterComprehensiveItems,
      };
    } else if (type == "zone_admission_price") {
      obj = {
        ...filtersValue,
        ...filterPriceItems,
      };
    } else {
      obj = {
        ...filterComprehensiveItems,
        ...filterPriceItems,
      };
    }
    setCurrentFiltersChangeValue((old) => {
      const newObj = {
        ...old,
        ...obj,
      };
      return newObj;
    });
  };
  //重置筛选查询值
  const handleResetFiltersSearchValue = (type) => {
    let obj = filtersValue;
    if (type == "comprehensive") {
      obj = {
        ...filtersValue,
        ...filterComprehensiveItems,
      };
    } else if (type == "zone_admission_price") {
      obj = {
        ...filtersValue,
        ...filterPriceItems,
      };
    } else {
      obj = {
        ...filterComprehensiveItems,
        ...filterPriceItems,
      };
    }
    setFiltersValue((old) => {
      const newObj = {
        ...old,
        ...obj,
      };
      if (!obj.comprehensiveUsed.used && !obj.priceUsed.used) {
        setRecommList([]);
        setStreamers([]);
        setZones([]);
      } else {
        getFiltersResult(newObj);
      }
      return newObj;
    });
  };
  //空间组件
  const ZoneItem = ({ item, onlyOne }) => {
    return (
      <ListItem
        onPress={() =>
          navigation.navigate("SpaceIntroduce", { mid: item?.mid })
        }
        containerStyle={tailwind("p-0 bg-[#07050A]")}
      >
        <View style={tailwind("flex flex-col flex-1")}>
          <View style={tailwind("flex-row py-3")}>
            <Image
              style={tailwind("w-12 h-12 rounded-full")}
              source={item?.avatar?.images[0]?.urls[0]}
              contentFit="cover"
              cachePolicy="disk"
            />
            <View style={tailwind("ml-2 justify-around flex-1")}>
              <View style={tailwind("flex flex-row items-center")}>
                <Text
                  style={tailwind("text-base text-white font-medium")}
                  numberOfLines={1}
                  ellipsizeMode="tail"
                >
                  {item?.name}
                </Text>
                <View
                  style={tailwind(
                    "flex-row items-center py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full"
                  )}
                >
                  <NativeImage
                    source={require("../../assets/icon/12DP/ID.png")}
                  />
                  <Text
                    style={tailwind("text-white text-xs font-medium ml-0.5")}
                  >
                    {item?.user_id}
                  </Text>
                </View>
              </View>
              <Text
                style={tailwind("text-sm text-[#FFFFFF80]")}
                numberOfLines={1}
                ellipsizeMode="tail"
              >
                {item.zones[0]?.profile}
              </Text>
            </View>
          </View>
          {onlyOne && (
            <View
              style={tailwind("flex flex-col bg-[#FFFFFF1A] rounded-xl mb-2")}
            >
              <Text
                style={tailwind(
                  "text-[#FFFFFF80] text-sm font-medium mt-2 ml-2"
                )}
              >
                Ta的动态·
                {item.zones[0].zone_moment_count > 99
                  ? "99+"
                  : item.zones[0].zone_moment_count}
                {item.zones[0].image_count > 0 &&
                  `  |  图片·${
                    item.zones[0].image_count > 99
                      ? "99+"
                      : item.zones[0].image_count
                  }`}
                {item.zones[0].video_count > 0 &&
                  `  |  视频·${
                    item.zones[0].video_count > 99
                      ? "99+"
                      : item.zones[0].video_count
                  }`}
              </Text>
              <View
                style={{
                  aspectRatio: "1/1",
                  ...tailwind("flex flex-row"),
                }}
              >
                <View
                  style={{
                    flexBasis: "66.66%",
                    paddingTop: 8,
                    paddingRight: 8,
                  }}
                >
                  <Image
                    style={tailwind("rounded-xl w-full h-full")}
                    source={item?.shorts?.videos[0]?.cover_urls[0]}
                    contentFit="cover"
                    cachePolicy="disk"
                  />
                  <View
                    style={tailwind(
                      "flex absolute w-full h-full left-0 top-0 z-10 justify-center items-center"
                    )}
                  >
                    <NativeImage
                      source={require("../../assets/icon/others/play.png")}
                    />
                  </View>
                </View>
                <View style={tailwind("flex flex-col basis-1/3")}>
                  <View
                    style={{
                      aspectRatio: "1/1",
                      paddingRight: 0,
                      paddingTop: 8,
                    }}
                  >
                    <Image
                      style={tailwind("rounded-xl w-full h-full")}
                      source={item?.cover?.images[0]?.urls[0]}
                      contentFit="cover"
                      cachePolicy="disk"
                    />
                  </View>
                  {item.album.images.map((_item, index) => {
                    if (index > 1) return;
                    return (
                      <View
                        key={index}
                        style={{
                          aspectRatio: "1/1",
                          paddingRight: 0,
                          paddingTop: 8,
                        }}
                      >
                        <Image
                          style={tailwind("rounded-xl w-full h-full")}
                          source={_item?.urls[0]}
                          contentFit="cover"
                          cachePolicy="disk"
                        />
                      </View>
                    );
                  })}
                </View>
              </View>
            </View>
          )}
        </View>
      </ListItem>
    );
  };

  //主播组件
  const StreamerItem = ({ item }) => {
    return (
      <ListItem
        onPress={() =>
          navigation.navigate("StreamerProfile", {
            mid: item.mid,
          })
        }
        containerStyle={tailwind("p-0 bg-[#07050A]")}
      >
        <View style={tailwind("flex-1")}>
          <View style={tailwind("flex-row py-3")}>
            <Image
              style={tailwind("w-12 h-12 rounded-full")}
              source={item?.avatar?.images[0]?.urls[0]}
              contentFit="cover"
              transition={1000}
              cachePolicy="disk"
            />
            <View style={tailwind("ml-2 justify-around flex-1")}>
              <View style={tailwind("flex flex-row items-center")}>
                <Text
                  style={tailwind("text-base text-white font-medium")}
                  numberOfLines={1}
                  ellipsizeMode="tail"
                >
                  {item?.name}
                </Text>
                <View
                  style={tailwind(
                    "flex-row items-center py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full"
                  )}
                >
                  <NativeImage
                    source={require("../../assets/icon/12DP/ID.png")}
                  />
                  <Text
                    style={tailwind("text-white text-xs font-medium ml-0.5")}
                  >
                    {item?.user_id}
                  </Text>
                </View>
              </View>
              <Text
                style={tailwind("text-sm text-[#FFFFFF80]")}
                numberOfLines={1}
                ellipsizeMode="tail"
              >
                {item.bio}
              </Text>
            </View>
          </View>
        </View>
      </ListItem>
    );
  };

  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <View style={tailwind("flex-row px-2 items-center")}>
        <Icon
          type="ionicon"
          name="chevron-back"
          size={32}
          color="white"
          onPress={() => navigation.goBack()}
        />
        <SearchBar
          ref={searchRef}
          containerStyle={tailwind("flex-1 bg-[#07050A]")}
          inputContainerStyle={tailwind("h-10 bg-[#FFFFFF1A]")}
          inputStyle={tailwind("text-white")}
          placeholder="搜索Ta的昵称或id"
          platform="ios"
          cancelButtonProps={tailwind("text-[#FF669E]")}
          cancelButtonTitle="清空"
          clearIcon={() => <></>}
          searchIcon={() => <></>}
          showLoading={isloading}
          onChangeText={updateSearch}
          value={search}
        />
      </View>
      <ScrollView style={tailwind("flex-1")}>
        <View
          style={{
            ...tailwind("flex flex-row px-4"),
            justifyContent: "space-evenly",
          }}
        >
          <TouchableOpacity
            onPress={() => {
              setIsFilterVisible({
                ...isFilterVisible,
                comprehensive: !isFilterVisible.comprehensive,
              });
            }}
            style={{
              ...tailwind(
                "pl-4 mr-4 flex-1 rounded-xl flex-row items-center justify-around"
              ),
              borderColor: "#ff75c8",
              borderWidth: filtersValue.comprehensiveUsed.used ? 1 : 0,
              boxSizing: "border-box",
              // width: 110,
              // width: "50%",
            }}
          >
            <Text
              style={{
                ...tailwind("text-white text-lg font-medium"),
                marginVertical: 6,
                color: filtersValue.comprehensiveUsed.used
                  ? "#ff75c8"
                  : "#ffffff80",
              }}
            >
              综合筛选
            </Text>
            {filtersValue.comprehensiveUsed.used && (
              <TouchableOpacity
                onPress={() => {
                  handleResetFiltersValue("comprehensive");
                  handleResetFiltersSearchValue("comprehensive");
                }}
                style={{
                  paddingHorizontal: 10,
                  height: 32,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: "#301024",
                  borderRadius: 12,
                }}
              >
                <Icon
                  type="ionicon"
                  name="close"
                  size={18}
                  color="#ff75c8"
                  style={{ marginLeft: 2 }}
                />
              </TouchableOpacity>
            )}
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              setIsFilterVisible({
                ...isFilterVisible,
                zone_admission_price: !isFilterVisible.zone_admission_price,
              });
            }}
            style={{
              ...tailwind(
                "pl-4 rounded-xl flex-1 flex-row items-center justify-around"
              ),
              borderColor: "#ff75c8",
              borderWidth: filtersValue.priceUsed.used ? 1 : 0,
              boxSizing: "border-box",
              // width: 110,
              width: "50%",
            }}
          >
            <Text
              style={{
                ...tailwind("text-white text-lg font-medium"),
                paddingVertical: 6,
                color: filtersValue.priceUsed.used ? "#ff75c8" : "#ffffff80",
              }}
            >
              价格筛选
            </Text>
            {filtersValue.priceUsed.used && (
              <TouchableOpacity
                onPress={() => {
                  handleResetFiltersValue("zone_admission_price");
                  handleResetFiltersSearchValue("zone_admission_price");
                }}
                style={{
                  paddingHorizontal: 10,
                  height: 32,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: "#301024",
                  borderRadius: 12,
                }}
              >
                <Icon
                  type="ionicon"
                  name="close"
                  size={18}
                  color="#ff75c8"
                  style={{ marginLeft: 2 }}
                />
              </TouchableOpacity>
            )}
          </TouchableOpacity>
        </View>
        <View
          style={{
            display: "flex",
            flex: 1,
          }}
        >
          <BottomSheet
            // containerStyle={{ marginTop: 80 }}
            onBackdropPress={() =>
              setIsFilterVisible({
                zone_admission_price: false,
                comprehensive: false,
              })
            }
            backdropStyle={{ backgroundColor: "#0000004d" }}
            scrollViewProps={{
              scrollEnabled: dontScroll,
              contentContainerStyle: {
                // paddingTop: 20,
                backgroundColor: "black",
                borderRadius: 12,
              },
              onScroll: (event) => {
                const { y } = event.nativeEvent.contentOffset;
                if (y < -50) {
                  setIsFilterVisible({
                    zone_admission_price: false,
                    comprehensive: false,
                  });
                }
              },
            }}
            isVisible={isFilterVisible.comprehensive}
            style={{
              paddingTop: Platform.OS != "ios" ? 55 : 110,
            }}
          >
            <View>
              {filters.map((item, index) => (
                <View
                  key={index}
                  style={{
                    ...tailwind(`p-4 rounded-xl `),
                    backgroundColor: "#13121f",
                    margin: 18,
                    marginBottom: 3,
                    flexDirection: item.type !== "slider" ? "row" : "col",
                    justifyContent: "space-between",
                    alignItems: item.type == "slider" ? "flex-start" : "center",
                    // paddingBottom: 50,
                  }}
                >
                  <Text
                    style={{
                      ...tailwind("text-white font-medium"),
                      // marginVertical: 6,
                    }}
                  >
                    {item.name}
                  </Text>
                  {item.type == "slider" ? (
                    <View style={{ paddingVertical: 6 }}>
                      <MySlider
                        height={40}
                        lower_bound={item.lower_bound}
                        upper_bound={item.upper_bound}
                        itemKey={item.key}
                        handleFunc={() => {
                          setDontScroll((old) => !old);
                        }}
                        leftValue={
                          currentFiltersChangeValue[item.key]?.lower_bound
                        }
                        rightValue={
                          currentFiltersChangeValue[item.key]?.upper_bound
                        }
                        step={item.step}
                        hasInfinity={item.key == "fans"}
                        stepValues={item.stepValues}
                        onChange={(value) =>
                          handleChangeComprehensiveSliderValue(value, item)
                        }
                        maximumTrackTintColor="#382435"
                        minimumTrackTintColor="#ff75c8"
                        processHeight={5}
                        unit={item.unit}
                        unitSite={item.key == "zone" ? "left" : "right"}
                        thumbImage={require("../../assets/icon/32DP/edit.png")}
                      />
                    </View>
                  ) : item.type == "checkbox" ? (
                    <CheckBox
                      checked={
                        currentFiltersChangeValue?.is_active_within_a_week
                      }
                      onPress={
                        () =>
                          // setCurrentFiltersChangeValue((old) => ({
                          //   ...old,
                          //   is_active_within_a_week: old.is_active_within_a_week
                          //     ? 0
                          //     : 1,
                          // }))
                          handleChangeComprehensiveSliderValue(
                            currentFiltersChangeValue.is_active_within_a_week
                              ? 0
                              : 1,
                            item
                          )
                        // setFiltersValue((old) => ({
                        //   ...old,
                        //   is_active_within_a_week: old.is_active_within_a_week
                        //     ? 0
                        //     : 1,
                        // }))
                      }
                      iconType="material-community"
                      checkedIcon="checkbox-marked"
                      uncheckedIcon="checkbox-blank-outline"
                      checkedColor="#FF669E"
                      containerStyle={tailwind("p-0 m-0 bg-transparent")}
                      size={24}
                    />
                  ) : (
                    <Picker
                      items={item.items?.map((it, index) => ({
                        label: it,
                        value: it,
                      }))}
                      placeholder={{ label: "不限", value: "" }}
                      value={
                        item.key == "constellation"
                          ? currentFiltersChangeValue?.constellation
                          : currentFiltersChangeValue?.city
                      }
                      onChange={(value) =>
                        handleChangeComprehensiveSliderValue(value, item)
                      }
                    />
                  )}
                </View>
              ))}
              <View
                style={{
                  ...tailwind("flex-row justify-around items-center mb-4 p-4"),
                }}
              >
                {Platform.OS != "ios" && (
                  <View
                    style={{
                      ...tailwind(
                        "p-2 rounded-xl flex justify-center items-center mr-2"
                      ),
                      backgroundColor: "#ffffff1a",
                      width: 46,
                      height: 46,
                    }}
                  >
                    <Icon
                      type="ionicon"
                      name="close"
                      size={32}
                      color="white"
                      onPress={() => {
                        setIsFilterVisible({
                          zone_admission_price: false,
                          comprehensive: false,
                        });
                        setCurrentFiltersChangeValue(filtersValue);
                      }}
                    />
                  </View>
                )}
                {isMember == 1 && (
                  <TouchableOpacity
                    style={{
                      ...tailwind("text-white px-4 py-2 rounded-xl mr-2"),
                      marginVertical: 6,
                      backgroundColor: "#ffffff1a",
                      width: 120,
                    }}
                    onPress={() => handleResetFiltersValue("comprehensive")}
                  >
                    <Text
                      style={{
                        ...tailwind(
                          "text-white text-lg font-medium  text-center"
                        ),
                      }}
                    >
                      重置
                    </Text>
                  </TouchableOpacity>
                )}
                <TouchableOpacity
                  onPress={() => {
                    setIsFilterVisible({
                      zone_admission_price: false,
                      comprehensive: false,
                    });
                    if (!isMember) {
                      navigation.navigate("WebWithoutHeader", {
                        uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip",
                      });
                      return;
                    }

                    getFiltersResult({
                      ...currentFiltersChangeValue,
                      priceUsed: filtersValue.priceUsed,
                    });
                    setFiltersValue((old) => ({
                      ...old,
                      comprehensiveUsed: { show: false, used: true },
                    }));
                  }}
                  style={{
                    ...tailwind("text-white px-4 py-2 rounded-xl"),
                    marginVertical: 6,
                    backgroundColor: "#ff75c8",
                    minWidth: 120,
                    flex: 1,
                  }}
                >
                  <Text
                    style={{
                      ...tailwind(
                        "text-white text-lg font-medium  text-center"
                      ),
                    }}
                  >
                    {!isMember ? "开通VIP后即可筛选" : "确定"}
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
          </BottomSheet>
          <BottomSheet
            backdropStyle={{ backgroundColor: "#0000004d" }}
            onBackdropPress={() =>
              setIsFilterVisible({
                zone_admission_price: false,
                comprehensive: false,
              })
            }
            scrollViewProps={{
              scrollEnabled: dontScroll,
              contentContainerStyle: {
                // paddingTop: 20,
                backgroundColor: "black",
                borderRadius: 12,
              },
              onScroll: (event) => {
                const { y } = event.nativeEvent.contentOffset;
                if (y < -50) {
                  setIsFilterVisible({
                    zone_admission_price: false,
                    comprehensive: false,
                  });
                }
              },
            }}
            isVisible={isFilterVisible.zone_admission_price}
            style={{
              paddingTop: Platform.OS != "ios" ? 55 : 110,
            }}
          >
            <View
              style={{
                backgroundColor: "black",
                borderRadius: 12,
                // flex: 1,
                // position: "relative",
                height:
                  screenDimensions.height - (Platform.OS != "ios" ? 84 : 120),
              }}
            >
              {priceFilters.map((item, index) => (
                <View
                  key={index}
                  style={{
                    ...tailwind(`p-4 rounded-xl`),
                    backgroundColor: "#13121f",
                    margin: 18,
                    marginBottom: 6,
                    flexDirection: item.type !== "slider" ? "row" : "col",
                    justifyContent: "space-between",
                    // alignItems: "center",
                    // paddingBottom: 50,
                  }}
                >
                  <Text
                    style={{
                      ...tailwind("text-white font-medium"),
                      marginVertical: 6,
                    }}
                  >
                    {item.name}
                  </Text>
                  <MySlider
                    height={40}
                    lower_bound={item.lower_bound}
                    upper_bound={item.upper_bound}
                    leftValue={
                      item.key == "zone"
                        ? currentFiltersChangeValue?.zone_admission_price
                            ?.lower_bound
                        : currentFiltersChangeValue?.wechat_coin_price
                            ?.lower_bound
                    }
                    rightValue={
                      item.key == "zone"
                        ? currentFiltersChangeValue?.zone_admission_price
                            ?.upper_bound
                        : currentFiltersChangeValue?.wechat_coin_price
                            ?.upper_bound
                    }
                    stepValues={item.stepValues}
                    step={item.step}
                    handleFunc={() => {
                      setDontScroll((old) => !old);
                    }}
                    hasInfinity={true}
                    itemKey={item.key}
                    onChange={(value) =>
                      handleChangePriceSliderValue(value, item)
                    }
                    maximumTrackTintColor="#382435"
                    minimumTrackTintColor="#ff75c8"
                    processHeight={5}
                    unit={item.unit}
                    unitSite={item.key == "zone" ? "left" : "right"}
                    thumbImage={require("../../assets/icon/32DP/edit.png")}
                  />
                </View>
              ))}
              <Text
                style={{
                  ...tailwind("text-sm font-medium mt-1 px-4"),
                  color: "#ffffff80",
                }}
              >
                *{priceFilters[1]?.desc}
              </Text>
              <View
                style={{
                  ...tailwind("flex-row justify-around items-center mb-4 p-4"),
                  position: "absolute",
                  bottom: 0,
                  width: "100%",
                }}
              >
                {Platform.OS != "ios" && (
                  <View
                    style={{
                      ...tailwind(
                        "p-2 rounded-xl flex justify-center items-center mr-2"
                      ),
                      backgroundColor: "#ffffff1a",
                      width: 46,
                      height: 46,
                    }}
                  >
                    <Icon
                      type="ionicon"
                      name="close"
                      size={32}
                      color="white"
                      onPress={() => {
                        setIsFilterVisible({
                          zone_admission_price: false,
                          comprehensive: false,
                        });
                        setCurrentFiltersChangeValue(filtersValue);
                      }}
                    />
                  </View>
                )}
                {isMember == 1 && (
                  <TouchableOpacity
                    style={{
                      ...tailwind("text-white px-4 py-2 rounded-xl mr-2"),
                      marginVertical: 6,
                      backgroundColor: "#ffffff1a",
                      width: 120,
                    }}
                    onPress={() =>
                      handleResetFiltersValue("zone_admission_price")
                    }
                  >
                    <Text
                      style={{
                        ...tailwind(
                          "text-white text-lg font-medium  text-center"
                        ),
                      }}
                    >
                      重置
                    </Text>
                  </TouchableOpacity>
                )}
                <TouchableOpacity
                  onPress={() => {
                    setIsFilterVisible({
                      zone_admission_price: false,
                      comprehensive: false,
                    });
                    if (!isMember) {
                      navigation.navigate("WebWithoutHeader", {
                        uri: process.env.EXPO_PUBLIC_WEB_URL + "/vip",
                      });
                      return;
                    }
                    getFiltersResult({
                      ...currentFiltersChangeValue,
                      comprehensiveUsed: filtersValue.comprehensiveUsed,
                    });
                    setFiltersValue((old) => ({
                      ...old,
                      priceUsed: { show: false, used: true },
                    }));
                  }}
                  style={{
                    ...tailwind("text-white px-4 py-2 rounded-xl"),
                    marginVertical: 6,
                    backgroundColor: "#ff75c8",
                    minWidth: 120,
                    flex: 1,
                  }}
                >
                  <Text
                    style={{
                      ...tailwind(
                        "text-white text-lg font-medium  text-center"
                      ),
                    }}
                  >
                    {!isMember ? "开通VIP后即可筛选" : "确定"}
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
          </BottomSheet>
        </View>
        <View style={tailwind("flex-1 px-4")}>
          {zones.length > 0 && (
            <Text style={tailwind("mt-2 text-white text-xl font-medium")}>
              空间
            </Text>
          )}
          {zones?.map((item, index) => (
            <ZoneItem key={index} item={item} onlyOne={zones.length == 1} />
          ))}
          {zones.length > 0 && <MyDivider style={tailwind("my-2")} />}
          {streamers.length > 0 && (
            <Text style={tailwind("mt-2 text-white text-xl font-medium")}>
              用户
            </Text>
          )}
          {streamers?.map((item, index) => (
            <StreamerItem key={index} item={item} />
          ))}
          {recommList.length > 0 && streamers.length > 0 && (
            <MyDivider style={tailwind("my-2")} />
          )}
          {recommList.length > 0 && (
            <Text style={tailwind("mt-2 text-white text-xl font-medium")}>
              猜你喜欢
            </Text>
          )}
          {recommList
            .filter((it) => it.zones.length > 0)
            ?.map((item, index) => (
              <ZoneItem key={index} item={item} onlyOne={false} />
            ))}

          {streamers.length === 0 && recommList.length === 0 && (
            <Empty type={search ? "search" : "nodata"} />
          )}
        </View>
      </ScrollView>
    </View>
  );
}