import React from 'react';
import { Card, List, Input } from 'antd';
import { getSysUser } from '@/service/authCenter';

const { Search } = Input;
const actStyle = {
  background: '#e6f4ff',
  borderLeft: '3px solid #1890ff',
};
const itStyle = {
  width: '100%',
  padding: '0 1em',
  display: 'flex',
  cursor: 'pointer',
};

export default (props) => {
  const { onChange } = props;

  const [loading, setLoading] = React.useState(false);
  const [list, setList] = React.useState([]);
  const [curStaff, setCurStaff] = React.useState();

  const queryData = React.useCallback((params = {}) => {
    setLoading(true);
    getSysUser({...params, dict: true}).then((res) => {
      setList(res.records || []);
      setLoading(false);
    }).catch(() => {
      setLoading(false);
    });
  }, []);

  const onSearch = (val) => {
    queryData({pageSize: 500, name: val});
  }

  const onItemClick = (it) => {
    setCurStaff(it);
    onChange(it.userId, it);
  }

  React.useEffect(() => {
    queryData({pageSize: 20});
  }, []);

  return (
    <Card title={<Search placeholder="请输入名称" onSearch={onSearch} enterButton />} loading={loading}>
      <List
        rowKey="userId"
        dataSource={list}
        renderItem={it => (
          <List.Item
            style={curStaff && curStaff.userId == it.userId ? actStyle : undefined }
            onClick={() => onItemClick(it)}
          >
            <div style={itStyle}>
              <div style={{ flex: 'none' }}>{`[${it.hxId}]`}</div>
              <div style={{ flex: 1, marginLeft: '1em' }}>{it.name}</div>
              <div style={{ flex: 1, marginLeft: '1em', textAlign: 'right' }}>{it.orgName}</div>
            </div>                  
          </List.Item>
        )}
      />
    </Card>
  )
}
