import React, { memo, useEffect, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { Avatar, Image } from 'antd'
import { EyeOutlined } from '@ant-design/icons'
import { useAppDispatch, useAppSelector, shallowEqualApp } from '@/store'
import order, { fetchConsultationOrderDetailAction } from '@/store/modules/order'
import { ViewSymptomWrapper } from '../style'
import GHandler from '@/utils/methods'
import type { ConsultationOrderDetailType } from '@/types'

interface IProps {
  children?: ReactNode
  id: string | number
}

const url = 'https://p1.ssl.qhmsg.com/dr/270_500_/t010c2d50907f0a7b9c.png'

const ViewSymptom: FC<IProps> = memo((props) => {
  const { id } = props

  const dispatch = useAppDispatch()

  const [orderDetail, setOrderDetail] = useState<ConsultationOrderDetailType>()

  useEffect(() => {
    dispatch(fetchConsultationOrderDetailAction({ id: id }))
  }, [id])

  const { COrderDetail } = useAppSelector(
    (state) => ({
      COrderDetail: state.order.ConsultationOrderDetailData
    }),
    shallowEqualApp
  )

  useEffect(() => {
    console.log(COrderDetail, '请求回来的订单详情数据')
    setOrderDetail(COrderDetail as ConsultationOrderDetailType)
  }, [COrderDetail])

  return (
    <ViewSymptomWrapper>
      <div className="flexJ">
        <div className="flexA top">
          <Avatar size="large" src={<img src={GHandler.downFile(orderDetail?.user?.avatar)} alt="avatar" />} />
          <div className="username">{orderDetail?.user?.nickname}</div>
          <div className="tag">{GHandler.optObjectValue('consultationWay', orderDetail?.consultationWay || 10)}</div>
        </div>
        <div className="money">预计收入：¥{orderDetail?.award || 0}</div>
      </div>
      <div className="row">
        就诊宠物：
        <span>
          {orderDetail?.petClass}/{orderDetail?.age || '年龄未知'}/{GHandler.optObjectValue('petSex', orderDetail?.petSex as any)}/
          {GHandler.optObjectValue('isSterilization', orderDetail?.isSterilization as any)}/{orderDetail?.weight ? orderDetail?.weight + 'kg' : '体重未知'}
        </span>
      </div>
      <div className="row">
        免疫情况：<span>{GHandler.optObjectValue('immuneStatus', orderDetail?.immuneStatus || 4)}</span>
      </div>
      <div className="row">
        喂养方式：
        <span>
          <span>{GHandler.optObjectValue('feedType', orderDetail?.feedType || 4)}</span>
        </span>
      </div>
      <div className="row">
        洗澡频次：<span>{GHandler.optObjectValue('batheFrequency', orderDetail?.batheFrequency || 2)}</span>
      </div>
      <div className="row">
        出现症状：
        {orderDetail?.symptom?.length &&
          orderDetail?.symptom?.split(',').map((_, index) => (
            <span>
              {GHandler.optObjectValue('symptom', _)}
              {index !== (orderDetail.symptom as string).split(',').length - 1 ? '，' : ''}
            </span>
          ))}
      </div>
      <div className="row">
        症状时间：<span>{GHandler.optObjectValue('timeFrame', orderDetail?.timeFrame || 1)}</span>
      </div>
      <div className="row">
        症状描述：<span>{orderDetail?.supplement || '暂无症状描述'}</span>
      </div>
      <div>
        <div className="row">症状图片</div>
        {orderDetail?.image ? (
          orderDetail?.image.split(',').map((_, index) => (
            <Image
              width={120}
              height={120}
              preview={{
                mask: <EyeOutlined />
              }}
              src={GHandler.downFile(_)}
            />
          ))
        ) : (
          <div className="row">暂无症状图片</div>
        )}
      </div>
    </ViewSymptomWrapper>
  )
})

export default ViewSymptom