import React, { useState } from 'react';
import { Table } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import * as commonUtils from '@/utils/utils';

import style from './index.less';
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];

interface PropsType {
  data: TableProps['dataSource'];
  headerColumn: TableProps['columns'];
}

const TableNew: React.FC<PropsType> = (props) => {
  const tableProps = {
    columns: TableHeader(props),
    dataSource: TableData(props),
    scroll: {
      // x: 'max-content',
      y: '100%',
    },
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection: TableRowSelection<TableProps> = {
    selectedRowKeys,
    onChange: onSelectChange,

  };
  return (
    <div className={style.tableNew}>
      <Table<TableProps> {...tableProps} bordered rowSelection={rowSelection} />
    </div>
  );
};


// 处理数据
const TableData = (props: PropsType): PropsType['data'] => {
  const { data = [] } = props;
  if (data && data.length) {
    data.forEach((x, i) => {
      x.key = i
    })
  }
  return data;
}

// 处理表头
const TableHeader = (props: PropsType): PropsType['headerColumn'] => {
  const { headerColumn = [], data = [] } = props;

  return headerColumn.map((colunm) => {
    colunm.ellipsis = true;
    // colunm.textWrap = 'word-break',
    if (!('dataIndex' in colunm)) return colunm;
    const { dataIndex } = colunm;
    if (dataIndex === 'sPartNameStatus') {
      interface TextJsonItem {
        sProcessName: string;
        sState: number;
      }
      return {
        ...colunm,
        render: (text: string, record: object) => {
          const textJson: TextJsonItem[] = commonUtils.convertStrToObj(text.replace(",]", ']'), []) as TextJsonItem[];
          console.log('=====xxx', text, textJson);
          return textJson.map(item => item.sProcessName).join('->');
        },
      };
    }
    return colunm;
  });
}

export default TableNew;