import React from 'react';
import { connect } from 'dva';
import localCfg from './localCfg';
import { Loader, UploadEL } from '@components';
import { Block, Page, Panel, Toolbar } from '@bizComponents';

const DevPage = ({ dev_form, dispatch, loading, mode }) => {

  const { formData, tableData, remoteCfg } = dev_form;

  const tableProps = {
    domain: 'edDetail',
    rowKey: 'id',
    scroll: {
      x: '100%',
      y: 400,
    },
    loading,
    dispatch,
    showAdd: false,
    showDelete: false,
    showCopy: false,
    enableSelection: false,
    size: 'small',
  };

  const formProps = {};

  const handleFieldsChange = (field) => {
    console.log(field);
  };

  const handleTableFieldsChange = (field) => {
    console.log(field);
  };

  if (remoteCfg) {
    remoteCfg.buttons.find(b => b.id === 'approve')['onClick'] = () => {
      console.log('press approve');
    };

    remoteCfg.buttons.find(b => b.id === 'reject')['onClick'] = () => {
      console.log('press reject');
    };

    remoteCfg.buttons.find(b => b.id === 'notice')['onClick'] = () => {
      console.log('press notice');
    };


    const buttons = [
      ...localCfg(formData, mode).buttons,
      ...remoteCfg.buttons,
    ];

    return (
      <div>
        <Toolbar prcId={'139801'} defId={'BCTypeContract:13:105300'} loading={loading} record={{}} mode={remoteCfg.mode}
                 buttons={buttons} handleSync={() => {
          console.log('press sync');
        }} handleMail={() => {
          console.log('press mail');
        }} handlePrint={() => {
          console.log('press print');
        }} handleCancel={() => {
          console.log('press cancel');
        }}
        />

        <Page dispatch={dispatch} loading={loading} localCfg={localCfg} remoteCfg={remoteCfg}
              id="contractDetails">

          <Panel id="basicInfo" title="基础信息">
            <Block id="basicForm" type="form" data={{}} onFieldsChange={handleFieldsChange} {...formProps} />
            <Block id="bankList" type="table" data={tableData}
                   onFieldsChange={handleTableFieldsChange} {...tableProps} />
          </Panel>

          <Panel id="bankInfo" title="重要信息" isOpened={false}>
            <Block id="basicBank" type="form" data={{}} onFieldsChange={handleFieldsChange} />
          </Panel>

          <Panel id="bankInfo" title="非表单非表格">
            <Block id="basicBank" type="other" data={{}}>
              <div>test</div>
              <UploadEL api={'/dev/sfs-client/sfs/token'} dataKey={'rex'} listType={'picture'} />
            </Block>
          </Panel>
        </Page>
      </div>
    );
  } else {
    return <Loader fullScreen={false} spinning={loading.effects['dev_form/query']} />;
  }
};

export default connect(({ dev_form, loading }) => ({ dev_form, loading }))(DevPage);
