import React, { memo, useEffect, useState, useRef, ElementRef } from 'react'
import type { FC, ReactNode } from 'react'
import { Tabs, Avatar, Space, Divider, Button, Modal, Pagination, Carousel, Empty } 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, SendPrescriptionPropsType, DrugList, ConsultationOrderListItemType } from '@/types'
import { fetchOrderDataAction } from '@/store/modules/order'
import SendPrescription from '../../com/SendPrescription'
import ViewPrescription from '../../com/ViewPrescription'
import ViewSymptom from '../../com/ViewSymptom'
import GHandler from '@/utils/methods'

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

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<SendPrescriptionPropsType | 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

      await updateSend_prescription_form({
        ...instance?.Send_prescription_formData,
        drugList: JSON.stringify(instance?.Send_prescription_formData.drugList),
        prescriptionFile: instance?.fileList.map((_: any) => _.response.message).join()
      })

      typeof instance?.setSend_prescription_formTypeData === 'function' &&
        instance?.setSend_prescription_formTypeData({
          drugList: [{ amount: '', des: '', name: '', num: '' }],
          prescriptionForm: '',
          prescriptionAmount: 0
        })

      typeof instance?.setFileList === 'function' && instance.setFileList([])
    }

    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 id={1} />, 2: <SendPrescription ref={SendPrescriptionRef} />, 3: <ViewPrescription id={1} /> }[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={_.user?.avatar || url} alt="avatar" />} />
                <div className="username">{_.user?.nickname || '暂无用户名'}</div>
                <div className="statetag flexC">{GHandler.optObjectValue('consultationWay', _.consultationWay || 10)}</div>
                <div className="time">{_.time}</div>
              </div>
              <div className="stateText">{GHandler.optObjectValue('orderState', _.orderState || 1000)}</div>
            </div>
            <div className="contenttext">
              <span>就诊宠物：</span>
              {GHandler.optObjectValue('petType', _?.petType || 30)}/{_?.age || '年龄未知'}/{GHandler.optObjectValue('petSex', _?.petSex || 1)}/
              {GHandler.optObjectValue('symptom', 7)}/{_?.weight || '体重未知'}
            </div>
            <div className="contenttext">
              <span>病情描述：</span>
              {_.prescriptionForm || '暂无病情描述'}
            </div>
            <Divider />
            <div className="flexJ">
              <div className="moneytext">
                预计收入
                <span>¥{_.award || 0}</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>
        ))
      ) : (
        <div className="flexC" style={{ width: '100%', marginTop: '60px' }}>
          <Empty description={<span style={{ color: '#666' }}>暂无订单数据</span>} />
        </div>
      )}
    </ConsultationOrderItemWrapper>
  )
}

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

  const [pageNo, setPageNo] = useState<number>(1)

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

  const { ConsultationOrder } = useAppSelector(
    (state) => ({
      ConsultationOrder: state.order.ConsultationOrderList
    }),
    shallowEqualApp
  )

  useEffect(() => {
    if (!ConsultationOrder.length) return
    console.log(ConsultationOrder, '问诊订单列表数据')
    setCOrderList(ConsultationOrder)
  }, [ConsultationOrder])

  const [COrderList, setCOrderList] = useState<ConsultationOrderListItemType[]>([])

  const items: TabsProps['items'] = [
    { key: '', label: '全部', children: ShowOrderComHandler({ orderList: COrderList }) },
    { key: '20', label: '待问诊', children: ShowOrderComHandler({ orderList: COrderList }) },
    { key: '30', label: '问诊中', children: ShowOrderComHandler({ orderList: COrderList }) },
    { key: '40', label: '问诊结束', children: ShowOrderComHandler({ orderList: COrderList }) },
    { key: '50', label: '已取消', children: ShowOrderComHandler({ orderList: COrderList }) }
  ]

  const onChange = (key: string) => dispatch(fetchOrderDataAction({ pageNo: 1, orderState: key }))

  const changeOrderListHandler = (e: number) => dispatch(fetchOrderDataAction({ pageNo: e }))

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

export default ConsultationOrder