import React, { memo } from 'react';
import { Space } from 'antd';
import { QxSearchForm, QxTable, QxToolbar } from '@/src/components/view-render';
import { useRequest } from 'ahooks';
import { getData } from './services';
import data from './data.json';
import styles from './styles.less';

const prefixCls = 'app-view';

const AppView: React.FC<AppViewProps> = (props) => {
  const { search, list, bar } = data;
  const { data: tableData = {} as any, run, loading } = useRequest(getData);

  const changeFullscreen = () => {};

  return (
    <div className={styles[prefixCls]}>
      <Space direction="vertical" size={20}>
        <QxSearchForm {...search} onSearch={() => run()} />
        <QxToolbar
          isFullscreen
          changeFullscreen={changeFullscreen}
          buttons={bar.buttons}
        />
        <QxTable
          loading={loading}
          columns={list.columns}
          dataSource={tableData.list}
        />
      </Space>
    </div>
  );
};

interface AppViewProps {}

export default memo(AppView);