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

import { List, Spin } from 'antd'

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

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

/**产品内测 */
const ProductInteriorComponent: React.FC = () => {
  const [pageSize, setPageSize] = useState<number>(10)
  const [currentPage, setCurrentPage] = useState<number>(1)
  const [total, setTotal] = useState<number>(0)

  const { data, loading, run } = useRequest(PersonalService.getProductInteriorList, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setTotal(res?.Paging?.Totals || 0)
    }
  })

  useEffect(() => {
    run(pageSize, currentPage)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const handleGetData = (page: number, pageSize: number) => {
    setCurrentPage(page)
    setPageSize(pageSize)
    run(pageSize, page)
    window.scrollTo(0, 0)
  }

  const handleToSomePage = (item: IProductInteriorItem) => {
    const url = `${window.location.origin}/internal/article/${item.ProductInteriorId}`
    window.open(url)
  }
  return (
    <Spin spinning={loading}>
      <div className={`personal-box-wrapper ${styles['collection-wrapper']}`}>
        <List
          dataSource={data?.List || []}
          renderItem={(item: IProductInteriorItem, index) => (
            <div
              className={`${styles['my-message-item']} ${
                index === (data?.List.length || 1) - 1 ? styles['bd-none'] : ''
              }`}
            >
              <div className="my-message-time">{item.PublishTime}</div>
              <div className="my-message-object">
                <span className="message-object" onClick={handleToSomePage.bind(this, item)}>
                  {item.Title}
                </span>
              </div>
            </div>
          )}
          pagination={{
            current: currentPage,
            total: total,
            hideOnSinglePage: true,
            showSizeChanger: true,
            showQuickJumper: true,
            responsive: true,
            pageSize: pageSize,
            pageSizeOptions: [10, 20, 50],
            onChange: handleGetData
          }}
        />
      </div>
    </Spin>
  )
}

export default ProductInteriorComponent
