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

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 dataSource = [
//   {
//     key: '1',
//     img: 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg',
//     name: '123',
//     age: 32,
//     address: '西湖区湖底公园1号',
//   },
//   {
//     key: '2',
//     img: '',
//     age: 42,
//     address: '西湖区湖底公园1号',
//   },
// ];

const columns = [
  {
    title: '头像',
    // dataIndex: 'img',
    // key: 'img',
    align: 'center',

    render: (text, record) => <Avatar shape="square" src={record.picture} size={64} icon="user" />,
  },
  {
    title: '用户姓名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    render: (text, record) => <div>{record.name}</div>,
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center',
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    align: 'center',
    render: (text, record) => <span>{record.sex === 1 ? '男' : record.sex === 2 ? '女' : '未知'}</span>
  },
  {
    title: '意向项目',
    dataIndex: 'intention',
    key: 'intention',
    align: 'center',
  },
  {
    title: '推荐时间',
    dataIndex: 'createDate',
    key: 'createDate',
    align: 'center',
    render: (_, record) => <><span>{record.createDate && moment(record.createDate).format('YYYY-MM-DD HH:mm:ss')}</span></>,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    // eslint-disable-next-line consistent-return
    render: (text, records) => {
      //    if (records.status === 1) { if(records.reportRecommendStatus === 0) {return '未审核'} if(records.reportRecommendStatus === 1) {return '报备'} if(records.reportRecommendStatus === 2) {return '推荐'}  }
      // if (records.status === 2) { return '到访' }
      // if (records.status === 3) { return '认购' }
      // if (records.status === 4) { return '签约' }
      // if (records.verifyStatus === 1) { return '待审核' }
      // if (records.verifyStatus === 2) { return '审核同意' }
      // if (records.verifyStatus === 3) { return '签约' }
      // if (records.status === 1) { return '报备' }
      // if (records.status === 2) { return '推荐' }
      // if (records.status === 3) { return '认购' }
      // if (records.status === 4) { return '签约' }
      // if (records.verifyStatus === 1) { return '待审核' }
      // if (records.verifyStatus === 2) { return '审核同意' }
      // if (records.verifyStatus === 3) { return '签约' }
      if (records.status === 1) {
        if (records.verifyStatus === 0) { return '待审核' }
        if (records.verifyStatus === 1) { return '报备' }
        // if (records.reportRecommendStatus === 1) { return '报备' }
        // if (records.reportRecommendStatus === 2) { return '推荐' }}
        if (records.verifyStatus === 2) { return '审核驳回' }
       }
      if (records.status === 2) { return '到访' }
      if (records.status === 3) { return '认购' }
      if (records.status === 4) { return '签约' }
    }
  },
];

const header = props => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState({})
  //   const [page, changePage] = useState({})
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getListRecommend({ pageNumber: 1, pageSize: 10 })
  }, [])

  // function getListRecommend(params) {
  //   request({
  //     url: `api/admin/customer/recommend/${props.location.query.id}`,
  //     method: 'GET',
  //     params: { ...params },
  // // eslint-disable-next-line no-shadow
  // }).then(data => {
  //     console.log(data)
  //     setData(data)
  // })
  // }

  function getListRecommend(params) {
    request({ ...apis.channelList.getListRecommend, urlData: { id: props.location.query.id }, params: { ...params } }).then((data) => {
      setData(data)
    }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
    })
  }


  // 分页
  function onChange(pageNum) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    getListRecommend({ pageNumber: pageNum, pageSize: 10 })
  }
  return (
    <>
      <Table dataSource={data.records} rowKey="recommendClist" columns={columns} pagination={{ pageSize: 10, total: data.total, onChange }} />
    </>
  )
}

function handleMenuClick(e) {
  message.info('Click on menu item.');
  console.log('click', e);
}
export default header
