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

import { createContext, useEffect, useState } from 'react'
import { ReloadOutlined, ReadOutlined, RightOutlined, LeftOutlined, SearchOutlined, MailOutlined } from '@ant-design/icons'
import { Button, Modal, Form, Input, Checkbox, Select, Radio, DatePicker, Divider, Typography } from 'antd'
import dayjs from 'dayjs'
import { getEmailDirAction, queryHTOrderListAction } from '@/actions/EmailActions'
import { isEmpty, objectMapper, pick } from '@/utils/commons'
import useConversationStore from '@/stores/ConversationStore'

const yearsArray = Array.from({ length: new Date().getFullYear() - 2004 + 1 }, (_, i) => ({ key: 2004 + i, value: 2004 + i, label: 2004 + i }))

const MailOrderSearchModal = ({ ...props }) => {
  const [currentMailboxOPI] = useConversationStore((state) => [state.currentMailboxOPI])
  const [addMailboxNestedDirs, updateMailboxNestedDirs, setMailboxActiveNode] = useConversationStore((state) => [state.addMailboxNestedDirs, state.updateMailboxNestedDirs, state.setMailboxActiveNode])

  const [open, setOpen] = useState(false)
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const [formValues, setFormValues] = useState()
  const onSubmitSearchMailOrder = async (values) => {
    console.log('Received values of form: ', values)
    setFormValues(values)
    // setOpen(false)
    setLoading(true)
    const valuesToSub = objectMapper(values, {
      year: { key: 'year', transform: (val) => (val ? dayjs(val).year() : '') },
      important: { key: 'important', transform: (val) => (val || '-1') },
      by_success: { key: 'by_success', transform: (val) => (val ? '1' : '0') },
      if_want_book: { key: 'if_want_book', transform: (val) => (val ? '1' : '0') },
      if_thinking: { key: 'if_thinking', transform: (val) => (val ? '1' : '0') },
      by_start_date: { key: 'by_start_date', transform: (val) => (val ? '1' : '0') },
      coli_id: { key: 'coli_id', transform: (val) => (val ? val : '') },
      is_biz: { key: 'sourcetype', transform: (val) => (val ? '227002' : '227001') },
    })
    let result;
    if (isEmpty(valuesToSub.coli_id)) {
      const { coli_id, sourcetype, ...mailboxParams} = valuesToSub;
      result = await getEmailDirAction({ ...mailboxParams, opi_sn: currentMailboxOPI }, false)
      updateMailboxNestedDirs(result[`${currentMailboxOPI}`])
    } else {
      const htOrderParams = pick(valuesToSub, ['coli_id', 'sourcetype',])
      result = await queryHTOrderListAction(htOrderParams)
      const addToTree = {
        key: 'search-orders',
        title: '搜索结果',
        iconIndex: 'search',
        _raw: { COLI_SN: 0, IsTrue: 0 },
        children: result.map((o) => ({ key: `search-${o.COLI_SN}`, title: `${o.COLI_ID}`, iconIndex: 13, parent: 'search-orders', parentTitle: '搜索结果', parentIconIndex: 'search', _raw: { ...o, VKey: o.COLI_SN, VName: o.COLI_ID, VParent: 'search-orders', IsTrue: 0, ApplyDate: '', OrderSourceType: htOrderParams.sourcetype, parent: 'search-orders' }, })),
      }
      addMailboxNestedDirs([addToTree]);
      setMailboxActiveNode(addToTree);
    }
    setLoading(false)
    setOpen(false)
  }
  return (
    <>
      <Button key={'bound'} onClick={() => setOpen(true)} size='small' icon={<SearchOutlined className='' />}>
        查找
      </Button>
      <Modal
        width={window.innerWidth < 700 ? '95%' : 960}
        title='查找邮件' //mask={false}
        open={open}
        cancelText='关闭'
        okText='查找'
        confirmLoading={loading}
        okButtonProps={{ autoFocus: true, htmlType: 'submit' }}
        onCancel={() => setOpen(false)}
        // footer={null}
        destroyOnHidden
        modalRender={(dom) => (
          <Form
            layout='inline'
            size='small'
            form={form}
            name='searchmailorder_form_in_modal'
            initialValues={{ year: dayjs(), important: '-1' }}
            clearOnDestroy
            onFinish={(values) => onSubmitSearchMailOrder(values)}
            className='[&_.ant-form-item]:m-2'>
            {dom}
          </Form>
        )}>
        <Form.Item name='year' label='年份'>
          <DatePicker picker='year' />
        </Form.Item>
        <Form.Item name='important' label='重要程度'>
          <Radio.Group
            options={[
              { key: '-1', value: '-1', label: 'All' },
              { key: '240001', value: '240001', label: '普通' },
              { key: '240002', value: '240002', label: '较重要' },
              { key: '240003', value: '240003', label: '很重要' },
            ]}
            optionType='button'
          />
        </Form.Item>
        <div className='flex'>
          <Form.Item name='by_success' className='' valuePropName='checked'>
            <Checkbox>成行订单</Checkbox>
          </Form.Item>
          <Form.Item name='if_want_book' className='' valuePropName='checked'>
            <Checkbox>要预定</Checkbox>
          </Form.Item>
          <Form.Item name='if_thinking' className='' valuePropName='checked'>
            <Checkbox>犹豫中</Checkbox>
          </Form.Item>
        </div>
        <Form.Item name='by_start_date' className='' valuePropName='checked'>
          <Checkbox>按出发日期</Checkbox>
        </Form.Item>
        <div className='text-end'>
          <Button type='primary' htmlType='submit' loading={loading}>
            查找
          </Button>
        </div>

        <Divider className='my-2' />
        <Typography.Title level={5}>查找订单</Typography.Title>
        <Form.Item name='coli_id' label='订单号' className=''>
          <Input />
        </Form.Item>
        <Form.Item name='is_biz' className='' valuePropName='checked'>
          <Checkbox>商务订单</Checkbox>
        </Form.Item>
      </Modal>
    </>
  )
}
export default MailOrderSearchModal