import { message, Table } from 'antd';
import React from 'react';
import { getFileData } from './request';

export default class ToolBar extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      columns: [],
      tableData: []
    };
  }

  async componentDidMount() {
    console.log(this.props.dataInfo);
    const uri = this.props.dataInfo.storage_path;
    const data = await getFileData({ uri });
    console.log('data:', data);
    if (data.status === 200) {
      const fields = data.data.split('\n')[0].split(',');
      const dataList: any = [];
      data.data.split('\n').forEach((item: any, index: any) => {
        if (index !== 0 && index !== data.data.split('\n').length - 1) {
          dataList.push(item.split(','));
        }
      });
      const columns = fields.map((item: any) => ({
        title: item,
        dataIndex: item,
        key: item
      }));
      console.log('columns:', columns);
      this.setState({ columns });
      const tableData: any = dataList.map((item: any, index: number) => {
        const formatData = {} as Record<string, any>;
        formatData['key'] = index;
        columns.map((val: any, index: number) => {
          formatData[val.title] = item[index];
        });
        return formatData;
      });
      console.log('tableData:', tableData);
      this.setState({ tableData });
    } else {
      message.error('获取数据失败');
    }
  }

  render() {
    return (
      <div className="dataview_wrapper">
        <div className="dataview_info">
          <div className="table_name">{this.props.dataInfo?.name}</div>
          <div className="dataview_row">
            <div className="dataview_item">
              <span className="dataview_label">数据类型</span>
              数据表
            </div>
            <div className="dataview_item">
              <span className="dataview_label">完整性</span>-
            </div>
            <div className="dataview_item">
              <span className="dataview_label">数据条数</span>
              {this.state.tableData.length}
            </div>
          </div>
          <div className="dataview_row">
            <div className="dataview_item">
              <span className="dataview_label">存储位置</span>
              HDFS
            </div>
            <div className="dataview_item">
              <span className="dataview_label">创建人</span>
              steven
            </div>
            <div className="dataview_item">
              <span className="dataview_label">占用存储</span>
              {this.props.dataInfo?.size}
            </div>
          </div>
          <div className="dataview_row">
            <div className="dataview_item">
              <span className="dataview_label">创建时间</span>
              {this.props.dataInfo?.create_time}
            </div>
          </div>
        </div>
        <div className="table_title">数据预览</div>
        <div className="table_toolbar">
          <span className="toolbar_label">总数</span>
          <span>{this.state.tableData.length}</span>
          <span className="toolbar_label">列数</span>
          <span>{this.state.columns.length}</span>
        </div>
        <Table
          columns={this.state.columns}
          dataSource={this.state.tableData}
          pagination={{ pageSize: 50 }}
          scroll={{ x: this.state.columns * 120, y: 250 }}
        />
      </div>
    );
  }
}
