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

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

const ViewPrescription: FC<IProps> = memo((props) => {
  const dispatch = useAppDispatch()

  const [PrescriptionDetail, setPrescriptionDetail] = useState<PrescriptionDetailType>()

  useEffect(() => {
    dispatch(fetchPrescriptionDetailAction({ id: props.id }))
  }, [props.id])

  const { PrescriptionDetailDetail } = useAppSelector(
    (state) => ({
      PrescriptionDetailDetail: state.order.PrescriptionDetailData
    }),
    shallowEqualApp
  )

  useEffect(() => {
    setPrescriptionDetail(PrescriptionDetailDetail)
  }, [PrescriptionDetailDetail])

  return (
    <ViewPrescriptionWrapper>
      <div className="title">问诊病情：</div>
      <div className="content">{PrescriptionDetail?.prescriptionForm || '暂无问诊病情'}</div>
      <div className="title">处方药：</div>
      <div className="listbox">
        {Array.isArray(PrescriptionDetail?.drugList) && PrescriptionDetail?.drugList?.length ? (
          PrescriptionDetail?.drugList?.map((_, index) => (
            <div className="itemo">
              <div className="flexJ black" key={index}>
                <div>{_.name || '药物名称'}</div>
                <div>¥{_.amount || 0}</div>
              </div>
              <div className="flexJ gray">
                <div>{_.des || '描述'}</div>
                <div>x{_.num || 0}</div>
              </div>
            </div>
          ))
        ) : (
          <div className="title">暂无处方药</div>
        )}
      </div>
      <div className="title">处方单证明：</div>
      {Array.isArray(PrescriptionDetail?.prescriptionFile) && PrescriptionDetail?.prescriptionFile.length ? (
        PrescriptionDetail.prescriptionFile.map((_) => (
          <Image
            width={120}
            height={120}
            preview={{
              mask: <EyeOutlined />
            }}
            src={GHandler.downFile(_)}
            className="marbot"
          />
        ))
      ) : typeof PrescriptionDetail?.prescriptionFile === 'string' && PrescriptionDetail.prescriptionFile.length ? (
        PrescriptionDetail.prescriptionFile.split(',').map((_) => (
          <Image
            width={120}
            height={120}
            preview={{
              mask: <EyeOutlined />
            }}
            src={GHandler.downFile(_)}
            className="marbot"
          />
        ))
      ) : (
        <div className="title">暂无处方单证明</div>
      )}

      <div className="black">总金额：¥{PrescriptionDetail?.award || 0}</div>
    </ViewPrescriptionWrapper>
  )
})

export default ViewPrescription