import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar } from 'antd';
import moment from 'moment';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import Styles from './style.less';
import BuildSelect from '../../../components/SelectButton/BuildSelect'
import AuthButton from '@/components/AuthButton';

const columns = [
  {
    title: '头像',
    dataIndex: 'picture',
    key: 'picture',
    align: 'center',
    width: '15%',
    render: (_, record) => <Avatar shape="square"  size={64} icon="user" />,
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    width: '10%',
    // eslint-disable-next-line no-nested-ternary
    // render: (_, record) => <><span>{customerType === 'private' ? record.name : record.nickname}</span></>,
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center',
    width: '15%',
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    align: 'center',
    width: '15%',
  },
  {
    title: '置业顾问',
    dataIndex: 'asdf',
    key: 'asdf',
    align: 'center',
    width: '15%',
  },
  {
    title: '置业顾问电话',
    dataIndex: 'tel',
    key: 'tel',
    align: 'center',
    width: '15%',
  },
  {
    title: '到访时间',
    dataIndex: 'time',
    key: 'time',
    align: 'center',
    width: '15%',
  },
]

const data = [

]

function onChangetime(dates, dateStrings) {
 
  // setEndDate(dateStrings[1])
  // setStartDate(dateStrings[0])
  
}

function exportReport() {
  // request({ ...apis.customer.customerRecommendReportExport, responseType: 'blob' })
  //   .then(response => {
  //     download(response)
  //   })
}







function body (props) {
  const { getFieldDecorator, getFieldsValue } = props.form
  const { RangePicker } = DatePicker;

  function handleReset() {
    props.form.resetFields();
    // getList({ pageNumber: 1, pageSize: 10, customerType })
  }

  function handleSubmit(e) {
 
  }

  // 分页
  function onChange(pageNum) {
    props.form.validateFields((err, values) => {
      if (!err) {
        getList({ pageNumber: pageNum, pageSize: 5, ...values })
      }
    });
    // getList({ pageNumber: pageNum, pageSize: 9 })
  }

  return (
    <>
    <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
       <Form.Item>
          {getFieldDecorator('buildingId')(
            <BuildSelect />,
          )}
        </Form.Item>
       
        <Form.Item>
          {getFieldDecorator('name')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="姓名"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('tel')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="电话"
            />,
          )}
        </Form.Item>
        
         <Form.Item label="到访时间">
          { getFieldDecorator('time')(
            <RangePicker
            style={{ width: '400px' }}
            // placeholder="到访时间"
            // ranges={{
            //   Today: [moment(), moment()],
            //   'This Month': [moment().startOf('month'), moment().endOf('month')],
            // }}
            // defaultValue={[moment(new Date(new Date().setDate((new Date().getDate() - 6))), 'YYYY-MM-DD HH:MM:SS'), moment(new Date(), 'YYYY-MM-DD HH:MM:SS')]}
            showTime
            onChange={onChangetime}
          />
          )}
        </Form.Item>
        <Form.Item>
            <Button type="primary" htmlType="submit" >
              搜索
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
        </Form.Item>
      </Form>
      <Button type="primary" onClick={() => exportReport()} style={{ float: 'right', margin: '20px 0', zIndex: 1 }}>
        导出
      </Button>

      <Table dataSource={data} columns={columns} pagination={{ total: data.total, onChange }} />
      {/* pagination={{ total: dataSource.total, onChange }} */}
    </>
  );
}
const WrappedBody = Form.create({ name: 'body' })(body);

export default WrappedBody