Global-sales/src/views/Conversations/Online/Components/EmailListDrawer.jsx

import { createContext, useEffect, useState, useRef, useMemo } from 'react'
import { App, Button, Card, Empty, Flex, Select, Spin, Typography, Divider, Modal, List, Row, Col, Tag, Drawer, Input, Tooltip } from 'antd'
import { CloseOutlined, DownloadOutlined } from '@ant-design/icons';
import dayjs from 'dayjs'
import { InboxIcon, SendPlaneFillIcon, ExpandIcon } from '@/components/Icons'
import EmailDetailInline from './EmailDetailInline'
import { debounce, isEmpty } from '@/utils/commons'

const EmailListDrawer = ({ showExpandBtn=true, title, list: otherEmailList, currentConversationID, opi_sn, oid, emailItem: clickItem, ...props }) => {
  const [open, setOpen] = useState(false)
  const [selectedEmail, setSelectedEmail] = useState({})
  const searchInputRef = useRef(null)
  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    setOpen(false);
    setDataSource(otherEmailList)
    // setSelectedEmail({ MAI_SN: -1000 });

    return () => {}
  }, [otherEmailList])

  const onClearSearch = () => {
    setDataSource(otherEmailList)
  }
  const handleSearch = (value) => {
    if (isEmpty(value)) onClearSearch()
    const res = otherEmailList.filter((ele) => `${ele.MAI_Subject}${ele.SenderReceiver}`.toLowerCase().includes(value.toLowerCase()))
    setDataSource(res)
  }

  const onClickEmailItem = (emailItem) => {
    const emailMsg = {
      conversationid: currentConversationID,
      order_opi: opi_sn,
      coli_sn: oid,
      id: emailItem.MAI_SN,
      MAI_SN: emailItem.MAI_SN,
      msgOrigin: {
        from: '',
        to: '',
        id: emailItem.MAI_SN,
        email: { mai_sn: emailItem.MAI_SN, subject: emailItem.MAI_Subject, id: emailItem.MAI_SN },
      },
    }
    setSelectedEmail(emailMsg)
  };

  const [pageCurrent, setPageCurrent] = useState(1);
  const onChangePagination = (page, size) => {
    setPageCurrent(page)
  }

  useEffect(() => {
    if (!isEmpty(clickItem)) {
      onClickEmailItem(clickItem)
      setOpen(true);
      const itemIndex = dataSource.findIndex((ele) => ele.MAI_SN === clickItem.MAI_SN);
      const page = Math.ceil((itemIndex+1) / 8) || 1;
      setPageCurrent(page);
    }

    return () => {}
  }, [clickItem]);

  return (
    <>
      {showExpandBtn ? <Button
        icon={<ExpandIcon />}
        type={'primary'}
        className='ml-2'
        ghost
        size='small'
        onClick={() => {
          setOpen(true)
        }}
      /> : null}
      <Drawer
        zIndex={3}
        mask={false}
        width={1000}
        styles={{ header: {} }}
        title={
          <>
            <Button icon={<CloseOutlined />} onClick={() => setOpen(false)} type='text' size='small' className='text-gray-500' />
            <b>{title || '邮件列表'}</b>
            <Input.Search
              className=''
              ref={searchInputRef}
              allowClear
              onClear={onClearSearch}
              onPressEnter={(e) => {
                handleSearch(e.target.value)
                return false
              }}
              onSearch={(v, e, { source }) => handleSearch(v)}
              placeholder={`输入: 标题/发件人, 回车搜索`}
            />
            <List
              dataSource={dataSource}
              className=''
              pagination={{
                pageSize: 8, current: pageCurrent, onChange: onChangePagination,
                // showLessItems: true,
                showSizeChanger: false,
                size: 'small',
              }}
              renderItem={(emailItem) => (
                <List.Item
                  className={`hover:bg-stone-50 cursor-pointer !py-1 ${selectedEmail.MAI_SN === emailItem.MAI_SN ? 'bg-blue-100 font-bold ' : ''}`}
                  onClick={() => onClickEmailItem(emailItem)}>
                  <Flex vertical={false} wrap={false} className='w-full'>
                    <div className='flex-auto ml-auto min-w-40 line-clamp-2'>
                      {emailItem.Direction === '收' ? <InboxIcon className='text-indigo-500' /> : <SendPlaneFillIcon className='text-primary' />}
                      {/* <Tooltip title={emailItem.MAI_Subject}> */}
                      <Typography.Text>{emailItem.MAI_Subject}</Typography.Text>
                      {/* </Tooltip> */}
                    </div>
                    <div className='ml-1 max-w-40'>
                      <Typography.Text ellipsis={{ tooltip: emailItem.SenderReceiver }}>{emailItem.SenderReceiver.replaceAll('"', '')}</Typography.Text>
                    </div>
                    <div className='ml-1 max-w-20'>
                      <Typography.Text ellipsis={{ tooltip: emailItem.MAI_SendDate }}>{dayjs(emailItem.MAI_SendDate).format('MM-DD HH:mm')}</Typography.Text>
                    </div>
                  </Flex>
                </List.Item>
              )}
            />
          </>
        }
        classNames={{ header: '!py-1 !px-2 [&_.ant-drawer-title]:font-normal [&_.ant-list-pagination]:m-0', body: '!p-1 [&_.ant-list-pagination]:ms-1' }}
        placement='right'
        closeIcon={null}
        onClose={() => {
          setOpen(false)
        }}
        open={open}>
        <EmailDetailInline {...{ mailID: selectedEmail.MAI_SN, emailMsg: selectedEmail }} />
      </Drawer>
    </>
  )
}
export default EmailListDrawer