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, message } 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'
import mAvatar from '@/assets/img/mAvatar.png'

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

const url = mAvatar

message.config({
  top: 1400
})

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

  const SendPrescriptionRef = useRef<SendPrescriptionPropsType | null>(null)

  const [messageApi, contextHolder] = message.useMessage()

  const warning = (content: string) => messageApi.open({ type: 'warning', content: content })

  const success = (content: string) => messageApi.open({ type: 'success', content: content })

  const showModalHandler = (flag: number, orderId: string | number) => {
    setOrderId(orderId)

    setModalFlag(flag)

    setModalTitle({ 1: '查看症状', 2: '发送处方单', 3: '查看处方单' }[flag] as string)

    setOpenHandler(true)
  }

  const closeSendPrescriptionHandler = () => {
    setTimeout(() => {
      setOpenHandler(false)

      setConfirmLoading(false)
    }, 1300)
  }

  const handleOk = async () => {
    if (modalFlag === 2) {
      setConfirmLoading(true)

      const instance = SendPrescriptionRef.current

      const ret = await updateSend_prescription_form({
        ...instance?.Send_prescription_formData,
        id: orderId,
        prescriptionFile: instance?.fileList.map((_: any) => _.response.message).join()
      })

      if ([200].includes(ret.code)) {
        success('发送成功')

        closeSendPrescriptionHandler()
      }

      if ([500, 401, 403].includes(ret.code)) {
        warning(ret.message)

        closeSendPrescriptionHandler()
      }

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

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

      dispatch(fetchOrderDataAction({ pageNo: 1 }))

      // console.log(SendPrescriptionRef.current, 'SendPrescription 子组件实例')

      return
    }

    setOpenHandler(false)

    setConfirmLoading(false)
  }

  const handleCancel = () => {
    setOpenHandler(false)
  }

  return (
    <ConsultationOrderItemWrapper>
      {contextHolder}
      <Modal title={modalTitle} open={open} onOk={handleOk} cancelText="关闭" okText="确认" confirmLoading={confirmLoading} onCancel={handleCancel}>
        {{ 1: <ViewSymptom id={orderId} />, 2: <SendPrescription ref={SendPrescriptionRef} id={orderId} />, 3: <ViewPrescription id={orderId} /> }[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={GHandler.downFile(_.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>
              {_?.petName}/{_?.petClass}/{_?.age || '年龄未知'}/{GHandler.optObjectValue('petSex', _?.petSex || 1)}/
              {GHandler.optObjectValue('isSterilization', _?.isSterilization || 0)}/{_?.weight ? _?.weight + 'kg' : '体重未知'}
            </div>
            <div className="contenttext">
              <span>病情描述：</span>
              {_.supplement || '暂无病情描述'}
            </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, _.id)}>
                    查看症状
                  </Button>
                  {[30, '30'].includes(_.orderState as string | number) && [null, undefined, ''].includes(_?.orderId) && (
                    <Button type="primary" shape="round" onClick={() => showModalHandler(2, _.id)}>
                      发送处方单
                    </Button>
                  )}

                  {[20, '20'].includes(_.orderState as string | number) && (
                    <Button type="primary" shape="round" onClick={() => warning('请到app内进行接诊')}>
                      接诊
                    </Button>
                  )}

                  {[30, '30', 40, '40'].includes(_.orderState as string | number) && (
                    <Button type="primary" shape="round" onClick={() => showModalHandler(3, _.id)}>
                      查看处方单
                    </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)

  const [orderTotal, setOrderTotal] = useState<number>(0)

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

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

  useEffect(() => {
    // console.log(ConsultationOrder, '问诊订单列表数据11')
    if (!ConsultationOrder.length) return
    // console.log(ConsultationOrder, '问诊订单列表数据')
    setCOrderList(ConsultationOrder)
    setOrderTotal(ConsultationOrderTotal)
  }, [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) => {
    setCOrderList([])

    setOrderTotal(0)

    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={orderTotal} onChange={(e) => changeOrderListHandler(e)} />
      </div>
    </ConsultationOrderWrapper>
  )
})

export default ConsultationOrder