import React, { useCallback } from 'react'
import styles from './index.module.scss'
import { Button, Modal } from 'antd'
import { MessageFu } from '@/utils/message'

export type A2TcanType = {
  time: string
  num: null | 0 | 1
}

type Props = {
  info: A2TcanType
  closeFu: (val: 0 | 1 | null) => void
}

const arr = [
  {
    name: '不可预约',
    num: 1
  },
  {
    name: '可预约',
    num: 0
  }
]

function A2timeFlag({ info, closeFu }: Props) {
  const btnClick = useCallback(
    (val: number) => {
      if (val === info.num)
        return MessageFu.info(`当前已经是${info.num ? '' : '不'}可预约状态!`)
      closeFu(val as 0)
    },
    [closeFu, info.num]
  )

  return (
    <Modal
      wrapClassName={styles.A2timeFlag}
      open={true}
      title=''
      onCancel={() => closeFu(null)}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      {info.num !== null ? (
        <div className='A2Tmain'>
          {info.time}：&emsp;
          {arr.map(v => (
            <Button
              onClick={() => btnClick(v.num)}
              key={v.name}
              type={v.num === info.num ? 'primary' : 'default'}
            >
              {v.name}
            </Button>
          ))}
        </div>
      ) : null}
    </Modal>
  )
}

const MemoA2timeFlag = React.memo(A2timeFlag)

export default MemoA2timeFlag