import { View, Text } from "@tarojs/components";
import Taro, { useReachBottom } from "@tarojs/taro";
import VisitorCard from "../VisitorCard/index";

import { TVisitorAgent } from "@/types/visitor";
import { getVisitorList } from "@/service/visitor";
import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
interface IProps {
  agentId?: string | number;
}

export default ({ agentId }: IProps) => {

  const fetcher = async ([_url, {nextId, pageSize}, [agentId]]) => {
    const res = await getVisitorList({ startId: nextId, pageSize, agentId });
    return res.data;
  };
  const { list, loadMore } = useLoadMoreInfinite<TVisitorAgent>(
    createKey(`getVisitorList${agentId}`, 10, [agentId]),
    fetcher);

  useReachBottom(() => {
    loadMore();
  });

  

  if (!list.length) {
    <View></View>;
  }

  return (
    <View>
      <View className="mb-8 text-14 leading-22 font-medium">访问详情</View>
      <View className="flex flex-col gap-8">
        {list.map((item) => {
          return (
            <VisitorCard
              data={{
                ...item,
                name: item.name ?? "",
                company: "",
                avatarUrl: item.avatarUrl,
                position: item.position ?? "",
                agentName: item.myAgentName ?? "",
              }}
            ></VisitorCard>
          );
        })}
      </View>
    </View>
  );
};
