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(() => {
    console.log('id', id)
    dispatch(fetchConsultationOrderDetailAction({ id: props.id }))
  }, [props.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={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>
          {GHandler.optObjectValue('petType', orderDetail?.petType || 30)}/{orderDetail?.age || '年龄未知'}/
          {GHandler.optObjectValue('petSex', orderDetail?.petSex || 1)}/{GHandler.optObjectValue('symptom', 7)}/{orderDetail?.weight || '体重未知'}
        </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>一周一次</span>
      </div>
      <div className="row">
        出现症状：<span>其他</span>
      </div>
      <div className="row">
        症状时间：<span>{`<7天`}</span>
      </div>
      <div className="row">
        症状描述：<span>{orderDetail?.supplement || '暂无症状描述'}</span>
      </div>
      <div>
        <div className="row">症状图片</div>
        {Array.isArray(orderDetail?.image) && orderDetail?.image.length ? (
          orderDetail?.image.map((_, index) => (
            <Image
              width={120}
              preview={{
                mask: <EyeOutlined />
              }}
              src={_}
            />
          ))
        ) : (
          <Image
            width={120}
            preview={{
              mask: <EyeOutlined />
            }}
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          />
        )}
      </div>
    </ViewSymptomWrapper>
  )
})

export default ViewSymptom