import React, { useEffect, useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'
import InfiniteScroll from 'react-infinite-scroll-component'

import { ColumnService, IMessageDetail } from 'Column/Column.service'
import { Modal, List } from 'antd'
import styles from '../css/ColumnMessage.module.scss'

interface IColumnCenterProps {
  open: boolean // 是否打开
  onClose: (type: 'Collection' | 'Fans') => void // 关闭
}
interface IColumnAuthorFansData {
  CompanyName: string // 公司名称
  RealName: string //用户实际名称
  SellerName: string // 是否打开
  CreateTime: string // 创建时间
  Headimgurl: string //用户头像
}
/**研选专栏 */
const ColumnFansModal: React.FC<IColumnCenterProps> = props => {
  const { open, onClose } = props
  const pageSize = 9
  const customData = {
    emptyText: '暂时没有粉丝'
  }
  const [listData, setListData] = useState<IColumnAuthorFansData[]>([])
  const [currentPage, setCurrentPage] = useState<number>(1)
  const [hasMore, setHasMore] = useState<boolean>(false) // 列表加载更多

  const { loading: listLoading, run } = useRequest(ColumnService.getColumnAuthorFansList, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      console.log(res)

      setListData([...listData, ...(res.List || [])])

      console.log(listData, '-----')

      setHasMore(res ? !res.Paging.IsEnd : false)
    }
  })
  const handleOnClose = () => {
    props.onClose('Fans')
  }

  const handleGetMore = () => {
    if (listLoading || !hasMore) return
    setCurrentPage(currentPage + 1)
    run(pageSize, currentPage + 1)
  }

  useEffect(() => {
    setCurrentPage(1)
    setListData([])
    if (open) {
      run(pageSize, currentPage)
    }
  }, [open])
  return (
    <Modal title="粉丝列表" open={open} onCancel={handleOnClose} footer={null}>
      <InfiniteScroll
        dataLength={listData?.length || 0}
        next={handleGetMore}
        hasMore={hasMore}
        loader={null}
        scrollableTarget="scrollableDiv"
      >
        <List
          dataSource={listData || []}
          locale={customData}
          renderItem={(item: IColumnAuthorFansData) => (
            <div className={styles['message-fans-content']}>
              <img src={item.Headimgurl} alt="" />
              <span>{item.RealName}</span>
              <span>{item.CompanyName}</span>
            </div>
          )}
        />
      </InfiniteScroll>
    </Modal>
  )
}

export default ColumnFansModal
