import moment from 'moment';
import React, { useMemo } from 'react';

const Template_record = (props) => {
  const { data } = props;
  const { tableData, reportName, columns } = data;
  const handleHead = (columns) => {
    let _rows = [];
    let countLevel = (arr) => {
      let _childrenArr = [];
      let _currentRowArr = [];
      arr.forEach((item, index) => {
        let _item = { ...item };
        if (_item?.children?.length) {
          _item.hasChild = true;
          _childrenArr = _childrenArr.concat(_item.children);
        }
        _currentRowArr.push(_item);
      });
      _rows.push(_currentRowArr);
      if (_childrenArr.length) countLevel(_childrenArr);
    };
    countLevel(columns);
    return _rows;
  };
  const handleCols = (columns) => {
    let _cols = [];
    let handleColumns = (arr) => {
      let _childrenArr = [];
      arr.forEach((item, index) => {
        let _item = { ...item };
        if (_item?.children?.length) {
          _childrenArr = _childrenArr.concat(_item.children);
        } else {
          _cols.push(_item)
        }
      });
      if (_childrenArr.length) handleColumns(_childrenArr);
    };
    handleColumns(columns);
    return _cols;
  }
  const headArr = useMemo(() => {
    return handleHead(columns);
  }, [columns]);
  const columnsArr = useMemo(()=>{
    return handleCols(columns)
  },[columns])
  return (
    <div style={{ padding: '0px 0px' }}>
      <style>
        {`@page{margin: 20px 80px 20px 80px;}table{border-collapse:collapse;font-size:10px;}
            table,th,td{border:1px solid #333333;text-align:center;padding:3px 1px;}`}
      </style>
      <div
        style={{
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {reportName}
      </div>
      <div style={{ marginTop: '10px' }}>
        <table width="100%" border="0">
          <thead>
          {
            headArr.map((row, index) => {
              return <tr>
                {
                  row.map(col => {
                    return <th rowSpan={col?.children?.length ? 1 : headArr.length - index} width={`${col.width??200}px`}
                               colSpan={col?.children?.length ?? 1}>{col.title}</th>;
                  })
                }
              </tr>;
            })
          }
          </thead>
          {tableData.map((item, index) => {
            return (
              <tr key={`${item.r}_ ${index}`}>
                {
                  /**
                   * 1. 序号没有onCell，单独输出
                   * 2. 其他的有onCell的，按照rowSpan输出来分配位置
                   * 3. 没有onCell的，或者rowSpan等于0的，打印的时候需要被移除
                   * */
                  columnsArr.map(col => {
                    if (col.title === '序号') return <td>{item[col.dataIndex]}</td>;
                    if (col.onCell && col.onCell(item, index).rowSpan !== 0) return <td
                      rowSpan={col.onCell(item, index).rowSpan}>{item[col.dataIndex]}</td>;
                    return null;
                  }).filter(item => item)
                }
              </tr>
            );
          })}
        </table>
      </div>
    </div>
  );
};

export default Template_record;
