import React, { useState, useEffect } from 'react';
import { Form, Table, Avatar, Alert, Select, Button } from 'antd';

import request from '../../../utils/request';
import apis from '../../../services/apis';
import Styles from './style.less'
import WxDictSelect from '@/components/SelectButton/WxDictSelect';

function costomerDrift(props) {
  const { getFieldDecorator } = props.form
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [dataSources, setDataSources] = useState({ records: [] })

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
   getList({ pageNumber: '1', pageSize: '10' })
  }, [])

  function getList(params) {
    request({ ...apis.customer.drift, params: { ...params } }).then(res => {
      setDataSources(res)
    }).catch(err => {
      // eslint-disable-next-line no-unused-expressions
      <Alert
        style={{
          marginBottom: 24,
        }}
        message={err}
        type="error"
        showIcon
      />
    })
  }

  // 分页
  function onChange(pageNum) {
    // eslint-disable-next-line no-console
    console.log('Page: ', pageNum);
    getList({ pageNumber: pageNum, pageSize: 10 })
  }

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

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

  const columns = [
    {
      title: '头像',
      dataIndex: 'avatarurl',
      key: 'avatarurl',
      render: (_, record) => <Avatar shape="square" src={record.avatarurl} size={64} icon="user" />,
    },
    {
      title: '姓名',
      dataIndex: 'nickname',
      key: 'nickname',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => <><span>{ record.gender === '1' ? '男' : record.gender === '2' ? '女' : '未知' }</span></>,
    },
    {
      title: '用户来源',
      dataIndex: 'sceneAlias',
      key: 'sceneAlias',
      render: (_, record) => <><span>{ record.sceneAlias ? record.sceneAlias : '其他'}</span></>,
    },
  ];
  
  return (
    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('sceneType')(
            <WxDictSelect />,
          )}
        </Form.Item>

        <Form.Item>
            {/* <AuthButton name="admin.customer.recommend.search" noRight={null}> */}
            <Button type="primary" htmlType="submit" >
              搜索
            </Button>
            {/* </AuthButton> */}
            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
        </Form.Item>
      </Form>
      <Table style={{marginTop:'10px'}} dataSource={dataSources.records} rowKey="drift" columns={columns} pagination={{ total: dataSources.total, onChange }} />
    </>
    // eslint-disable-next-line max-len
    
  )
}

const WrappedBody = Form.create()(costomerDrift);
export default WrappedBody
