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

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

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


import { timestampToTime } from '../../utils/time';
import { values } from 'lodash';

import TitleSearch from '../../components/TitleSearch/TitleSearch';
const ChargeManager = (props: any) => {
  const { formatMessage } = useIntl();
  const { dispatch, location, Data } = props;

  const get = (values: any) => { dispatch({ type: 'PropertyManagement/get', playload: values }) };
  const getById = (values: any) => { dispatch({ type: 'PropertyManagement/getById', playload: values }) };
  useEffect(() => {
    get(null)
  }, []);


  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", 'Accounting company']
  const [display, setDisplay] = useState("A");//小组件：线框

  const pagination = { defaultCurrent: 1, total: 16 }

  const goToDetail = (values: any) => {
    getById(values)
    history.push('/PropertyManagementDetail')
  }
  const goToAddAccout = () => {
    history.push(location.pathname + '/AccoutingDetail')
  }
  const columns = [
    { title: username, dataIndex: 'tosOwnerName' },
    { title: project, dataIndex: 'communityName' },
    { title: unit, dataIndex: 'buildingNumber' },
    { title: status, dataIndex: 'enable' },
    {
      title: submissionTime,
      render: (text: any, record: any) => (
        <Space size="middle">
          {timestampToTime(record.createTime.time)}
        </Space>
      ),
    },
    {
      title: actions,
      render: (text: any, record: any) => (
        <Space size="middle">
          <a onClick={goToDetail.bind(this, record)}>Detail</a>
        </Space>
      ),
    },
  ];
  const TitleSearchContent = (comment: any) => {
    console.log(comment)
  }
  return (
    <div className={styles.base}>

      <TitleSearch listkey={['tosOwnerName', 'communityName']} list={['tosOwnerName', 'communityName']} onSubmit={TitleSearchContent} />

      {/* 内容组件 */}
      <div className={styles.box2}>
        {
          menuListNormal.map((item, index) => {
            return (<button key={"bt" + index} className={display == item ? styles.buttonChoose : styles.buttonWait} onClick={() => { setDisplay(item) }}>{item}</button>)
          })
        }
        <button className={styles.buttonAdd2} onClick={goToAddAccout}>+ {addaccount} </button>
        <button className={styles.buttonAdd} >{paymentsetting}</button>
      </div>

      {/* 列表组件 */}
      <Table style={{ marginTop: 16 }} rowKey={"id"} dataSource={Data} columns={columns} pagination={pagination} />


    </div>
  );
};

function mapStateToProps(state: any) {
  const { Data } = state.PropertyManagement;
  return {
    Data
  };
}
export default connect(mapStateToProps)(ChargeManager);
