import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, Table, notification, Modal } from 'antd';
import moment from 'moment';
import request from '../../../../../utils/request';
import apis from '../../../../../services/apis';
import Styles from './style.less';
import { router } from 'umi';
import BlockSelect from '../../../../../components/HouseSelect/BlockSelect'
import UnitSelect from '../../../../../components/HouseSelect/UnitSelect'
import FloorSelect from '../../../../../components/HouseSelect/FloorSelect'
import RoomSelect from '../../../../../components/HouseSelect/RoomSelect'
import ApartmentSelect from '../../../../../components/HouseSelect/ApartmentSelect';

/**
 *图片设置
 *
 * @param {*} props
 * @returns
 */
function PreselectionRecord(props) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState([])
  const salesBatchId = props.salesBatchId.batchId
  console.log(salesBatchId,'updateNameupdateNameupdateName');
  useEffect(() => {
    getList()
  }, [])

  function openNotificationWithIcon(type, message) {
    notification[type]({
      message,
      description:
        '',
    });
  }

  function getList(params) {
    // 网路请求
    request({ ...apis.house.taPreselectRecord, params: { ...params,salesBatchId: salesBatchId, houseId: props.houseId } }).then(res => {
      console.log(res,"resresres")
      setData(res)
    }).catch(err => {
      openNotificationWithIcon('error', err.message)
    })
  }

    // 重置搜索
    function handleReset () {
      props.form.resetFields();
      getList({ pageNumber: 1, pageSize: 10 })
    }

  // 分页
  const changePageNum = (pageNumber) => {
    getList({ pageNum: pageNumber, pageSize: 10, salesBatchId : salesBatchId, ...props.form.getFieldsValue() })
  }

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  };

  // 提交事件
  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log('提交数据: ', values)
        getList({ pageNumber: 1, pageSize: 10, ...values })
      }
    });
  }


  const columns = [
    {
      title: '房源编号',
      dataIndex: 'houseId',
      key: 'houseId',
    },
    {
      title: '期/区',
      dataIndex: 'termname',
      key: 'termname',
    },
    {
      title: '楼栋',
      dataIndex: 'blockName',
      key: 'blockName',
      // render: blockName => <><span>{blockName}幢</span></>,
    },
    {
      title: '单元',
      dataIndex: 'unitName',
      key: 'unitName',
      // render: unitName => <><span>{unitName}单元</span></>,
    },
    {
      title: '层',
      dataIndex: 'floorName',
      key: 'floorName',
      // render: floorName => <><span>{floorName}层</span></>,
    },
    {
      title: '房号',
      dataIndex: 'roomName',
      key: 'roomName',
    },
    {
      title: '对应户型',
      dataIndex: 'apartmentName',
      key: 'apartmentName',
    },
    {
      title: '用户昵称',
      dataIndex: 'nameOrnick',
      key: 'nameOrnick',
    },
    {
      title: '用户姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '用户头像',
      dataIndex: 'avatarurl',
      key: 'avatarurl',
      render: (text, records) => <img src={records.avatarurl} width={50} height={50} />,
    },
    {
      title: '用户手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    
    {
      title: '预选状态',
      dataIndex: 'status',
      key: 'status',
      render: status => <><span>{status == 0 ? '取消预选' : status == 1 ? '预选' : ''}</span></>,
    },
    // {
    //   title: '状态修改时间',
    //   dataIndex: 'updateDate',
    //   key: 'updateDate',
    // },
    // {
    //   title: '最后修改人',
    //   dataIndex: 'updateName',
    //   key: 'updateName',
    // },
  ]
  const { getFieldDecorator } = props.form
  return (
    <>
    <Form layout="inline" onSubmit={e => handleSubmit(e)}>
        <Form.Item>
          {getFieldDecorator('house')(
            <Input placeholder="房源编号"/>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('phone')(
            <Input placeholder="用户手机号"/>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('apartmentId')(
             <ApartmentSelect buildingId={props.buildingId} />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('status')(
             <Select placeholder="预选状态" style={{width: '120px'}}>
             <Option value="0">取消预选</Option>
             <Option value="1">预选</Option>
           </Select>,
          )}
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit" >
            搜索
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
            重置
            </Button>
        </Form.Item>
      </Form>
      {/* <Table rowSelection={rowSelection} dataSource={data.records} columns={columns} pagination={{ total: data.total, onChange: e => this.changePageNum(e) }} rowKey="House" /> */}
      <Table rowSelection={rowSelection} dataSource={data.records} columns={columns} pagination={false} rowKey="carouseFigureList"/>
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current}/>
      </div>      
    </>
  )
}
const WrappedHeader = Form.create({ name: 'PreselectionRecord' })(PreselectionRecord);
export default WrappedHeader
