import { getChuangKitDesigns } from '@/api/chuangkit'
import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { Spin, Empty } from 'antd'

export default function OnlineImageList({ imgUrl, onChange }) {
  const [isLoading, setLoading] = useState(false)
  const [list, setList] = useState([])
  const { userInfo } = useSelector((state) => state.user)
  useEffect(() => {
    setLoading(true)
    getChuangKitDesigns({ params: { time_order: 1, user_flag: userInfo.id, page_no: 1, page_size: 1000 } })
      .then((res) => {
        setList(res.data.list)
      })
      .finally(() => {
        setLoading(false)
      })
  }, [userInfo])
  return (
    <Spin spinning={isLoading}>
      <div className="online-image-list">
        {list.length ? (
          list.map((item) => {
            return (
              <div
                className={'online-image-list-item ' + (imgUrl === item.thumbUrl ? 'is-active' : '')}
                key={item.designId}
                onClick={() => onChange(item.thumbUrl)}>
                <img src={item.thumbUrl} />
              </div>
            )
          })
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </div>
    </Spin>
  )
}
