import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
// import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../style/GoodsList.less';
import router from 'umi/router';
import moment from 'moment';
// import SelectCity from '../../components/SelectButton/CitySelect'
// import BuildSelect from '../../components/SelectButton/BuildSelect'
// import apis from '../../services/apis';
// import request from '../../utils/request'
import { fetch, apis } from '../../utils/request'
// import { useQuery } from '../../utils/hooks'
import PaginationWrapper from '../../components/PaginationWrapper'
import SearchForm from '../../components/SearchForm'

// const { Option } = Select;
// const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

const getMessageList = fetch(apis.system.taCustomerMessage)

const header = (props) => {
  // const [ data, setData ] = useState({})
// //   const [page, changePage] = useState({})

//   useEffect(() => {
//     getList({ pageNum: 1, pageSize: 10 });
//   },[])

//   // 查询列表
//   const getList = (params) => {
//     request({ ...apis.system.taCustomerMessage, params: { ...params },}).then((data) => {
//         console.log(data)
//         setData(data)
//     })
//   }

  // const [pageNum, setPage] = useState(1)
  // const [data, loading, err] = useQuery({params: { pageNum }}, getMessageList)

  const columns = [
    {
      title: '电话号码',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
      width: 200,
    },
    {
      title: '留言内容',
      dataIndex: 'message',
      key: 'message',
      align: 'center',
      render: txt => (<p style={{ textAlign: 'left', lineHeight: '1.8em' }}>{txt}</p>)
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      width: 200,
      render: (x, row) => <><span>{moment(row.createDate).format('YYYY-MM-DD')}</span></>
    },
  ];
   
  
  // const changePageNum = (pageNumber) => {
  //     getList({ pageNum: pageNumber, pageSize: 10 })
  // }

  
  console.log('------render messagelist-------')
 

  // const { getFieldDecorator } = props.form
  return (
    <>
    {/* <SearchForm
      onSearch={console.log}
      fields={[
        {
          label: 'Foo',
          name: 'foo',
          element: <Input />,
        },
        {
          label: 'Bar',
          name: 'bar',
          element: (<Select style={{ width: '200px' }}>
            <Select.Option value={1}>a</Select.Option>
            <Select.Option value={2}>b</Select.Option>
          </Select>)
        },
      ]}
    ></SearchForm> */}
    <PaginationWrapper
      request={getMessageList}
      render={data => <Table rowKey={record => record.messageId} dataSource={data.records} columns={columns} pagination={false}/>}
    >
    </PaginationWrapper>
    </>
    // <>
    //   <Table rowKey="messageList" dataSource={data.records} columns={columns} pagination={false}/>
    //   <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
    //     <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={pg => setPage(pg)} current={data.current}/>
    //   </div>
    // </>
  )
}
// const WrappedHeader = Form.create({ name: 'header' })(header);

export default header
