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

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, index) => {
          return {
            id: uniqueId(),
            sort: index + 1,
            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={1200}
      hasMore={data.length < 60}
      data={data}
      itemRender={(item) => {
        return (
          <CommonCard
            key={item.id}
            sort={item.sort}
            data={item}
            width="184px"
            actions={[
              <a>创建检索</a>,
              <a>创建布控</a>,
              <a>删除点位</a>
            ]}
          />
        )
      }}
    />
  )
}