"use client";

import React, { useEffect, useRef, useState } from "react";
import {
  Input,
  List,
  DotLoading,
  Toast,
  Image,
  Popup,
  Radio,
  Picker,
  Space,
} from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faClose } from "@fortawesome/free-solid-svg-icons";
import requireAPI from "@/utils/requireAPI";
import { debounce } from "@/utils/tools";
import Empty from "@/components/Empty";
import MySlider from "@/components/MySlider";
import baseRequest from "@/utils/baseRequest";

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 },
};
const newDebounce = debounce(function (fn) {
  fn && fn();
}, 500);
export default function Search() {
  const base = baseRequest();
  const router = useRouter();
  const inputRef = useRef();
  // 获取屏幕高度
  // const scrollHeight = 600;
  const [searchValue, setSearchValue] = useState("");
  const [loading, setLoading] = useState(false);
  const [streamers, setStreamers] = useState([]);
  const [recommList, setRecommList] = useState([]);
  const [dontScroll, setDontScroll] = useState(true);
  const [isMember, setIsMember] = useState(0);
  const [isFilterVisible, setIsFilterVisible] = useState({
    comprehensive: false,
    zone_admission_price: false,
  });
  const [filtersValue, setFiltersValue] = useState({
    ...filterComprehensiveItems,
    ...filterPriceItems,
  });
  const [currentFiltersChangeValue, setCurrentFiltersChangeValue] = useState({
    ...filterComprehensiveItems,
    ...filterPriceItems,
  });
  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],
    },
  ];
  useEffect(() => {
    inputRef.current?.focus();
    getIsMember();
  }, []);

  const isNumeric = (str) => {
    return /^\d+$/.test(str);
  };
  const getResult = async (value) => {
    // console.log("searchValue", value);
    if (filtersValue.comprehensiveUsed.used || filtersValue.priceUsed.used) {
      handleResetFiltersValue();
      handleResetFiltersSearchValue();
    }
    const isSearchInt = isNumeric(value);
    let api = "";
    let querryParams = "";
    if (isSearchInt) {
      api = "/api/streamer/list_ext_fuzzily_by_user_id";
      querryParams = { user_id: parseInt(value, 10) };
    } else {
      api = "/api/streamer/list_ext_fuzzily_by_name";
      querryParams = { name: value };
    }
    try {
      setLoading(true);
      const data = await requireAPI("POST", api, {
        body: {
          ...querryParams,
          offset: 0,
          limit: 20,
        },
      });
      if (data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: data.msg,
          position: "top",
        });
        return;
      }
      // if (!ignore) {
      // const zonesData = data.data.list.filter((item) => item.zones.length > 0);
      setStreamers(data.data.list);
      setRecommList([]);
      // }
      setLoading(false);
    } catch (error) {
      // console.error(error);
    }
  };
  const getIsMember = async () => {
    try {
      const data = await requireAPI(
        "POST",
        "/api/account/list_by_mid",
        {},
        true
      );
      setIsMember(data.data.account.is_a_member);
    } catch (error) {
      // console.error(error);
    }
  };
  //重置筛选值
  const handleResetFiltersValue = async (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([]);
      } else {
        getFiltersResult(newObj);
      }
      return newObj;
    });
  };
  const getFiltersResult = async (obj) => {
    if (searchValue != "") {
      setSearchValue("");
    }
    setFiltersValue((old) => {
      return {
        ...old,
        ...obj,
      };
    });
    // setFiltersValue({ ...filtersValue, ...currentFiltersChangeValue });
    const newObj = obj || { ...filtersValue, ...currentFiltersChangeValue };

    let querryParams;
    let currentFilterValue = {
      ...newObj,
      city: newObj.city == "不限" ? "" : newObj.city,
      constellation: newObj.constellation == "不限" ? "" : newObj.constellation,
      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 data = await requireAPI("POST", "/api/streamer/filter", {
        body: { ...querryParams },
      });
      if (data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: data.msg,
          position: "top",
        });
        return;
      }
      setStreamers(data.data.streamer_list);
      setRecommList(data.data.recomm_list);
      setLoading(false);
    } catch (error) {
      // console.error(error);
    }
  };
  return (
    <div className="">
      <div className="flex items-center p-4 sticky top-0 bg-deepBg z-10">
        <FontAwesomeIcon
          icon={faAngleLeft}
          style={{ maxWidth: "12px" }}
          size="xl"
          className="mr-3"
          onClick={() => {
            router.back();
          }}
        />
        <div className="flex items-center w-full">
          <div className="relative bg-[#FFFFFF1A] rounded-lg px-4 py-1  w-full">
            <Input
              placeholder="搜索Ta的昵称或id"
              autoFocus={true}
              value={searchValue}
              ref={inputRef}
              style={{
                "--font-size": "16px",
              }}
              onChange={(val) => {
                setSearchValue((old) => {
                  let test = (e) => {
                    if (val == "") {
                      setStreamers([]);
                      return;
                    }
                    getResult(val);
                  };
                  newDebounce(test);
                  return val;
                });
              }}
            />
            <div className="absolute top-1/2 -translate-y-1/2 right-2">
              {loading && <DotLoading />}
            </div>
          </div>
          {searchValue && (
            <p
              className="text-base whitespace-no-wrap ml-2 text-primary font-bold"
              onClick={() => {
                setSearchValue("");
                setStreamers([]);
              }}
            >
              清空
            </p>
          )}
        </div>
      </div>
      <div className="grid grid-cols-2 gap-2 justify-evenly pt-4 px-4">
        <div
          className="px-2 py-1 rounded-xl flex items-center justify-around flex-nowrap border-[#ff75c8]"
          style={{
            borderWidth: filtersValue.comprehensiveUsed.used ? 1 : 0,
            boxSizing: "border-box",
          }}
        >
          <span
            className="text-lg font-medium"
            style={{
              marginVertical: "6px",
              color: filtersValue.comprehensiveUsed.used
                ? "#ff75c8"
                : "#ffffff80",
            }}
            onClick={() => {
              setIsFilterVisible({
                ...isFilterVisible,
                comprehensive: !isFilterVisible.comprehensive,
              });
            }}
          >
            综合筛选
          </span>
          {filtersValue.comprehensiveUsed.used && (
            <div
              onClick={() => {
                handleResetFiltersValue("comprehensive");
                handleResetFiltersSearchValue("comprehensive");
              }}
              style={{
                width: "48px",
                backgroundColor: "#301024",
                height: 32,
                borderRadius: 12,
                lineHeight: "32px",
                marginRight: -12,
              }}
              className="text-center"
            >
              <FontAwesomeIcon
                icon={faClose}
                style={{ maxWidth: "12px" }}
                size="xl"
                className="text-[#ff75c8]"
              />
            </div>
          )}
        </div>
        <div
          className="px-2 py-1 rounded-xl flex items-center justify-around flex-nowrap"
          style={{
            borderColor: "#ff75c8",
            borderWidth: filtersValue.priceUsed.used ? "1px" : 0,
            boxSizing: "border-box",
          }}
        >
          <span
            className="text-lg font-medium"
            style={{
              marginVertical: "6px",
              color: filtersValue.priceUsed.used ? "#ff75c8" : "#ffffff80",
            }}
            onClick={() => {
              setIsFilterVisible({
                ...isFilterVisible,
                zone_admission_price: !isFilterVisible.zone_admission_price,
              });
            }}
          >
            价格筛选
          </span>
          {filtersValue.priceUsed.used && (
            <div
              onClick={() => {
                handleResetFiltersValue("zone_admission_price");
                handleResetFiltersSearchValue("zone_admission_price");
              }}
              style={{
                width: "48px",
                backgroundColor: "#301024",
                height: 32,
                borderRadius: 12,
                lineHeight: "32px",
                marginRight: -12,
              }}
              className="text-center"
            >
              <FontAwesomeIcon
                icon={faClose}
                style={{ maxWidth: "12px" }}
                size="xl"
                className="text-[#ff75c8]"
              />
            </div>
          )}
        </div>
      </div>
      <div
        style={{
          display: "flex",
          flex: 1,
        }}
      >
        <Popup
          destroyOnClose={true}
          closeOnMaskClick={true}
          // stopPropagation={["touchstart"]}
          maskStyle={{ backgroundColor: "#0000004d" }}
          visible={isFilterVisible.comprehensive}
          bodyStyle={{
            height: "calc(100vh - 110px)",
            backgroundColor: "black",
          }}
          onMaskClick={() =>
            setIsFilterVisible({
              zone_admission_price: false,
              comprehensive: false,
            })
          }
        >
          <Space className="p-4" justify="between" align="center" block={true}>
            <p className="text-xl font-bold">综合筛选</p>
            <div
              className="p-2 rounded-xl flex justify-center items-center mr-2 bg-[#ffffff1a]"
              style={{
                width: 32,
                height: 32,
              }}
            >
              <FontAwesomeIcon
                icon={faClose}
                size="xl"
                className="text-whitex"
                onClick={() => {
                  setIsFilterVisible({
                    zone_admission_price: false,
                    comprehensive: false,
                  });
                  setCurrentFiltersChangeValue(filtersValue);
                }}
              />
            </div>
          </Space>
          <div
            className="overflow-y-auto"
            style={{ height: "calc(100vh - 170px)" }}
          >
            {filters.map((item, index) => (
              <div
                key={index}
                className="flex justify-between items-center p-4 rounded-xl bg-[#13121f] relative"
                style={{
                  height: item.type == "slider" ? 120 : "auto",
                  margin: 18,
                  marginBottom: 3,
                  flexDirection: item.type !== "slider" ? "row" : "col",
                  alignItems: item.type == "slider" ? "flex-start" : "center",
                  // paddingBottom: 50,
                }}
              >
                <span className="font-medium">{item.name}</span>
                {item.type == "slider" ? (
                  <div
                    className="absolute top-[40px]"
                    style={{ paddingVertical: 6 }}
                  >
                    <MySlider
                      height={40}
                      width={
                        typeof window !== "undefined"
                          ? window.innerWidth - 44
                          : 0
                      }
                      lower_bound={item.lower_bound}
                      upper_bound={item.upper_bound}
                      itemKey={item.key}
                      handleFunc={() => {
                        setDontScroll((old) => !old);
                      }}
                      leftValue={
                        item.key == "age"
                          ? currentFiltersChangeValue?.age?.lower_bound
                          : item.key == "height"
                          ? currentFiltersChangeValue?.height?.lower_bound
                          : item.key == "weight"
                          ? currentFiltersChangeValue?.weight?.lower_bound
                          : currentFiltersChangeValue?.fans?.lower_bound
                      }
                      rightValue={
                        item.key == "age"
                          ? currentFiltersChangeValue?.age?.upper_bound
                          : item.key == "height"
                          ? currentFiltersChangeValue?.height?.upper_bound
                          : item.key == "weight"
                          ? currentFiltersChangeValue?.weight?.upper_bound
                          : currentFiltersChangeValue?.fans?.upper_bound
                      }
                      step={item.step}
                      hasInfinity={item.key == "fans"}
                      stepValues={item.stepValues}
                      onChange={(value) => {
                        if (item.key == "age") {
                          setCurrentFiltersChangeValue((old) => ({
                            ...old,
                            age: value,
                          }));
                          // setFiltersValue((old) => ({ ...old, age: value }));
                        } else if (item.key == "fans") {
                          setCurrentFiltersChangeValue((old) => ({
                            ...old,
                            fans: value,
                          }));
                          // setFiltersValue((old) => ({ ...old, fans: value }));
                        } else if (item.key == "height") {
                          setCurrentFiltersChangeValue((old) => ({
                            ...old,
                            height: value,
                          }));
                          // setFiltersValue((old) => ({
                          //   ...old,
                          //   height: value,
                          // }));
                        } else if (item.key == "weight") {
                          setCurrentFiltersChangeValue((old) => ({
                            ...old,
                            weight: value,
                          }));
                          // setFiltersValue((old) => ({
                          //   ...old,
                          //   weight: value,
                          // }));
                        }
                      }}
                      maximumTrackTintColor="#382435"
                      minimumTrackTintColor="#ff75c8"
                      processHeight={5}
                      unit={item.unit}
                      unitSite={item.key == "zone" ? "left" : "right"}
                      thumbImage={require("../../public/icons/32DP/edit.png")}
                    />
                  </div>
                ) : item.type == "checkbox" ? (
                  <Radio
                    checked={
                      currentFiltersChangeValue?.is_active_within_a_week == 1
                    }
                    onClick={() =>
                      setCurrentFiltersChangeValue((old) => ({
                        ...old,
                        is_active_within_a_week: old.is_active_within_a_week
                          ? 0
                          : 1,
                      }))
                    }
                    style={{ "--icon-size": "24px" }}
                    className="p-0 m-0 bg-transparent text-[#FF669E]"
                  />
                ) : (
                  <Picker
                    columns={[
                      item.items?.map((it, index) => ({
                        label: it,
                        value: it,
                      })),
                    ]}
                    // value={
                    //   item.key == "constellation"
                    //     ? filtersValue.constellation
                    //     : filtersValue.city
                    // }
                    // onConfirm={setValue}
                    // onSelect={(val, extend) => {
                    //   console.log("onSelect", val, extend.items);
                    // }}
                    onSelect={(value) =>
                      setCurrentFiltersChangeValue((old) => {
                        let newValue = { ...old };
                        if (item.key == "constellation") {
                          newValue.constellation = value[0];
                        } else {
                          newValue.city = value[0];
                        }
                        return newValue;
                      })
                    }
                  >
                    {(items, { open }) => {
                      return (
                        <div onClick={open}>
                          {item.key == "constellation"
                            ? currentFiltersChangeValue.constellation
                            : currentFiltersChangeValue.city}
                        </div>
                      );
                    }}
                  </Picker>
                )}
              </div>
            ))}
            <div className="flex flex-row justify-around items-center mb-4 p-4">
              <div
                className="p-2 rounded-xl flex justify-center items-center mr-2 bg-[#ffffff1a]"
                style={{
                  width: 46,
                  height: 46,
                }}
              >
                <FontAwesomeIcon
                  icon={faClose}
                  size="xl"
                  className="text-whitex"
                  onClick={() => {
                    setIsFilterVisible({
                      zone_admission_price: false,
                      comprehensive: false,
                    });
                    setCurrentFiltersChangeValue(filtersValue);
                  }}
                />
              </div>
              {isMember == 1 && (
                <div
                  className="px-4 py-2 rounded-xl mr-2 bg-[#ffffff1a] flex justify-center items-center"
                  style={{
                    marginVertical: 6,
                    width: 120,
                  }}
                  onClick={() => handleResetFiltersValue("comprehensive")}
                >
                  <span className="text-lg font-medium">重置</span>
                </div>
              )}
              <div
                onClick={() => {
                  setIsFilterVisible({
                    zone_admission_price: false,
                    comprehensive: false,
                  });
                  if (!isMember) {
                    router.push(
                      `/webView/${encodeURIComponent(
                        `/vip?base=${encodeURIComponent(JSON.stringify(base))}`
                      )}`
                    );
                    return;
                  }
                  getFiltersResult({
                    ...currentFiltersChangeValue,
                    priceUsed: filtersValue.priceUsed,
                  });
                  setFiltersValue((old) => ({
                    ...old,
                    comprehensiveUsed: { show: false, used: true },
                  }));
                }}
                className="px-4 py-2 rounded-xl"
                style={{
                  marginVertical: 6,
                  backgroundColor: "#ff75c8",
                  minWidth: 120,
                  flex: 1,
                }}
              >
                <p className="text-lg font-medium  text-center">
                  {!isMember ? "开通VIP后即可筛选" : "确定"}
                </p>
              </div>
            </div>
          </div>
        </Popup>
        <Popup
          stopPropagation={["touchstart"]}
          closeOnMaskClick={true}
          maskStyle={{ backgroundColor: "#0000004d" }}
          bodyStyle={{
            height: "calc(100vh - 110px)",
            backgroundColor: "black",
          }}
          onMaskClick={() =>
            setIsFilterVisible({
              zone_admission_price: false,
              comprehensive: false,
            })
          }
          visible={isFilterVisible.zone_admission_price}
        >
          <Space className="p-4" justify="between" align="center" block={true}>
            <p className="text-xl font-bold">价格筛选</p>
            <div
              className="p-2 rounded-xl flex justify-center items-center mr-2 bg-[#ffffff1a]"
              style={{
                width: 32,
                height: 32,
              }}
            >
              <FontAwesomeIcon
                icon={faClose}
                size="xl"
                className="text-whitex"
                onClick={() => {
                  setIsFilterVisible({
                    zone_admission_price: false,
                    comprehensive: false,
                  });
                  setCurrentFiltersChangeValue(filtersValue);
                }}
              />
            </div>
          </Space>
          <div
            className="overflow-y-auto"
            style={{ height: "calc(100vh - 170px)" }}
          >
            {priceFilters.map((item, index) => (
              <div
                key={index}
                className="p-4 rounded-xl bg-[#13121f]"
                style={{
                  margin: 18,
                  marginBottom: 6,
                  flexDirection: item.type !== "slider" ? "row" : "col",
                  justifyContent: "space-between",
                  // alignItems: "center",
                  // paddingBottom: 50,
                }}
              >
                <span
                  className="font-medium"
                  style={{
                    marginVertical: 6,
                  }}
                >
                  {item.name}
                </span>
                <MySlider
                  height={40}
                  width={
                    typeof window !== "undefined" ? window.innerWidth - 44 : 0
                  }
                  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) => {
                    if (item.key == "zone") {
                      setCurrentFiltersChangeValue((old) => ({
                        ...old,
                        zone_admission_price: value,
                      }));
                      // setFiltersValue((old) => ({
                      //   ...old,
                      //   zone_admission_price: value,
                      // }));
                    } else if (item.key == "wechat") {
                      setCurrentFiltersChangeValue((old) => ({
                        ...old,
                        wechat_coin_price: value,
                      }));
                      // setFiltersValue((old) => ({
                      //   ...old,
                      //   wechat_coin_price: value,
                      // }));
                    }
                  }}
                  maximumTrackTintColor="#382435"
                  minimumTrackTintColor="#ff75c8"
                  processHeight={5}
                  unit={item.unit}
                  unitSite={item.key == "zone" ? "left" : "right"}
                  thumbImage={require("../../public/icons/32DP/edit.png")}
                />
              </div>
            ))}
            <p className="text-sm font-medium mt-1 px-4 text-[#ffffff80]">
              *{priceFilters[1]?.desc}
            </p>
            <div className="flex flex-row justify-around items-center mb-4 p-4 absolute bottom-0 w-full">
              <div
                className="p-2 rounded-xl flex justify-center items-center mr-2"
                style={{
                  backgroundColor: "#ffffff1a",
                  width: 46,
                  height: 46,
                }}
              >
                <FontAwesomeIcon
                  icon={faClose}
                  style={{ maxWidth: "12px" }}
                  size="xl"
                  className="text-white"
                  onClick={() => {
                    setIsFilterVisible({
                      zone_admission_price: false,
                      comprehensive: false,
                    });
                    setCurrentFiltersChangeValue(filtersValue);
                  }}
                />
              </div>
              {isMember == 1 && (
                <div
                  className="px-4 py-2 rounded-xl mr-2 bg-[#ffffff1a] flex justify-center items-center"
                  style={{
                    marginVertical: 6,
                    width: 120,
                  }}
                  onClick={() =>
                    handleResetFiltersValue("zone_admission_price")
                  }
                >
                  <span className="text-lg font-medium">重置</span>
                </div>
              )}
              <div
                onClick={() => {
                  setIsFilterVisible({
                    zone_admission_price: false,
                    comprehensive: false,
                  });
                  if (!isMember) {
                    router.push(
                      `/webView/${encodeURIComponent(
                        `/vip?base=${encodeURIComponent(JSON.stringify(base))}`
                      )}`
                    );
                    return;
                  }
                  getFiltersResult({
                    ...currentFiltersChangeValue,
                    comprehensiveUsed: filtersValue.comprehensiveUsed,
                  });
                  setFiltersValue((old) => ({
                    ...old,
                    priceUsed: { show: false, used: true },
                  }));
                }}
                className="px-4 py-2 rounded-xl"
                style={{
                  marginVertical: 6,
                  backgroundColor: "#ff75c8",
                  minWidth: 120,
                  flex: 1,
                }}
              >
                <p className="text-lg font-medium  text-center">
                  {!isMember ? "开通VIP后即可筛选" : "确定"}
                </p>
              </div>
            </div>
          </div>
        </Popup>
      </div>
      <List className="px-4">
        {!streamers.length && !recommList.length && (
          <div
            className={`h-screen -mt-[57px] flex flex-col items-center justify-center`}
          >
            <Empty type="nodata" />
          </div>
        )}
        <div>
          {streamers?.filter((streamer) => streamer.zones.length > 0).length >
            0 && (
            <div>
              <p className="mt-2 mb-1 text-white text-xl font-medium">空间</p>
              {(() => {
                let arr = streamers?.filter(
                  (streamer) => streamer.zones.length > 0
                );
                return arr?.map((item) => (
                  <ZoneItem
                    data={item}
                    key={item.id}
                    showMore={arr.length === 1}
                    link={`space/person_space_introduce/${item.mid}`}
                    search={searchValue}
                  />
                ));
              })()}
            </div>
          )}
          {streamers.length > 0 && (
            <div>
              <p className="mt-2 mb-1 text-white text-xl font-medium">用户</p>
              {streamers.map((item) => (
                <ZoneItem
                  data={item}
                  key={item.id}
                  link={`/profile/${item.mid}`}
                  search={searchValue}
                />
              ))}
            </div>
          )}
          {/* {recommList.length > 0 && <MyDivider style={tailwind("my-2")} />} */}
          {recommList.length > 0 && (
            <p className="mt-2 mb-1 text-white text-xl font-medium">猜你喜欢</p>
          )}
          {recommList
            .filter((it) => it.zones.length > 0)
            ?.map((item, index) => (
              <ZoneItem
                data={item}
                key={item.id}
                link={`space/person_space_introduce/${item.mid}`}
                onlyOne={false}
              />
            ))}
        </div>
      </List>
    </div>
  );
}

const ZoneItem = ({ data, showMore, link, search }) => {
  const router = useRouter();
  return (
    <List.Item
      className="!p-0"
      onClick={() => {
        router.push(link);
      }}
      key={data?.id}
      arrow={false}
    >
      {
        <div>
          <div
            className="grid grid-cols-[2.5rem_100%] gap-2 items-center"
            style={{ maxWidth: "calc(100vw - 2rem)" }}
          >
            <Image
              className="flex-none w-10 h-10 rounded-full mr-2"
              src={data?.avatar?.images[0]?.urls[0]}
              width="2.5rem"
              height="2.5rem"
              alt=""
              fit="cover"
            />
            <div className="flex-1">
              <div className="flex items-center">
                <span className="text-md mr-2 text-base text-white font-medium">
                  {data?.name}
                </span>
                <span className="py-0.5 px-2 ml-1 bg-[#FFFFFF1A] rounded-full text-white text-xs font-medium">
                  ID {data?.user_id}
                </span>
              </div>
              <p className="text-sm text-[#FFFFFF80] pr-16 overflow-hidden whitespace-nowrap text-ellipsis">
                {data?.bio}
              </p>
            </div>
          </div>
          {showMore && (
            <div className="bg-[#FFFFFF1A] rounded-xl mt-2 p-2">
              <p className="text-[#FFFFFF80] text-sm py-4">
                Ta的动态·
                {data?.zones[0].zone_moment_count > 99
                  ? "99+"
                  : data?.zones[0].zone_moment_count}
                {data?.zones[0].image_count > 0 &&
                  `  |  图片·${
                    data?.zones[0].image_count > 99
                      ? "99+"
                      : data?.zones[0].image_count
                  }`}
                {data?.zones[0].video_count > 0 &&
                  `  |  视频·${
                    data?.zones[0].video_count > 99
                      ? "99+"
                      : data?.zones[0].video_count
                  }`}
              </p>
              <div className="grid grid-cols-[auto_120px] gap-2 grid-rows-1  w-full">
                <div
                  className="relative w-mfull h-full"
                  // onClick={() => {
                  //   if (item.type == "video") {
                  //     handleShowVideo(item);
                  //   } else {
                  //     showPhotos(photos, index);
                  //   }
                  // }}
                >
                  <Image
                    // lazy={true}
                    placeholder={
                      <div className="w-full h-full bg-[#1d1d1d] rounded"></div>
                    }
                    width="100%"
                    height="100%"
                    className={`rounded-xl max-w-full`}
                    fit="cover"
                    src={data?.shorts?.videos[0]?.cover_urls[0]}
                  />
                  {
                    <div className="absolute top-0 w-full h-full rounded-xl flex justify-center items-center bg-[#33333348]">
                      <Image
                        className=""
                        width={98}
                        height={98}
                        src={
                          process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                          "/icons/play.png"
                        }
                        placeholder=""
                      />
                    </div>
                  }
                </div>
                <div className="h-full grid grid-rows-3 gap-2">
                  <Image
                    // lazy={true}
                    placeholder={
                      <div className="w-full h-full bg-[#1d1d1d] rounded"></div>
                    }
                    width={120}
                    height={120}
                    className={`rounded-xl max-w-full`}
                    fit="cover"
                    src={data?.cover?.images[0]?.urls[0]}
                  />
                  {data.album.images.map((_item, index) => {
                    if (index > 1) return;
                    return (
                      <Image
                        key={index}
                        // lazy={true}
                        placeholder={
                          <div className="w-full h-full bg-[#1d1d1d] rounded"></div>
                        }
                        width={120}
                        height={120}
                        className={`rounded-xl max-w-full`}
                        fit="cover"
                        src={_item?.urls[0]}
                      />
                    );
                  })}
                </div>
              </div>
            </div>
          )}
        </div>
      }
    </List.Item>
  );
};