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

import request from '../../../utils/request';
import apis from '../../../services/apis';
import Styles from './style.less'

function costomerDrift() {
  // 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 })
  }

  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) => <><sapn>{ record.gender === '1' ? '男' : record.gender === '2' ? '女' : '未知' }</sapn></>,
    },
  ];

  return (
    // eslint-disable-next-line max-len
    <Table dataSource={dataSources.records} columns={columns} pagination={{ total: dataSources.total, onChange }} />
  )
}

export default costomerDrift
