import React, { useCallback, useEffect, useState } from 'react'
import { Table, TableColumn, Loading, Button } from 'react-icecream'

const records = [
  { name: 'default.sys', doing: 1, waiting: 2 },
  { name: 'zenas', doing: 3, waiting: 1 },
  { name: 'test', doing: 0, waiting: 0 }
]

export default function Demo() {
  const [loading, setLoading] = useState(false)

  const mockGetData = useCallback(() => {
    setLoading(true)
    setTimeout(() => setLoading(false), 3000)
  }, [])

  useEffect(() => {
    mockGetData()
  }, [mockGetData])

  return (
    <>
      <Button type="primary" onClick={mockGetData} style={{ marginBottom: 24 }}>点击刷新</Button>
      <Table records={records}>
        <TableColumn title="队列名称" accessor="name" />
        <TableColumn
          title="正在处理任务数"
          accessor="doing"
          getRowSpan={(_, __, index) => {
            if (loading && index === 0) {
              return records.length
            }
          }}
          render={val => (loading ? <Loading /> : val)}
        />
        <TableColumn
          title="等待处理任务数"
          accessor="waiting"
          getRowSpan={(_, __, index) => {
            if (loading && index === 0) {
              return records.length
            }
          }}
          render={val => (loading ? <Loading /> : val)}
        />
      </Table>
      <Table records={records} style={{ marginTop: 40 }}>
        <TableColumn title="队列名称" accessor="name" />
        <TableColumn
          title="正在处理任务数"
          accessor="doing"
          getRowSpan={(_, __, index) => {
            if (index === 0) {
              return 2
            }
          }}
        />
        <TableColumn
          title="等待处理任务数"
          accessor="waiting"
          getRowSpan={(_, __, index) => {
            if (index === 0) {
              return 1
            }
            if (index === 1) {
              return 2
            }
          }}
        />
      </Table>
    </>
  )
}