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

import { List, Spin } from 'antd'

import { IMyCommentItem, PersonalService } from 'Personal/Personal.service'

import styles from '../css/PersonalIndex.module.scss'

/**我的留言 */
const CommentComponent: React.FC = () => {
  const pageSize = 10
  const [currentPage, setCurrentPage] = useState<number>(1)
  const [hasMore, setHasMore] = useState<boolean>(false) // 列表加载更多
  const [listData, setListData] = useState<IMyCommentItem[]>([])

  const { loading: listLoading, run } = useRequest(PersonalService.getMessageList, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setListData([...listData, ...(res?.List || [])])
      setHasMore(res ? !res?.Paging?.IsEnd : false)
    }
  })

  useEffect(() => {
    setListData([])
    run(pageSize, currentPage)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  const handleGetMore = () => {
    if (listLoading || !hasMore) return
    setCurrentPage(currentPage + 1)
    run(pageSize, currentPage + 1)
  }

  const handleToSomePage = (item: IMyCommentItem) => {
    // 跳转类型 1文章 2活动以及活动音频 3产业视频 4活动视频
    let url = ''
    switch (item.RedirectType) {
      case 1:
        url = `${window.location.origin}/material/info/${item.ArticleId}`
        break
      case 2:
        url = `${window.location.origin}/activity/detail/${item.ActivityId}`
        break
      case 3:
        url = `${window.location.origin}/indepth/video/${item.ChartPermissionId}/${item.IndustryId}/${item.VideoId}`
        break
      case 4:
        url = `${window.location.origin}/activity/video/${item.VideoId}`
        break
      default:
        break
    }
    if (!url) return
    window.open(url)
  }

  return (
    <Spin spinning={listLoading}>
      <div className={`${styles['collection-wrapper']}`}>
        <InfiniteScroll
          dataLength={listData?.length || 0}
          next={handleGetMore}
          hasMore={hasMore}
          loader={null}
          scrollableTarget="scrollableDiv"
        >
          <List
            dataSource={listData || []}
            renderItem={(item: IMyCommentItem) => (
              <div className={`${styles['my-message-item']} `}>
                <div className="my-message-time">{item.CreateTime}</div>
                <div className="my-message-object">
                  <span className="message-label">留言对象：</span>
                  <span className="message-object" onClick={handleToSomePage.bind(this, item)}>
                    {item.Title}
                  </span>
                </div>
                <div className="my-message-text">
                  <span className="message-label">留言内容：</span>
                  <span className="message-text">{item.Content}</span>
                </div>
              </div>
            )}
          />
        </InfiniteScroll>
      </div>
    </Spin>
  )
}

export default CommentComponent
