Global-sales/src/views/orders/components/MailBox.jsx

import { useCallback, useEffect, useState } from 'react'
import {
  ReloadOutlined,
  ReadOutlined, CheckSquareOutlined
} from '@ant-design/icons'
import {
  Flex,
  Button, Tooltip,
  List,Radio,Typography,Divider,Drawer,
  Dropdown, Input, Checkbox
} from 'antd'

const MailBox = (props) => {
    const [openOrder, setOpenOrder] = useState(false)
  return (
    <>
      <div className='bg-white h-auto px-1 flex gap-1 items-center'>
        <Dropdown.Button
          className='w-auto'
          placement='bottom'
          arrow
          type={'primary'}
          menu={{
            items: [
              {
                key: '1',
                label: '一催模板一，询问客人是否收到报价信',
              },
              {
                key: '2',
                label: '一催模板二，询问客人是否修改行程',
              },
              {
                type: 'divider',
              },
              {
                key: '3',
                label: '二催模板一，询问客人对行程的看法',
              },
              {
                key: '4',
                label: '二催模板二，表达服务的意识',
              },
              {
                type: 'divider',
              },
              {
                key: '5',
                label: '三催模板三，强调价格有效期',
              },
            ],
            onClick: (item) => {
              console.info('menu', item)
            },
          }}
          onClick={() => {
            console.info('新邮件')
          }}>
          新邮件
        </Dropdown.Button>
        <Flex wrap gap='middle' justify={'center'} className='min-w-40'>
          <Tooltip title='全选'>
            <Checkbox></Checkbox>
          </Tooltip>
          <Tooltip title='标记已读'>
            <Button shape='circle' type='text' size='small' icon={<ReadOutlined />} />
          </Tooltip>
          <Tooltip title='已处理'>
            <Button shape='circle' type='text' size='small' icon={<CheckSquareOutlined />} />
          </Tooltip>
          <Tooltip title='刷新'>
            <Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} />
          </Tooltip>
        </Flex>
        <Input.Search
          className=''
          allowClear
          onChange={(e) => {}}
          onPressEnter={(e) => {
            return false
          }}
          placeholder={`邮件主题`}
        />
        <Button onClick={() => {setOpenOrder(true)}}>高级搜索</Button>
      </div>

      <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
        <List
          // header={null}
          header={<div>{props.title}</div>}
          itemLayout='vertical'
          size='large'
          pagination={false}
          dataSource={props.dataSource}
          dataSource1={[...props.dataSource,
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: '250520-LSS250429038 团的 变更 <20>确认：Japan Fleet',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Your Thailand Private tour by Asia Highlights 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Re: Personal information',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Re: Your Future Trip with Asia Highlights',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: '回复： 回复：中华游251110-LSS250413051(AH)团计划',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Re: Greeting from Asia Highlights Alisa',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Re: Have you made any decisions about your Japan trip',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Re: Sri Lanka tour',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Re: How do you like the itinerary 3',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Re: Re: Re: Final cost',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Reference Number: LSS240628079',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Re: Personal information and Hiroshima tour for 2 people',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
            {
              key: Math.random().toString(36).substring(2, 9),
              description: 'Fran Grundman <frangrundman@rogers.com>',
              title: 'Re: Asia Travel Tips /LSS250429038',
              mailDate: '2025-05-01 19:21:00',
              orderNo: 'LSS250501006',
              country: 'Thailand',
            },
          ]}
          renderItem={(item) => (
            <List.Item
              key={item.title}
              // actions={[
              //   <a key="list-vertical-star-o">回复</a>,
              //   <a key="list-vertical-refor">转发</a>,
              // ]}
              extra={<Checkbox></Checkbox>}>
              <List.Item.Meta
                className='cursor-pointer'
                onClick={() => {console.info('item: ', item); props?.onMailClick(item.key)}}
                title={<a href={item.href} onClick={() => {console.info(''); props?.onMailClick(item.key)}}>{item.title}</a>}
                description={item.description + ' ' + item.mailDate}
              />
              {item.content}LSS250501006, Thailand
            </List.Item>
          )}
        />
      </div>

      <Drawer
        title={'高级搜索'}
        placement='right'
        getContainer={false}
        size={'large'}
        mask={true}
        maskClosable={true}
        open={openOrder}
        onClose={() => setOpenOrder(false)}>
        <Divider orientation='left'>
          <Typography.Text strong>是否重要</Typography.Text>
        </Divider>
        <Radio.Group
          options={[
            { label: '重点', value: '1' },
            { label: '次重点', value: '2' },
            { label: '一般', value: '3' },
          ]}
        />

        <Divider orientation='left'>
          <Typography.Text strong>状态</Typography.Text>
        </Divider>
        <Radio.Group
          options={[
            { label: '新订单', value: '4' },
            { label: '报价中', value: '5' },
            { label: '以后联系', value: '6' },
            { label: '等待付订金', value: '7' },
            { label: '成行', value: '8' },
            { label: '丢失', value: '9' },
            { label: '取消', value: '10' },
            { label: '未报价', value: '11' },
          ]}
        />

        <Divider orientation='left'>
          <Typography.Text strong> 催信</Typography.Text>
        </Divider>
        <Checkbox.Group
          options={[
            { label: '一催', value: 'Apple', className: 'label-1' },
            { label: '二催', value: 'Pear', className: 'label-2' },
            { label: '三催', value: 'Orange', className: 'label-3' },
            { label: '重点团', value: '2233342', className: 'label-3' },
            { label: '已发 travel advisor survey', value: '43535', className: 'label-3' },
          ]}
          defaultValue={['Apple']}
        />
      </Drawer>
    </>
  )
}

export default MailBox