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'

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

const ViewPrescription: FC<IProps> = memo((props) => {
  console.log(props.id, 'id')

  const dispatch = useAppDispatch()

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

  useEffect(() => {
    console.log('first')
    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="itemo">
            <div className="flexJ black">
              <div>药品名称</div>
              <div>¥3.00</div>
            </div>
            <div className="flexJ gray">
              <div>外用，一日3次，每次10毫升</div>
              <div>x2</div>
            </div>
          </div>
        )}
      </div>
      <div className="title">处方单证明：</div>
      <Image
        width={120}
        preview={{
          mask: <EyeOutlined />
        }}
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        className="marbot"
      />
      <div className="black">总金额：¥{PrescriptionDetail?.award || 0}</div>
    </ViewPrescriptionWrapper>
  )
})

export default ViewPrescription