import React, { useEffect } from 'react';
import { ScrollBoard } from '@jiaminghi/data-view-react';
import { getData } from './../../requests/example';
import useState from 'react-usestateref';
export enum AlignType {
  center = 'center',
  left = 'left',
  right = 'right',
}
export interface ScrollBorardType {
  align: AlignType; //对齐方式
  header: string[]; //横向表头
  columnWidth: number; //列宽
}
export const ScrollBoardPost: React.FC<{
  size: { height: string; width: string };
  dataUrl?: string;
  config?: ScrollBorardType;
}> = (props) => {
  const [config, setConfig, refConfig] = useState({
    header: ['列1', '列2', '列3'],
    index: true,
    columnWidth:[50],
    align: 'right',
    data: [
      ['行1列1', '行1列2', '行1列3'],
      ['行2列1', '行2列2', '行2列3'],
    ],
  });
  useEffect(()=>{
    setConfig({
      ...config,
      align: props.config?.align||config.align
    });
  },[ props.config?.align])
  useEffect(() => {
    setConfig({
      ...config,
      columnWidth: props.config?.header?.map((item: any) => item.widthValue).filter((item)=>item&&item!=0) || config.columnWidth,
      header: props.config?.header?.map((item: any) => item.value) || config.header,
    });
  }, [props.config?.header]);
  useEffect(() => {
    if (props.dataUrl) {
      getData(props.dataUrl).then((res) => {
        if (res) {
          setConfig({
            ...config,
            data: res.data,
            header:
              config.header.length > res.data.length
                ? config.header.slice(0, res.data.length)
                : config.header,
          });
        }
      });
    }
  }, [props.dataUrl]);
  return (
    <ScrollBoard
      config={refConfig.current}
      style={{
        height: props.size?.height || '300px',
        width: props.size?.width || '500px',
      }}
    />
  );
};