import React, { useState, useEffect } from 'react';
import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Avatar } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import channels from './channelList.less';
import router from 'umi/router';
import apis from '../../services/apis';
import request from '../../utils/request'
import Navigate from '@/components/Navigate';

const { Option } = Select;
function handleChange(value) {
  console.log(`selected ${value}`);
}


const menu = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1">
      <Icon type="user" />
      1st menu item
    </Menu.Item>
    <Menu.Item key="2">
      <Icon type="user" />
      2nd menu item
    </Menu.Item>
    <Menu.Item key="3">
      <Icon type="user" />
      3rd item
    </Menu.Item>
  </Menu>
);
const columns = [
  {
    title: '头像',
    dataIndex: 'avatarurl',
    key: 'avatarurl',
    align: 'center',

    // eslint-disable-next-line jsx-a11y/alt-text
    render: (text, list) => <Avatar shape="square" style={{ color: 'blue', cursor: 'pointer' }} src={list.avatarurl} size={64} icon="user" />,
  },
  {
    title: '用户姓名',
    dataIndex: 'nickname',
    key: 'nickname',
    align: 'center',
    render: (text, list) => <><span>{list.name || list.nickname}</span></>,
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center',
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    align: 'center',
    render: (text, list) => <a>{list.gender === '1' ? '男' : list.gender === '2' ? '女' : '未知'}</a>,
  },
  {
    title: '推荐客户',
    dataIndex: 'recommendCount',
    key: 'recommendCount',
    align: 'center',
    // render: (text, list) => <a style={ { color: '#66B3FF' } } onClick= {() => torecommend(list.personId)} >{ list.recommendCount }</a>,
    render: (text, list) => <Navigate onClick={() => torecommend(list.personId)} >{list.recommendCount}</Navigate>,
  },
  // {
  //   title: '邀请经纪人',
  //   dataIndex: 'inviteCount',
  //   key: 'inviteCount',
  //   align: 'center',
  //   render: (text, list) => <a style={ { color: '#66B3FF' } } onClick= {() => toinvite(list.personId)} >{ list.inviteCount }</a>,
  // },
];

// 跳转到推荐客户
function torecommend(personId) {
  router.push({
    pathname: '/channel/recommendClients',
    query: {
      id: personId,
    },
  });
}

// 跳转到邀请经纪人
function toinvite(personId) {
  router.push({
    pathname: '/channel/InviteClients',
    query: {
      id: personId,
    },
  });
}


const header = props => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState({ list: [] })

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [queryData, setQueryData] = useState({})

  const channelId = props.location.query.id
  //   const [page, changePage] = useState({})
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getListBroker({ channelId, pageNum: 1, pageSize: 10 })
  }, [])

  function getListBroker(params) {
    request({ ...apis.channelList.getListBroker, params: { ...params } }).then((data) => {
      setData(data)
    }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
    })
  }


  // 搜索
  function queryList() {
    getListBroker({ ...queryData, pageNum: 1, pageSize: 10, channelId })
  }
  // 分页
  function onChange(pageNumber) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    getListBroker({ pageNum: pageNumber, pageSize: 10, channelId })
  }
  //   // 获取input的值
  //   function onInputChangeName (e) {
  //     // const InputValue = e.target.name.x.value;
  //     setQueryData({ ...queryData, name: e.target.value })
  //  }

  //  function onInputChangePhone (e) {
  //   // const InputValue = e.target.name.x.value;
  //   setQueryData({ ...queryData, phone: e.target.value })
  // }
  // function refurbishList () {
  //   getListBroker({ pageNum: 1, pageSize: 10 })
  // }
  // eslint-disable-next-line no-undef
  // function handleClick() {
  //   alert('11', this)
  //   console.log('this is:', this);
  // }

  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      console.log('values', values)
      if (!err) {
        console.log('values', values)
        getListBroker({ ...queryData, pageNum: 1, pageSize: 10, channelId, name: values.name, phone: values.phone })
      }
    });
  }

  function handleReset() {
    props.form.resetFields();
    getListBroker({ pageNum: 1, pageSize: 10, channelId })
  }
  const { getFieldDecorator } = props.form;
  return (
    <>
      <Form layout="inline" onSubmit={handleSubmit}>
        <Form.Item label="姓名">
          {getFieldDecorator('name', {
          })(<Input />)}
        </Form.Item>
        <Form.Item label="电话">
          {getFieldDecorator('phone', {
          })(<Input />)}
        </Form.Item>
        <Form.Item >
          <Button type="primary" htmlType="submit" >搜索</Button>
          <Button onClick={handleReset} style={{ marginLeft: 18 }}>重置</Button>
        </Form.Item>
      </Form>
      <Table style={{ marginTop: '40px' }} dataSource={data.list} columns={columns} pagination={{ pageSize: 10, total: data.total, onChange }} rowKey="brokerList" />
    </>
  )
}
const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
function handleMenuClick(e) {
  message.info('Click on menu item.');
  console.log('click', e);
}
export default WrappedNormalLoginForm
