Global-sales/src/components/OrderProfile.jsx

import {
  WhatsAppOutlined, FileAddOutlined, MailOutlined,
  PhoneOutlined,
  UserOutlined,
  FieldNumberOutlined,
  SaveOutlined, CompassOutlined, CalendarOutlined,
  HeartTwoTone,
  MoneyCollectTwoTone,
  FolderOutlined,
  DeleteOutlined, EditOutlined,
  FormOutlined
} from '@ant-design/icons'

import { useCallback, useEffect, useState } from 'react'
import {
  Flex,Select,Tooltip,
  Button, Space, Divider, Typography,
  Input, Radio,Drawer,Checkbox,
} from 'antd'
import { InboxIcon, MailCheckIcon, MailUnreadIcon, SendPlaneFillIcon } from '@/components/Icons'
import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions, fetchSetRemindStateAction, remindStatusOptionsMapped } from "@/stores/OrderStore";
import { copy, isEmpty } from "@/utils/commons";
const OrderProfile = ({coliSN, ...props}) => {

    const orderLabelOptions = copy(OrderLabelDefaultOptions);
    orderLabelOptions.unshift({ value: 0, label: "未设置", disabled: true });

	const orderStatusOptions = copy(OrderStatusDefaultOptions);

    const [openOrder, setOpenOrder] = useState(false)
  return (
    <>
      <Flex gap='small' vertical={true} justify='space-between'>
        <Typography.Text>
          <FieldNumberOutlined className='pr-1' />
          LSS250501006
          <HeartTwoTone twoToneColor='#eb2f96' />
          <MoneyCollectTwoTone twoToneColor='#eb2f96' />
        </Typography.Text>
        <Typography.Text>
          <UserOutlined className=' pr-1' />
          Jorgina(R1)
        </Typography.Text>
        <Typography.Text>
          <CompassOutlined className=' pr-1' />
          Thailand
        </Typography.Text>
        <Typography.Text>
          <PhoneOutlined className=' pr-1' />
          <Button type='link' size={'small'} onClick={() => {}}>
            6596823833
          </Button>
        </Typography.Text>
        <Typography.Text>
          <MailOutlined className=' pr-1' />
          Jorgina@gmail.com
        </Typography.Text>
        <Typography.Text>
          <WhatsAppOutlined className='pr-1' />
          <Button type='link' size={'small'} onClick={() => {}}>
            6596826951
          </Button>
        </Typography.Text>
        <Typography.Text>
          <CalendarOutlined className='pr-1' />
          <span>出发日期：</span>2025-09-18，已下计划
        </Typography.Text>
        <Typography.Text>
          <span>特殊要求：</span>
          在华城市 桂林 对酒店和房型要求 5-star
        </Typography.Text>
        <Typography.Text>
          <span>外联备注：</span>
          泰国马来水灯节
        </Typography.Text>
        <Divider orientation="left">
            <Typography.Text strong>订单状态</Typography.Text>
          </Divider>
      <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
								key={"orderlabel"}
								size="small"
								style={{
									width: "100%",
								}}
								variant="underlined"
								onSelect={value => {
								}}
								value={0}
								options={orderLabelOptions}
							/>

              <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
								key={"orderstatus"}
								size="small"
								style={{
									width: "100%",
								}}
								variant="underlined"
								onSelect={value => {
								}}
								value={1}
								options={orderStatusOptions}
							/>

      </Flex>
              <Divider orientation="left">
            <Typography.Text strong>催信</Typography.Text>
          </Divider>
          <Checkbox.Group key='substatus' className="px-2"  options={remindStatusOptions}  />

      <Divider orientation='left'>
        <Typography.Text strong>表单信息</Typography.Text>
        <Tooltip title='添加'>
        <FileAddOutlined className='pl-1' />
        </Tooltip>
      </Divider>
      <p
        className='p-2 overflow-auto m-0 break-words whitespace-pre-wrap'
        dangerouslySetInnerHTML={{
          __html:
            'orderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detail',
        }}></p>

      <Divider orientation='left'>
        <Typography.Text strong>附加信息</Typography.Text>
        <Tooltip title='修改'>
        <EditOutlined className='pl-1' />
        </Tooltip>
      </Divider>
      <Typography.Text>
          泰国马来水灯节
        </Typography.Text>
    </>
  )
}

export default OrderProfile