import React, { useEffect, useState } from 'react'
import { InfiniteList } from '@zhst/biz'

export default () => {
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(false)

  const loadMoreData = () => {
    if (loading) {
      return;
    }
    setLoading(true);
    fetch('https://randomuser.me/api/?results=10&inc=id,key,name,gender,email,nat,picture&noinfo')
      .then((res) => res.json())
      .then((body) => {
        let res = body.results.map(o => {
          return {
            title: o.name.first,
            subtitle: o.name.last,
            url: o.picture.large
          }
        })
        setData([...data, ...res]);
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    loadMoreData();
  }, []);

  return (
    <InfiniteList
      loading={loading}
      loadMore={loadMoreData}
      height={300}
      hasMore={data.length < 100}
      data={data}
      onItemClick={_data => console.log('item点击：', _data)}
      searchCardProps={{
        onAdd: (_data) => console.log('新增', _data),
        onCreate: (_data) => console.log('创建', _data),
        onRemove: (_data) => console.log('删除', _data),
      }}
    />
  )
}