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

import { useState } from 'react'
import { SearchOutlined } from '@ant-design/icons'
import { Button, Modal, Form, Input, Checkbox, Radio, DatePicker, Divider, Typography, Flex } 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 MailOrderSearchModal = ({ ...props }) => {
  const [currentMailboxOPI] = useConversationStore((state) => [state.currentMailboxOPI])
  const [updateCurrentMailboxNestedDirs, setMailboxActiveNode] = useConversationStore((state) => [state.updateCurrentMailboxNestedDirs, state.setMailboxActiveNode])

  const [open, setOpen] = useState(false)
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)

  const onSubmitSearchMailOrder = async (values) => {
    // console.log('Received values of form: ', values)
    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)
      updateCurrentMailboxNestedDirs(result[`${currentMailboxOPI}`])
      setMailboxActiveNode({expand:true, key: -1, title: '1月', iconIndex: 1, _raw: { VKey: -1, COLI_SN: 0, IsTrue: 0 }})
    } else {
      const htOrderParams = pick(valuesToSub, ['coli_id', 'sourcetype'])
      result = await queryHTOrderListAction({ ...htOrderParams, opi_sn: currentMailboxOPI })
      const addToTree = {
        expand:true,
        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' },
        })),
      }
      updateCurrentMailboxNestedDirs([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', type: 'default' }}
        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>
        )}>
        <Flex wrap gap={8}>
          <div>
            <Typography.Text strong>按订单的时间范围</Typography.Text>
            <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.Text strong>订单号精确查找</Typography.Text>
            <Form.Item name='coli_id' label='订单号' className=''>
              <Input />
            </Form.Item>
            <Form.Item name='is_biz' className='' valuePropName='checked'>
              <Checkbox>商务订单</Checkbox>
            </Form.Item>
            <div className='text-end'>
              <Button type='primary' htmlType='submit' loading={loading}>
                查找
              </Button>
            </div>

          </div>
        </Flex>
      </Modal>
    </>
  )
}
export default MailOrderSearchModal