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 } from 'antd'
import dayjs from 'dayjs'
import { getEmailDirAction } from '@/actions/EmailActions'
import { objectMapper } 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 [setMailboxNestedDirsActive, setMailboxActiveNode] = useConversationStore((state) => [state.setMailboxNestedDirsActive, 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' : '0') },
      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') },
    })
    const result = await getEmailDirAction({ ...valuesToSub, opi_sn: currentMailboxOPI }, true)
    console.log('res', result)
    setLoading(false)
    // setMailboxActiveNode({
    //   key: 1130915,
    //   parent: -1,
    //   iconIndex: 13,
    //   title: 'QYCAH250101022',
    //   parentTitle: '1月',
    //   parentIconIndex: 1,
    //   VKey: 1130915,
    //   VName: 'QYCAH250101022',
    //   VParent: -1,
    //   ImageIndex: 13,
    //   COLI_SN: 1130915,
    //   OrderSourceType: 227001,
    //   IsTrue: 0,
    //   ApplyDate: '2025-01-01T00:06:00',
    //   StartDate: '2024-12-16',
    //   IsSuccess: 0,
    //   OPI_SN: 586,
    // })
    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() }}
            clearOnDestroy
            onFinish={(values) => onSubmitSearchMailOrder(values)}
            className='[&_.ant-form-item]:m-2'>
            {dom}
          </Form>
        )}>
        <Form.Item name='year' label='年份'>
          <DatePicker picker='year' maxDate={dayjs()} />
        </Form.Item>
        <Form.Item name='important' label='重要程度'>
          <Radio.Group
            options={[
              { 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>
        {/* <Divider className='my-2' /> */}
        <Form.Item name='order' label='订单号' className=''>
          <Input />
        </Form.Item>
      </Modal>
    </>
  )
}
export default MailOrderSearchModal