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

/**
  @param {*} props
  @returns
 */
const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

function record(props) {
  const { getFieldDecorator } = props.form

  // 获取初始化数据
  const [data, setData] = useState({})
  const personId = props.location.query.id

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

  // 查询列表
  const getList = (params) => {
    request({ ...apis.activity.clickCountList, params: { ...params }, }).then((data) => {
      if (data) {
        setData(data)
      }

      console.log("data:", data)
    })
  }

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

  function back() {
    router.go(-1);
  }

  // 提交事件
  const handleSubmit = (e, props) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        let { shareTime, receiveTime, ...submitValue } = values
        if (null != shareTime && shareTime.length > 0) {
          const [startCreateDate, endCreateDate] = shareTime
          submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
          submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
        } else {
          submitValue.startCreateDate = null
          submitValue.endCreateDate = null
        }
        console.log(submitValue)
        getList({ pageNum: 1, pageSize: 10, personId: personId, ...submitValue })
      }
    });
  }

  const changePageNum = (pageNumber) => {
    props.form.validateFields((err, values) => {
      if (!err) {
        getList({ pageNum: pageNumber, pageSize: 10, personId: personId, ...values })
      }
    });
  }

  const columns = [

    {
      title: '分享标题',
      dataIndex: 'shareTitle',
      key: 'shareTitle',
      align: 'center',
    },
    {
      title: '用户名',
      dataIndex: 'personName',
      key: 'personName',
      align: 'center',
    },
    {
      title: '手机号',
      dataIndex: 'personPhone',
      key: 'personPhone',
      align: 'center',
    },
    {
      title: '访问时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
    },
  ];

  return (

    <>
      <div align="right" style={{ marginBottom: '16px' }}><Button onClick={back}>返回</Button></div>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <div style={{ display: 'flex' }}>
          <Form.Item label="分享类型" >
            {getFieldDecorator('shareType')(
              <Select placeholder="分享类型" style={{ width: '200px' }}>
                <Option value="dynamic_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>
                <Option value="house_share">房源</Option>
                <Option value="card_share">名片</Option>
              </Select>,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('shareTitle')(
              <Input
                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="分享标题"
              />,
            )}
          </Form.Item>
          <Form.Item style={{ position: 'absolute', right: '38px' }}>

            <AuthButton name="admin.taGoods.exchange" noRight={null}>
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
            </AuthButton>
            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
          </Form.Item>
        </div>
      </Form>
      <Table rowKey="exchangeRecords" style={{ marginTop: '40px' }} dataSource={data.records} columns={columns} pagination={false} />
      <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: 'record' })(record);

export default WrappedHeader
