tiefen_space_h5/app/space/page.js

"use client";

import React, {
  useEffect,
  useRef,
  useState,
  useImperativeHandle,
  forwardRef,
} from "react";
import { Tabs, Swiper, Toast, List, InfiniteScroll } from "antd-mobile";
import PostItem from "@/components/PostItem";
import "./index.css";
import Link from "next/link";
import Empty from "@/components/Empty";
import { useRouter } from "next/navigation";
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
import SpaceItemSkeleton from "@/components/skeletons/SpaceItemSkeleton";
import requireAPI from "@/utils/requireAPI";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faRefresh } from "@fortawesome/free-solid-svg-icons";
import InfiniteScrollContent from "@/components/InfiniteScrollContent";
import OwnIcon from "@/components/OwnIcon";
import OwnImage from "@/components/OwnImage";
const tabItems = [
  { key: "space", title: "空间" },
  { key: "post", title: "动态" },
];
// const scrollHeight = 700;
// const scrollHeight = window.innerHeight-126
export default function Space() {
  const swiperRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);
  // const [spacePost, setSpacePost] = useState([]);
  const [scrollHeight, setScrollHeight] = useState(0);
  const [offset, setOffset] = useState(0);
  const [loading, setLoading] = useState(false);
  const spaceRef = useRef();
  const spacePostRef = useRef();
  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {
    setScrollHeight(window.innerHeight - 57 - 44);
    // const handleResize = () => {
    //   setScrollHeight(window.innerHeight - 126);
    // };
    // window.addEventListener("resize", handleResize);
    // return () => {
    //   // window.removeEventListener("resize", handleResize);
    // };
  }, []);
  const childrenFunc = async () => {
    setLoading(true);
    if (!activeIndex) {
      await spaceRef.current?.doRefresh();
      setLoading(false);
    } else {
      await spacePostRef.current?.doRefresh();
      setLoading(false);
    }
  };
  return (
    <div className="">
      <div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
        <Tabs
          activeKey={tabItems[activeIndex].key}
          onChange={(key) => {
            const index = tabItems.findIndex((item) => item.key === key);
            setActiveIndex(index);
            swiperRef.current?.swipeTo(index);
          }}
        >
          {tabItems.map((item) => (
            <Tabs.Tab
              forceRender={false}
              title={item.title}
              key={item.key}
              className="text-left"
            />
          ))}
        </Tabs>
        <Link
          href="search"
          className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
        >
          <OwnIcon src="/icons/search.png" className="w-9 h-9" />
        </Link>
      </div>
      {}
      <Swiper
        direction="horizontal"
        indicator={() => null}
        ref={swiperRef}
        defaultIndex={activeIndex}
        allowTouchMove={false}
        onIndexChange={(index) => {
          setActiveIndex(index);
        }}
      >
        <Swiper.Item>
          {!activeIndex && (
            <SpacesList scrollHeight={scrollHeight} ref={spaceRef} />
          )}
        </Swiper.Item>
        <Swiper.Item>
          {!!activeIndex && (
            <SpacePostList scrollHeight={scrollHeight} ref={spacePostRef} />
          )}
        </Swiper.Item>
      </Swiper>
      <div
        className={`fixed bottom-[96px] right-4 z-[50] w-10 h-10 flex items-center justify-center bg-[#1d1d1d71] rounded-full text-white ${
          loading && !offset ? "animate-spin" : ""
        }`}
      >
        <FontAwesomeIcon
          icon={faRefresh}
          size="xl"
          style={{ maxWidth: "20px" }}
          // onClick={firstRequest}
          onClick={() => {
            // scrollRef.current?.scrollTo(0, 0);
            window.scrollTo({
              top: 0,
              left: 0,
              behavior: "smooth", // 可选，平滑滚动效果
            });
            childrenFunc();
            // firstRequest();
          }}
        />
      </div>
    </div>
  );
}

const VisitingCard = ({ data }) => {
  const router = useRouter();
  return (
    <div
      className="relative h-52"
      onClick={() => router.push("/space/" + data?.streamer_ext?.mid)}
    >
      {data?.is_unread_zone_moment_exist === 1 && (
        <OwnIcon
          src="/images/space_new.png"
          fit="contain"
          className="w-[72px] absolute top-2 right-2"
        />
      )}
      <OwnImage
        width={"100%"}
        height={"100%"}
        rounded="rounded-lg"
        src={data?.streamer_ext?.cover?.images[0].urls[0]}
        fit="cover"
        className="w-full h-full"
        outClassName="h-full"
      />
      <div className="absolute bottom-0 left-0 w-full px-2 py-3 bg-[#1b1b1b] flex items-center rounded-b-lg">
        <span className="font-bold overflow-hidden whitespace-nowrap text-ellipsis">
          {data?.streamer_ext?.name}
        </span>
        <ul className="flex ml-2">
          {data?.admission_price !== 0 && (
            <li className="text-[10px] bg-primary rounded px-1 mr-1 whitespace-nowrap">
              付费
            </li>
          )}
          {data.visitor_role === 3 && (
            <li className="text-[10px] bg-primary rounded px-1 mr-1 whitespace-nowrap">
              创建者
            </li>
          )}
        </ul>
      </div>
    </div>
  );
};

const SpacesList = forwardRef(({ scrollHeight }, ref) => {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [offset, setOffset] = useState(0);
  const [spacesList, setSpacesList] = useState([]);
  useEffect(() => {
    // getSpaceList(2).then((res) => {
    //   setSpacesList(res);
    //   setHasMore(true)
    // });
  }, []);
  useImperativeHandle(
    ref,
    () => {
      return { doRefresh };
    },
    []
  );
  async function doRefresh() {
    // await sleep(1000);
    // Toast.show({
    //   icon: "fail",
    //   content: "刷新失败",
    // });
    // throw new Error("刷新失败");
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth", // 可选，平滑滚动效果
    });
    const list = await getSpaceList(1);
    setSpacesList(list);
    setHasMore(true);
    return true;
  }
  async function loadMore() {
    // debugger
    const list = await getSpaceList(!spacesList.length ? 2 : 0);
    if (list.length == 0) {
      setHasMore(false);
    }
    setSpacesList((prev) => [...prev, ...list]);
  }
  const getSpaceList = async (type = 2) => {
    setLoading(true);
    try {
      const data = await requireAPI(
        "POST",
        "/api/zone/list_by_visitor_mid_v2",
        {
          body: { offset, limit: 4 },
        }
      );
      setOffset(data.data.offset);
      setHasMore(data.data.more);
      setLoading(false);
      if (data.ret == -1) {
        // Toast.show({
        //   icon: "fail",
        //   content: data.msg,
        //   position: "top",
        // });
        return [];
      } else {
        return data.data.list;
      }
    } catch (error) {
      setLoading(false);
    }
  };
  return (
    // <div className="px-4 pb-20 max-h-screen overflow-y-auto">
    <div className="px-4 pb-20 min-h-screen">
      {loading && !spacesList.length && (
        <div className="grid grid-cols-2 gap-2 overflow-y-auto">
          <SpaceItemSkeleton />
          <SpaceItemSkeleton />
          <SpaceItemSkeleton />
          <SpaceItemSkeleton />
          <SpaceItemSkeleton />
          <SpaceItemSkeleton />
          <SpaceItemSkeleton />
          <SpaceItemSkeleton />
          <SpaceItemSkeleton />
          <SpaceItemSkeleton />
        </div>
      )}
      <ul className="grid grid-cols-2 gap-2 overflow-y-auto">
        {spacesList?.map((item) => (
          <li key={item.id} className="!p-0">
            <VisitingCard data={item} />
          </li>
        ))}
        {spacesList.length > 0 && (
          <li onClick={() => router.push("/search")}>
            <div
              // onPress={() => navigation.navigate("Stream")}
              // onClick={}
              className="w-full h-52"
            >
              <div
                className="h-full flex flex-col rounded-lg overflow-hidden bg-[#FFFFFF1A] bg-no-repeat bg-right-bottom bg-40%"
                style={{
                  backgroundImage: `url(${
                    process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
                    "/icons/magnifier.png"
                  })`,
                }}
              >
                {/* <div className="w-full z-0"></div>
                    <div
                      className="w-full z-0 h-[42px]"
                    ></div> */}
                <div className="flex flex-col w-full h-full px-[22px] py-[30px]">
                  <p className="text-white font-medium text-lg">发现更多</p>
                  <p className="text-[#FFFFFF40] font-sm">缘分就在不经意间</p>
                  <OwnIcon
                    className="w-full h-full"
                    outClassName="w-[32px] h-[32px] mt-4"
                    src="/icons/rightarrow_border.png"
                  />
                </div>
              </div>
            </div>
          </li>
        )}
        {/* {spacesList?.length == 0 && !loading && (
          <div
            className={`flex flex-col items-center justify-center h-screen`}
            // style={{ height: `${scrollHeight}px` }}
          >
            <Empty type="nodata" />
          </div>
        )} */}
      </ul>
      {/* {!!spacesList?.length && (
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      )} */}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
        <InfiniteScrollContent
          hasMore={hasMore}
          isEmpty={spacesList.length == 0}
          showNoMore={spacesList.length === 0}
          zoneEmpty={true}
          type="nospace"
        />
      </InfiniteScroll>
    </div>
  );
});
const SpacePostList = forwardRef(({ scrollHeight }, ref) => {
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(false);
  const [spacePostList, setSpacePostList] = useState([]);
  const [currentTime, setCurrentTime] = useState();
  const [offset, setOffset] = useState(0);
  const ids = useRef(null);
  useEffect(() => {
    getFollowIds().then((res) => {
      ids.current = res;
      getSpacePostList(res, 0);
    });
  }, []);
  useImperativeHandle(
    ref,
    () => {
      return { doRefresh };
    },
    []
  );
  async function doRefresh() {
    // await sleep(1000);
    // Toast.show({
    //   icon: "fail",
    //   content: "刷新失败",
    // });
    // throw new Error("刷新失败");
    // getRecommPostList(1);
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth", // 可选，平滑滚动效果
    });
    // setSpacePostList([]);
    await getSpacePostList(ids.current, 0);
    return true;
  }
  async function loadMore() {
    await getSpacePostList(ids.current, offset);
    // const newList = [...spacePostList, ...list];
    // setSpacePostList(newList);
  }
  const getFollowIds = async () => {
    setLoading(true);
    setCurrentTime(Math.floor(new Date().getTime() / 1000));
    const data = await requireAPI(
      "POST",
      "/api/account_relation/list_follow",
      {
        body: { offset, limit: 4 },
      },
      true
    );
    return data;
  };
  const getSpacePostList = async (data, offset) => {
    if (data.data.list.length > 0) {
      //查关注主播展示资料
      const postsResponse = await requireAPI(
        "POST",
        "/api/zone_moment/list_by_visitor_mid",
        {
          body: {
            offset,
            limit: 4,
          },
        }
      );
      // debugger;
      // console.log("offset", postsResponse.data.offset);
      setOffset(postsResponse.data.offset);
      setHasMore(postsResponse.data.more);
      setLoading(false);
      if (data.ret == -1) {
        // Toast.show({
        //   icon: "fail",
        //   content: data.msg,
        //   position: "top",
        // });
      } else {
        setSpacePostList((old) => {
          if (!offset) {
            return postsResponse.data.list;
          } else {
            return [...old, ...postsResponse.data.list];
          }
        });
      }
    } else {
      setLoading(false);
    }
  };

  return (
    <div className="px-4 pb-20">
      {/* <PullToRefresh onRefresh={doRefresh}> */}
      <List>
        {loading && !spacePostList.length && (
          <div className="mb-[31px]">
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
            <PostItemSkeleton />
          </div>
        )}
        {spacePostList?.map((item, index) => (
          <List.Item key={item.id + "_" + index} className="!p-0">
            <PostItem
              type="post"
              showFollow={false}
              data={item}
              date={new Date(item.ct * 1000)}
            />
          </List.Item>
        ))}
        {!spacePostList?.length && (
          <div
            className={`flex flex-col items-center justify-center h-screen`}
            style={{ height: `calc(100vh - 133px)` }}
          >
            <Empty type="nospace" />
          </div>
        )}
      </List>
      {!!spacePostList?.length && (
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      )}
      {/* </PullToRefresh> */}
    </div>
  );
});