Global-sales/src/components/OrderProfile.jsx

import { WhatsAppOutlined, FileAddOutlined, MailOutlined, PhoneOutlined, UserOutlined, FieldNumberOutlined, CompassOutlined, CalendarOutlined, EditOutlined, CheckOutlined } from '@ant-design/icons'

import { useEffect, useState } from 'react'
import { App, Flex, Select, Tooltip, Tabs, Button, Divider, Typography, Skeleton, Checkbox } from 'antd'
import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions } from '@/stores/OrderStore'
import { copy } from '@/utils/commons'
const OrderProfile = ({ coliSN, ...props }) => {
  const { notification, message } = App.useApp()

  const [loading, setLoading] = useState(false)
  const orderLabelOptions = copy(OrderLabelDefaultOptions)
  orderLabelOptions.unshift({ value: 0, label: '未设置', disabled: true })

  const orderStatusOptions = copy(OrderStatusDefaultOptions)
  const [orderDetail, customerDetail, fetchOrderDetail, setOrderPropValue, appendOrderComment] = useOrderStore((s) => [
    s.orderDetail,
    s.customerDetail,
    s.fetchOrderDetail,
    s.setOrderPropValue,
    s.appendOrderComment,
  ])

  useEffect(() => {
    if (coliSN) {
      setLoading(true)
      fetchOrderDetail(coliSN)
        .then((result) => {
          console.info(result)
        })
        .finally(() => setLoading(false))
        .catch((reason) => {
          notification.error({
            message: '查询出错',
            description: reason.message,
            placement: 'top',
            duration: 60,
          })
        })
    }
    return () => {}
  }, [coliSN])

  const regularText = () => {
    if (orderDetail.buytime > 0) return '(R' + orderDetail.buytime + ')'
    return ''
  }

  return (
    <>
      {/* <Tabs
        tabPosition={'right'}
        onTabClick={(key) => {
          console.info(key)
        }}
        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1)
          return {
            label: `Tab ${id}`,
            key: id,
            children: `Content of Tab ${id}`,
          }
        })}
      /> */}
      <Skeleton active loading={loading}>
        <Flex gap='small' vertical={true} justify='space-between'>
          <Typography.Text>
            <FieldNumberOutlined className='pr-1' />
            {orderDetail.order_no}
          </Typography.Text>
          <Typography.Text>
            <UserOutlined className=' pr-1' />
            {customerDetail.name + regularText()}
          </Typography.Text>
          <Typography.Text>
            <CompassOutlined className=' pr-1' />
            Thailand
          </Typography.Text>

          <Typography.Text href={'/callcenter/call/' + customerDetail.phone}>
            <PhoneOutlined className=' pr-1' />
            {customerDetail.phone}
          </Typography.Text>
          <Typography.Text>
            <MailOutlined className='pr-1' />
            {customerDetail.email}
          </Typography.Text>
          <Typography.Link
            href='#'
            onClick={() => {
              console.info('whatsapp clicked.')
            }}>
            <WhatsAppOutlined className=' pr-1' />
            {customerDetail.whatsapp_phone_number}
          </Typography.Link>
          <Typography.Text>
            <Tooltip title='出发日期'>
              <CalendarOutlined className='pr-1' />
              2025-09-18
            </Tooltip>
          </Typography.Text>
          <Typography.Text>
            <Tooltip title='计划'>
              <CheckOutlined className='pr-1' />
              已做计划
            </Tooltip>
          </Typography.Text>
        </Flex>
        <Divider orientation='left'>
          <Typography.Text strong>订单状态</Typography.Text>
        </Divider>
        <Flex gap='small' vertical={false} justify='space-between'>
          <Select
            className={`[&_.ant-select-selection-item]:text-gray-950`}
            key={'orderlabel'}
            size='small'
            style={{
              width: '100%',
            }}
            variant='underlined'
            onSelect={(value) => {}}
            value={orderDetail.tags}
            options={orderLabelOptions}
          />
          <Select
            className={`[&_.ant-select-selection-item]:text-gray-950`}
            key={'orderstatus'}
            size='small'
            style={{
              width: '100%',
            }}
            variant='underlined'
            onSelect={(value) => {}}
            value={orderDetail.states}
            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_detail }}></p>

        <Divider orientation='left'>
          <Typography.Text strong>特殊要求</Typography.Text>
        </Divider>
        <Typography.Text>{orderDetail.customer_request}</Typography.Text>
        <Divider orientation='left'>
          <Typography.Text strong>外联备注</Typography.Text>
          <Tooltip title='修改'>
            <EditOutlined className='pl-1' />
          </Tooltip>
        </Divider>
        <Typography.Text>{orderDetail.wl_memo}</Typography.Text>

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

export default OrderProfile