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 apis from '../../services/apis';
import request from '../../utils/request'

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

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

const columns = [
  {
    title: '用户姓名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center',
  },
  {
    title: '参与人数',
    dataIndex: 'attendNum',
    key: 'attendNum',
    align: 'center',
  },
  {
    title: '报名时间',
    dataIndex: 'createDate',
    key: 'createDate',
    align: 'center',
    render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD')}`}</span></>,
  },
  {
    title: '引流人',
    dataIndex: 'sharePersonName',
    key: 'sharePersonName',
    align: 'center',
  },
  {
    title: '公司',
    dataIndex: 'orgName',
    key: 'orgName',
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'isCheckin',
    key: 'isCheckin',
    align: 'center',
    render: (x, row) => <><span>{row.isCheckin === 1 ? '已签到' : '未签到'}</span></>,
  },
];



const header = props => {
  const [data, setData] = useState({ list: {} })
  //   const [page, changePage] = useState({})
  // 存入导入数据的值
  const { getFieldDecorator, getFieldsValue } = props.form
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    // eslint-disable-next-line no-use-before-define
    getSignList({ pageNum: 1, pageSize: 10, dynamicId: props.location.query.dynamicId });
  }, [])

  // 查询列表
  const getSignList = params => {
    // eslint-disable-next-line no-shadow
    request({ ...apis.activity.signList, params: { ...params } }).then(data => {
      console.log(data)
      setData(data)
    })
  }

  const changePageNum = (pageNumber) => {
    getSignList({ pageNum: pageNumber, pageSize: 10, dynamicId: props.location.query.dynamicId })
  }

  const toActivityList = () => {
    router.push({
      pathname: '/activity/ActivityList',
    });
  }
  // 提交事件
  // eslint-disable-next-line no-shadow
  const handleSubmit = (e, props) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      getSignList({ pageNum: 1, pageSize: 10, dynamicId: props.location.query.dynamicId, isCheckin: values.isCheckin, name: values.name, phone: values.phone })
    });
  }
  // 重置搜索
  function handleReset() {
    props.form.resetFields();
    getSignList({ pageNum: 1, pageSize: 10, dynamicId: props.location.query.dynamicId })
  }
  // eslint-disable-next-line class-methods-use-this
  function exportHelp() {
    const fieldsValue = getFieldsValue()
    console.log('fieldsValue', fieldsValue)
    request({ ...apis.activity.getTaActivityDynamicEnlistExport, params: { ...fieldsValue, dynamicId: props.location.query.dynamicId } })
      .then(data => {
        if (!data) {
          return
        }
        const url = window.URL.createObjectURL(new Blob([data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '报名列表.xlsx')
        document.body.append(link)
        link.click()
      }).catch(() => {

      })
  }

  return (
    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('isCheckin')(
            <Select style={{ width: '180px' }} placeholder="签到状态">
              <Option value="0">未签到</Option>
              <Option value="1">已签到</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('name')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="用户姓名"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('phone')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="手机号"
            />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
            搜索
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
            重置
            </Button>
        </Form.Item>
        <Button style={{ position: 'absolute', right: '30px' }} onClick={toActivityList}>返回</Button>
      </Form>

     <div style={{textAlign:'right',margin:'6px 0 10px 0'}}> <Button name="admin.activityDynamicEnlist.export.get" noRight={null} type="primary" onClick={exportHelp}>导出</Button></div>
      <Table dataSource={data.list.data} columns={columns} pagination={{ total: data.total, onChange: changePageNum }} rowKey="activity" />
      {/* <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: 'header' })(header);

export default WrappedHeader
