import React, { useState, useEffect, useRef } from 'react'
import Skeleton from 'antd/lib/Skeleton'
import './TableSkeleton.scss'

const TableSkeleton: React.FC = function () {
  const wrapper = useRef<HTMLDivElement>(null)
  const [rows, setRows] = useState(0)
  const skeletonList = new Array(3).fill(1).map((item, index) =>
    <div className="table-skeleton-item" key={index}><Skeleton active paragraph={{ rows, width: '100%' }} /></div>
  )
  useEffect(() => {
    const wrapperHeight = wrapper.current?.scrollHeight
    if (wrapperHeight) {
      // 50:table-skeleton-wrapper的padding-top
      // 40:.ant-skeleton-title的高度+margin
      // 40:.ant-skeleton-paragraph的margin
      const restHeight = wrapperHeight - 30 - 40 - 40
      // 31:每个灰色条+自己的margin
      if (restHeight > 40) {
        const rows = Math.floor(restHeight / 41)
        setRows(rows)
      }
    }
  }, [])
  return (<div className="table-skeleton-wrapper" ref={wrapper}>
    {skeletonList}
  </div>)
}

export default TableSkeleton