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, message } 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';
import AuthButton from '@/components/AuthButton';

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

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

  function getList(params) {
    // 网路请求
    request({ ...apis.house.taPreselectRecord, urlData: {id: salesBatchId}, params: { ...params } }).then(res => {
      console.log('res', res)
      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);
      setHouseIdList(selectedRows)
    },
  };

  const toDelBatch = rowData => () =>{
    console.log(houseIdList, 'houseIdListhouseIdList')
    if(houseIdList.length < 1){
      openNotificationWithIcon('error', '至少要选择一条数据。')
      return
    }
    const title = '将所选' + houseIdList.length + '条预选记录批量删除？预选记录删除后，用户在个人中心无法查看到历史预选记录。请确认这些记录对这些用户不重要后再删除。'

    Modal.confirm({
      title: title,
      okText: '确定',
      cancelText: '取消',
      onOk () {
        console.log(houseIdList,'houseIdListhouseIdList');
        request({ ...apis.house.batchDelTaPreSelectionRecord, data: houseIdList, }).then((data) => {
          console.log(111111)
          message.info("操作成功")
          getList({ pageNum: 1, pageSize: 10 });
        }).catch((err) => {
        })
      },
    });
  }

  // 提交事件
  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        if(values.startTime){
          values.startTime = moment(values.startTime).format('YYYY-MM-DD HH:mm:ss')
        }
        if(values.endTime){
          values.endTime = moment(values.endTime).format('YYYY-MM-DD HH:mm:ss')
        }
        getList({ pageNumber: 1, pageSize: 10, ...values })
      }
    });
  }


  const columns = [
    {
      title: '房源编号',
      dataIndex: 'houseId',
      key: 'houseId',
    },
    {
      title: '房源',
      dataIndex: 'houseInfo',
      key: 'houseInfo',
      render: (text, records) => <span>{records.termname}/{records.blockName}/{records.unitName}/{records.floorName}/{records.roomName}</span>,
    },
    // {
    //   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',
      render: (x, row) => <><span>{row.updateDate != null ? `${moment(row.updateDate).format('YYYY-MM-DD HH:mm:ss')}` : null}</span></>,
    },
    // {
    //   title: '最后修改人',
    //   dataIndex: 'updateName',
    //   key: 'updateName',
    // },
  ]
  const { getFieldDecorator } = props.form
  return (
    <>
    <Form layout="inline" onSubmit={e => handleSubmit(e)}>
        <Form.Item>
          {getFieldDecorator('termName')(
            <Input placeholder="期区"/>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('blockName')(
            <Input placeholder="楼栋"/>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('unitName')(
            <Input placeholder="单元"/>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('floorName')(
            <Input placeholder="层"/>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('roomName')(
            <Input placeholder="房号"/>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('houseId')(
            <Input placeholder="房源编号"/>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('userName')(
            <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>
          {getFieldDecorator('startTime')(
            <DatePicker placeholder="状态开始时间从"/>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('endTime')(
            <DatePicker placeholder="状态修改时间到"/>,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" >
            搜索
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
            重置
            </Button>
        </Form.Item>
      </Form>
      <AuthButton noRight={null}>
        <Button style={{marginBottom:'20px', marginTop:'20px'}} type="primary" onClick={toDelBatch()}>批量删除</Button>
      </AuthButton>
      <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
