import React, { memo, useEffect, useState, useRef, ElementRef } from 'react'
import type { FC, ReactNode } from 'react'
import { Tabs, Avatar, Space, Divider, Button, Modal, Pagination, Carousel } from 'antd'
import type { TabsProps } from 'antd'
import { ConsultationOrderWrapper, ConsultationOrderItemWrapper } from './styled'
import { useAppDispatch, useAppSelector, shallowEqualApp } from '@/store'
import { updateSend_prescription_form } from '@/api'
import { Send_prescription_formType } from '@/types'
import { fetchOrderDataAction } from '@/store/modules/order'
import SendPrescription from '../../com/SendPrescription'
import ViewPrescription from '../../com/ViewPrescription'
import ViewSymptom from '../../com/ViewSymptom'

interface IProps {
  children?: ReactNode
  orderList?: string[]
}

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

const ShowOrderComHandler: FC<IProps> = (props) => {
  const { orderList } = props
  const [open, setOpenHandler] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [modalTitle, setModalTitle] = useState<string>(' ')
  const [modalFlag, setModalFlag] = useState<number>(0)

  const SendPrescriptionRef = useRef<ElementRef<typeof SendPrescription> | null>(null)

  const showModalHandler = (flag: number) => {
    console.log(flag, '按钮状态')
    setModalFlag(flag)
    setModalTitle({ 1: '查看症状', 2: '发送处方单', 3: '查看处方单' }[flag] as string)
    setOpenHandler(true)
  }

  const handleOk = async () => {
    if (modalFlag === 2) {
      const instance = SendPrescriptionRef.current as any
      await updateSend_prescription_form({
        ...instance.Send_prescription_formData,
        drugList: JSON.stringify(instance.Send_prescription_formData.drugList),
        prescriptionFile: instance.fileList.map((_: any) => _.response.message).join()
      })
    }
    console.log(SendPrescriptionRef.current, 'SendPrescription 子组件实例')
    setConfirmLoading(true)
    setTimeout(() => {
      setOpenHandler(false)
      setConfirmLoading(false)
    }, 2000)
  }

  const handleCancel = () => {
    console.log('Clicked cancel button')

    setOpenHandler(false)
  }

  return (
    <ConsultationOrderItemWrapper>
      <Modal title={modalTitle} open={open} onOk={handleOk} cancelText="关闭" okText="确认" confirmLoading={confirmLoading} onCancel={handleCancel}>
        {{ 1: <ViewSymptom />, 2: <SendPrescription ref={SendPrescriptionRef} />, 3: <ViewPrescription /> }[modalFlag]}
      </Modal>
      {orderList?.length &&
        orderList.map((_, index) => (
          <div className="orderItem " key={index}>
            <div className="topinfo flexJ">
              <div className=" flexA">
                <Avatar size="large" src={<img src={url} alt="avatar" />} />
                <div className="username">卡卡罗特</div>
                <div className="statetag flexC">图文问诊</div>
                <div className="time">2023.10.07</div>
              </div>
              <div className="stateText">待问诊</div>
            </div>
            <div className="contenttext">
              <span>就诊宠物：</span>蓝猫/2岁/女绝/育/1kg
            </div>
            <div className="contenttext">
              <span>病情描述：</span>即该不低加造年周消养明价切公没家管发七议性原提何们领从很己发战
            </div>
            <Divider />
            <div className="flexJ">
              <div className="moneytext">
                预计收入
                <span>¥26.00</span>
              </div>
              <div className="flexA">
                <Space wrap>
                  <Button type="primary" shape="round" onClick={() => showModalHandler(1)}>
                    查看症状
                  </Button>
                  <Button type="primary" shape="round" onClick={() => showModalHandler(2)}>
                    发送处方单
                  </Button>
                  <Button type="primary" shape="round" onClick={() => showModalHandler(3)}>
                    查看处方单
                  </Button>
                </Space>
              </div>
            </div>
          </div>
        ))}
    </ConsultationOrderItemWrapper>
  )
}

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

  useEffect(() => {
    // dispatch(fetchOrderDataAction())
  }, [])

  const { banners } = useAppSelector(
    (state) => ({
      banners: state.order.bannersList
    }),
    shallowEqualApp
  )

  useEffect(() => {
    if (!banners.length) return
    console.log(banners)
  }, [banners])

  const [text, setText] = useState<string[]>([])

  const items: TabsProps['items'] = [
    { key: '0', label: '全部', children: ShowOrderComHandler({ orderList: text }) },
    { key: '1', label: '待处理', children: ShowOrderComHandler({ orderList: text }) },
    { key: '2', label: '处理中', children: ShowOrderComHandler({ orderList: text }) },
    { key: '3', label: '已处理', children: ShowOrderComHandler({ orderList: text }) }
  ]

  const onChange = (key: string) => {
    setText([key, '1', '2', '', '', '', ''])
  }

  return (
    <ConsultationOrderWrapper>
      <div className="title">问诊订单</div>
      <Tabs defaultActiveKey="0" items={items} onChange={onChange} />;
      <div className="paginationBox flexD">
        <Pagination defaultCurrent={1} total={50} />
      </div>
    </ConsultationOrderWrapper>
  )
})

export default ConsultationOrder