import {memo, forwardRef} from 'react';
import {styled} from "styled-components";
import {Table} from "antd";

const component = forwardRef(({
  headDivider,
  columns,
  data,
  title,
  extra,
  children,
  style,
  tableStyle,
  tableScroll,
  pagination,
  rowKey
}, ref) => {
  /** Table的默认RowKey */
  const defaultRowKey = rowKey?rowKey:"id";
  return (
    <Container style={style} ref={ref}>
      <Wrapper>
        <Title className={headDivider && "divider"}>
          {title}
        </Title>
        <Extra>
          {extra}
        </Extra>
      </Wrapper>
      {children}
      {
        columns && data &&
        <Table
          rowKey={defaultRowKey}
          virtual
          columns={columns}
          dataSource={data}
          pagination={pagination}
          style={tableStyle}
          scroll={tableScroll}
          size="small"
        />
      }
    </Container>
  )
})
export const PureTableCard = memo(component);

const Container = styled.div`
  background-color: ${p=>p.theme.mainTheme};
  padding: ${p => p.theme.padding}px;
`
const Wrapper = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
`

const Title = styled.div`
  display: inline-block;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  text-align: center;
  font-weight: 600;
  padding-block-end: 10px;
  &.divider {
    // 添加必填红色*的样式
    &::before {
      display: inline-block;
      margin-inline-end: 4px;
      color: #bfbfbf;
      font-size: 16px;
      line-height: 1;
      content: "------------------";
    }
    &::after {
      display: inline-block;
      margin-inline-start: 4px;
      color: #bfbfbf;
      font-size: 16px;
      line-height: 1;
      content: "------------------";
    }
  }
`

const Extra = styled.div`
  margin-inline-start: auto;
  font-weight: normal;
  font-size: 14px;
  box-sizing: border-box;
  padding-block-end: 10px;
`