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, Divider, Typography, Skeleton, Checkbox } from 'antd'
import { useOrderStore, fetchSetRemindStateAction, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions } from '@/stores/OrderStore'
import { copy, isEmpty } from '@/utils/commons'
import { useShallow } from 'zustand/react/shallow'
import useConversationStore from '@/stores/ConversationStore'
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,
  ])

  const currentOrder = useConversationStore(useShallow(state => state.currentConversation?.coli_sn || ""))
  const orderId = coliSN || currentOrder

  const [orderRemindState, setOrderRemindState] = useState(orderDetail.remindstate)
  useEffect(() => {
    if (orderId) {
      setLoading(true)
      fetchOrderDetail(orderId)
        .finally(() => setLoading(false))
        .catch((reason) => {
          notification.error({
            message: '查询出错',
            description: reason.message,
            placement: 'top',
            duration: 60,
          })
        })
    }
    return () => {}
  }, [orderId])

  const handleSetRemindState = async (checkedValue) => {
    const state = checkedValue.filter((v) => v !== orderRemindState)
    const oldState = orderRemindState

    try {
      if (isEmpty(state)) {
        setOrderRemindState(null)
      } else {
        setOrderRemindState(state[0])
      }
      await fetchSetRemindStateAction({ coli_sn: coliSN, remindstate: state })
      message.success('设置成功')
    } catch (error) {
      notification.warning({ message: '设置失败', description: error.message, placement: 'top', duration: 60 })
      setOrderRemindState(oldState)
    }
  }

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

  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' className='p-2'>
          <Typography.Text>
            <FieldNumberOutlined className='pr-1' />
            {orderDetail.order_no}
          </Typography.Text>
          <Typography.Text>
            <UserOutlined className=' pr-1' />
            {getCustomerName()}
          </Typography.Text>
          <Typography.Text>
            <CompassOutlined className=' pr-1' />
            Thailand
          </Typography.Text>
          <Typography.Text>
            <PhoneOutlined className=' pr-1' />
            {customerDetail.phone}
          </Typography.Text>
          <Typography.Text>
            <MailOutlined className='pr-1' />
            {customerDetail.email}
          </Typography.Text>
          <Typography.Link href={`/order/chat/${coliSN}`}>
            <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) => {
              setOrderPropValue(coliSN, 'orderlabel', value)
                .then(() => {
                  message.success('设置成功')
                })
                .catch((reason) => {
                  notification.error({
                    message: '设置出错',
                    description: reason.message,
                    placement: 'top',
                    duration: 60,
                  })
                })
            }}
            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) => {
              setOrderPropValue(coliSN, 'orderstatus', value)
                .then(() => {
                  message.success('设置成功')
                })
                .catch((reason) => {
                  notification.error({
                    message: '设置出错',
                    description: reason.message,
                    placement: 'top',
                    duration: 60,
                  })
                })
            }}
            value={orderDetail.states}
            options={orderStatusOptions}
          />
        </Flex>

        <Divider orientation='left'>
          <Typography.Text strong>催信</Typography.Text>
        </Divider>
        <Checkbox.Group key='substatus' className='px-2' value={[orderRemindState]} options={remindStatusOptions} onChange={handleSetRemindState} />

        <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