import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Upload, Table, Pagination } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import moment from 'moment';
import router from 'umi/router';
import apis from '../../../../../services/apis';
import BuildSelect from '../../../../../components/SelectButton/BuildSelect';
import AuthButton from '@/components/AuthButton';
import styles from './style.less';
import request from '../../../../../utils/request';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { TextArea } = Input;

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

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

  // 查询列表
  const getList = (params) => {
    request({ ...apis.house.taHouseShare, params: { ...params },}).then((data) => {
        console.log(data)
        setData(data)
    })
  }
  
  const columns = [
    {
      title: '头像',
      align: 'center',
      render: (text, records) => <img src={records.photoOravatar} width={50} height={50} />,
    },
    {
      title: '昵称',
      dataIndex: 'nameOrnick',
      key: 'nameOrnick',
      align: 'center',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
    },
    {
      title: '身份',
      dataIndex: 'personType',
      key: 'personType',
      align: 'center',
      render: (personType) => <span>{ personType === 'Realty Consultant' ? '置业顾问' : personType === 'customer' || personType === 'estate agent' ? '用户' : '游客' }</span>
    },
    {
      title: '分享时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (x, row) => <><span>{moment(row.createDate).format('YYYY-MM-DD hh:mm:ss')}</span></>
    },
    {
      title: '分享方式',
      dataIndex: 'shareType',
      key: 'shareType',
      align: 'center',
      render: (x, row) => <span>{ row.tagertType == 'housePost' ? '海报分享' : '小程序分享' }</span>
    },
    {
      title: '分享内容',
      dataIndex: 'salesBatchName',
      key: 'salesBatchName',
      align: 'center',
      render: (x, row) => <span>{ row.salesBatchName }的房源列表</span>
    },
  ];
  
  const changePageNum = (pageNumber) => {
      getList({ pageNum: pageNumber, pageSize: 10, salesBatchId : salesBatchId, ...props.form.getFieldsValue() })
  }

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

   //重置搜索
   function handleReset() {
    props.form.resetFields();
  }

  const { getFieldDecorator } = props.form
  return (

    <>
      <Form style={{marginBottom:'20px'}} layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('shareType')(
            <Select style={{ width: '180px' }} placeholder="分享方式">
              <Option value="housePost">海报分享</Option>
              <Option value="houseApp">小程序分享</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('personType')(
            <Select style={{ width: '180px' }} placeholder="身份">
              <Option value="Realty Consultant">置业顾问</Option>
              <Option value="customer">用户</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('phone')(
            <Input placeholder="手机号"/>
          )}
        </Form.Item>
        <Form.Item>
        <AuthButton name="admin.extendContent.search" noRight={null}>
          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
            搜索
          </Button>
          </AuthButton>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
        </Form.Item>
      </Form>
      <Table 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 ShareRecord = Form.create({ name: 'header' })(header);

export default ShareRecord
