import React from 'react';
import 'moment/locale/zh-cn';
import moment from 'moment';
import { Table } from 'antd';

interface IProps {
  data: any;
  info: any;
  changePage: (page: number, pageSize: number) => void;
}

export const DagDataView: React.FC<IProps> = ({ data, info, changePage }) => {
  const columns: any = data.fields.map((item: any) => {
    return {
      title: item,
      dataIndex: item,
      key: item
    };
  });
  const tableData: any = data.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;
  });

  const pageChange = (page: number, pageSize: number) => {
    changePage(page, pageSize);
  };

  return (
    <div className="dataview_wrapper">
      <div className="dataview_info" style={{ display: 'none' }}>
        <div className="table_name">{info.name}</div>
        <div className="dataview_row">
          <div className="dataview_item">
            <span className="dataview_label">数据类型</span>
            {info.data_type}
          </div>
          <div className="dataview_item">
            <span className="dataview_label">完整性</span>
            {info.integrity}
          </div>
          <div className="dataview_item">
            <span className="dataview_label">数据条数</span>
            {tableData.length}
          </div>
        </div>
        <div className="dataview_row">
          <div className="dataview_item">
            <span className="dataview_label">存储位置</span>
            {info.storage_location}
          </div>
          <div className="dataview_item">
            <span className="dataview_label">创建人</span>
            {info.user_name}
          </div>
          <div className="dataview_item">
            <span className="dataview_label">占用存储</span>
            {info.storage_usage}
          </div>
        </div>
        <div className="dataview_row">
          <div className="dataview_item">
            <span className="dataview_label">创建时间</span>
            {moment(info.create_time * 1000).format('YYYY-MM-DD HH:mm')}
          </div>
        </div>
      </div>
      <div className="table_title">数据预览</div>
      <div className="table_toolbar">
        <span className="toolbar_label">总数</span>
        <span>{tableData.length}</span>
        <span className="toolbar_label">列数</span>
        <span>{columns.length}</span>
      </div>
      <Table
        columns={columns}
        dataSource={tableData}
        scroll={{ x: columns.length * 120, y: 250 }}
        pagination={{
          total: data.total,
          onChange: pageChange
        }}
      />
    </div>
  );
};
