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 AuthButton from '@/components/AuthButton';

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

const defaultTip = '请选择项目搜索'

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

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

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

  /**
   *
   *
   * @param {*} props
   * @returns
   */

  const columns = [
    {
      title: '活动名称',
      dataIndex: 'activityName',
      key: 'activityName',
      align: 'center',
      render: (text, record) => <span>{record.activityName != null ? record.activityName :
        record.drainageName != null ? record.drainageName : record.buildingName != null ? record.buildingName : record.newsName != null ? record.newsName : record.helpActivityName != null ? record.helpActivityName :
          record.groupActivityName != null ? record.groupActivityName : ''}</span>,
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      key: 'userName',
      align: 'center',
    },
    {
      title: '手机号',
      dataIndex: 'userTel',
      key: 'userTel',
      align: 'center',
    },
    {
      title: '访问时间',
      dataIndex: 'visitTime',
      key: 'visitTime',
      align: 'center',
      render: (x, row) => <><span>{`${moment(row.visitTime).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
    },
    {
      title: '分享者',
      dataIndex: 'shareName',
      key: 'shareName',
      align: 'center',
    },
    {
      title: '分享者手机号',
      dataIndex: 'shareTel',
      key: 'shareTel',
      align: 'center',
    },
    {
      title: '分享者类型',
      dataIndex: 'personType',
      key: 'personType',
      align: 'center',
      render: (text, record) => <span>{record.personType === 'Realty Consultant' ? '置业顾问' : '普通客户'}</span>,
    },
  ];


  const changePageNum = (pageNumber, props) => {
    getList({ pageNumber: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
  }

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

        if (!values.buildingId) {
          message.error("请选择项目")
          return;
        }

        getList({ pageNum: 1, pageSize: 10, ...values })
      }
    });
  }

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


  const { getFieldDecorator } = props.form
  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('buildingId')(
            <BuildSelect />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('eventType')(
            <Select placeholder="分享类型" style={{ width: 150 }}>
              <Option value="activity_share">报名活动</Option>
              <Option value="help_share">助力活动</Option>
              <Option value="group_share">拼团活动</Option>
              <Option value="h5_share">H5活动</Option>
              <Option value="building_share">项目</Option>
              <Option value="news_share">资讯</Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('activityName')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="分享标题"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('shareName')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="分享者名称"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('personType')(
            <Select placeholder="分享者类型" style={{ width: 150 }}>
              <Option value="Realty Consultant">置业顾问</Option>
              <Option value="customer">普通客户</Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('shareTel')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="分享者手机"
            />,
          )}
        </Form.Item>
        <Form.Item>
          <AuthButton name="admin.visit.record.search" noRight={null}>
            <Button type="primary" htmlType="submit" className={styles.searchBtn}>
              搜索
          </Button>
          </AuthButton>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
            重置
            </Button>
        </Form.Item>
      </Form>
      <Table style={{ marginTop: '30px' }} dataSource={data.records} columns={columns} pagination={false} rowKey="activityList" locale={{ emptyText: defaultTip }} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={e => changePageNum(e, props)} current={data.current} />
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
