// @ts-ignore
import React, { useEffect, useState } from 'react';
import Empty from '@wisdom-components/empty';
import BasicTable from '../index';
import request from 'umi-request';

const Demo = () => {
  const [columns, setColumns] = useState([]);
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = (params = {}) => {
    request(`${baseUrl}/AcrossTable/GetEquipmentDataReport`, {
      method: 'get',
      params: {},
    }).then(function (response) {
      const data = response.data;
      let column = data.map((item, index) => {
        return {
          title: `${item.DName + item.DType}(${item.Unit})`,
          dataIndex: `name${index}`,
          key: `name${index}`,
        };
      });
      column.unshift({
        title: '时间',
        dataIndex: 'time',
        key: 'time',
      });
      let dataSource = data[0].NameDate.map((item, index) => ({ key: index, time: item.Time }));
      data.forEach((item, index) => {
        item.NameDate.forEach((child) => {
          dataSource.forEach((v) => {
            if (child.Time === v.time) v[`name${index}`] = child.Value;
          });
        });
      });
      setColumns(column);
      setDataSource(dataSource);
    });
  };

  // @ts-ignore
  return (
    <div style={{ height: '800px' }}>
      {!!dataSource.length && (
        <BasicTable
          dataSource={dataSource}
          columns={columns}
          bordered={false}
          pagination={{ pageSize: 20, size: 'default' }}
        />
      )}
      {!dataSource.length && <Empty description={'暂无数据'} />}
    </div>
  );
};

export default Demo;

const baseUrl = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api';