import React, { useState, useEffect, useCallback, useRef } from 'react';
import { FormattedMessage, history, useModel } from 'umi';
import { Spin, Popover } from 'antd';
import styles from './index.less';
import cx from 'classnames';
import PageHeader from '@/sagacare_components/PageHeader';
import Search from '@/sagacare_components/Search';
import Table from '@/sagacare_components/Table';
import Empty from '../components/Empty';
import { EllipsisOutlined } from '@ant-design/icons';
import { queryUserList } from '@/services/sagacare_service/member';

export default (props) => {
  const { initialState } = useModel('@@initialState');
  const [userList, setUserList] = useState([]);
  const [total, setTotal] = useState(10);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState({
    pageNum: 1,
    pageSize: 10,
  });
  const [sorter, setSorter] = useState({
    updateDate: 'DESC', //'ASC' : 'DESC'
  });
  const [searchStr, setSearchStr] = useState('');
  const userTpeyArr = {
    1: '普通成员',
    2: '临时成员',
    3: '管理员',
  };
  const [showFilterIds, setShowFilterIds] = useState([]);

  useEffect(() => {
    var paramObj = {
      criteria: {
        param: searchStr,
        status: 5,
        companyId: initialState?.currentUser?.companyId,
      },
      page: page.pageNum,
      size: page.pageSize,
      orders: [
        {
          column: 'updateDate',
          asc: sorter.updateDate == 'DESC' ? true : false,
        },
      ],
    };
    setLoading(true);
    if (showFilterIds.length > 0) {
      paramObj.criteria = { ...paramObj.criteria, ...{ manageUserType: showFilterIds } };
    }

    queryUserList(paramObj)
      .then((res) => {
        setLoading(false);
        var uarr = res.content || [];
        var count = res.count || 0;
        setUserList(uarr);
        setTotal(count);
      })
      .catch((err) => {
        setLoading(false);
      });
  }, [searchStr, page, sorter, showFilterIds]);

  const getColumns = () => {
    return [
      {
        title: '姓名',
        dataIndex: 'name',
        width: 140,
      },
      {
        title: '类型',
        dataIndex: 'manageUserType',
        filteredValue: showFilterIds,
        single: false,
        filters: [
          { value: 1, label: '普通成员' },
          { value: 2, label: '临时成员' },
          { value: 3, label: '管理员' },
        ],
        render: function (content, item, index) {
          return <span>{userTpeyArr[content]}</span>;
        },
      },
      {
        title: '手机号',
        dataIndex: 'phone',
      },
      {
        title: '职务',
        dataIndex: 'duties',
      },

      {
        title: '作废时间',
        dataIndex: 'updateDate',
        sorter: true,
        sortered: sorter.updateDate,
      },
      {
        title: '状态',
        dataIndex: 'status',
        render: function (content, item, index) {
          return (
            <div>
              <span className={styles.circle}></span>
              <span>{content}</span>
            </div>
          );
        },
      },
    ];
  };

  return (
    <div className={styles.memberwrap}>
      <PageHeader
        title={<FormattedMessage id="menu.member.invalid" />}
        action={<Search changeSearchStr={setSearchStr} />}
      />
      <div className={styles.bottomTable}>
        <Table
          columns={getColumns()}
          rowKey="phone"
          dataSource={userList}
          loading={loading}
          page={page}
          total={total}
          pagination={!!userList.length}
          onFilterChange={(key, options) => {
            setShowFilterIds(options);
          }}
          onRowClick={(record) => {}}
          onSortChange={(col, direction) => {
            debugger;
            setSorter({ [col['dataIndex']]: direction });
          }}
          onPageChange={(p) => {
            debugger;
            setPage(p);
          }}
        />
        {!userList.length && !loading && <Empty />}
      </div>
    </div>
  );
};
