import React, { useEffect, useState } from 'react'
import { Table, Checkbox } from 'antd'
import styles from './style.module.less'

export default function SelectDetialTable(props) {
  const {
    columns,
    data = [],
    rowKey = 'key',
    size = 'default',
    toolRender = '',
    scroll,
    onChange,
    total = 0,
    curIndex,
    expandedRowKeys = [],
    selectedRowKeys = [],
    onSelectedRowKeysChange,
    pageSize = 15,
    pagination = true,
    loading = false
  } = props
  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys, selectedRows) => onSelectedRowKeysChange(selectedRowKeys, selectedRows)
  };
  function onCheckChange(check) {
    if(check) {
      onSelectedRowKeysChange(data.map(t => t[rowKey]), data)
    } else {
      onSelectedRowKeysChange([], [])
    }
  }

  return (
    <div className={styles.selectDetialTable}>
      {selectedRowKeys.length > 0 &&
      <div className={styles.tools}>
        <Checkbox
          checked={selectedRowKeys.length === data.length}
          onChange={(e) => onCheckChange(e.target.checked)}
        />
        <span style={{ marginLeft: '28px' }}>
          已选择
          <span className={styles.count}>{selectedRowKeys.length}</span>
          个
          {
            toolRender &&
            <>
              <span className={styles.line}>|</span>
              <span>{toolRender}</span>
            </>
          }
        </span>
      </div>}
      <Table
        className="detialTable"
        size={size}
        showHeader={selectedRowKeys.length < 1}
        columns={columns}
        dataSource={data}
        rowKey={rowKey}
        loading={loading}
        expandedRowKeys={expandedRowKeys}
        pagination= {pagination && {
          size: "default",
          // showSizeChanger: true,
          showQuickJumper: true,
          current: curIndex,
          pageSize,
          total,
          showTotal: total => `共 ${total} 条`
        }}
        scroll={scroll}
        rowSelection={rowSelection}
        onChange={(pagination, filters, sorter, extra) => onChange(pagination, filters, sorter, extra)}
      />
    </div>
  );
}
