import hyRequest from '@/service'
import React, { memo, useEffect, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { Tabs, Avatar, Space, Divider, Button, Modal, Pagination } from 'antd'
import type { TabsProps } from 'antd'
import { ConsultationOrderWrapper, ConsultationOrderItemWrapper } from './styled'
import { useAppDispatch, useAppSelector, shallowEqualApp } from '@/store'
import { fetchOrderDataAction } from '@/store/modules/order'

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 showModalHandler = (flag: number) => {
    console.log(flag, '按钮状态')
    setOpenHandler(true)
  }

  const handleOk = () => {
    setConfirmLoading(true)
    setTimeout(() => {
      setOpenHandler(false)
      setConfirmLoading(false)
    }, 2000)
  }

  const handleCancel = () => {
    console.log('Clicked cancel button')
    setOpenHandler(false)
  }
  return (
    <ConsultationOrderItemWrapper>
      <Modal title="Title" open={open} onOk={handleOk} cancelText="关闭" okText="确认" confirmLoading={confirmLoading} onCancel={handleCancel}>
        <p>132</p>
      </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