import React, { useState, useEffect } from 'react';

import styles from './index.less';
import { Input ,Menu,Table,Space} from 'antd';

import { Link, useIntl, connect, Dispatch } from 'umi';

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
];

const ChargeManager = () => {
  const { formatMessage } = useIntl();
  
  const nameofowner = formatMessage({ id: 'R.charge.input.nameofowner' })
  const inputProject = formatMessage({ id: 'R.charge.input.project' })
  const username = formatMessage({ id: 'R.charge.username' })
  const project = formatMessage({ id: 'R.charge.project' })
  const unit = formatMessage({ id: 'R.charge.unit' })
  const status = formatMessage({ id: 'R.charge.status' })
  const submissionTime = formatMessage({ id: 'R.charge.submissionTime' })
  const actions = formatMessage({ id: 'R.charge.actions' })
  const search = formatMessage({ id: 'R.charge.search' })
  const addaccount = formatMessage({ id: 'R.charge.addaccount' })
  const paymentsetting = formatMessage({ id: 'R.charge.paymentsetting' })
  
  const menuListNormal = ["A"]
  const [display, setDisplay] = useState("A");//小组件：线框
  
  const pagination={defaultCurrent:1,total: 16}

  const columns = [
    {
      title: username,
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: project,
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: unit,
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: status,
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: submissionTime,
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: actions,
      key: 'action',
      render: (text: any, record: any) => (
        <Space size="middle">
          <a>详情</a>
        </Space>
      ),
    },
  ];

  return (
    <div className={styles.base}>       
        {/* 头部组件 */}
      <div className={styles.box}>
        <input className={styles.item1} placeholder={nameofowner} />
        <input className={styles.item2} placeholder={inputProject} />
        <input className={styles.item4} placeholder="" />
        <button className={styles.item3}>{search}</button>
      </div>

        {/* 内容组件 */}
      <div className={styles.box2}>
        <button className={styles.buttonAdd} >{paymentsetting}</button>
      </div>   
        
      {/* 列表组件 */}
      <Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />;
      

    </div>
  );
};


export default ChargeManager;
