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

type Props = {
  closeFu: () => void
  succFu: (num: number) => void
}

function D4auto({ closeFu, succFu }: Props) {
  const [value, setValue] = useState<number | null>(null)

  // 点击提交
  const btnOk = useCallback(() => {
    if (!value) return MessageFu.warning('请输入正整数分库号最小值')
    succFu(value)
    closeFu()
  }, [closeFu, succFu, value])

  return (
    <Modal
      wrapClassName={styles.D4auto}
      destroyOnClose
      open={true}
      title='批量填写分库号'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='D4Amain'>
        <div className='D4Amain1'>
          <span> * </span>分库号最小值：
          <InputNumber
            style={{ width: 200 }}
            min={1}
            max={99999999}
            precision={0}
            value={value}
            onChange={e => setValue(e)}
          />
        </div>

        <div className='D4Amain2'>提交后，将为藏品自动从小到大分配分库号，并跳过被占用的分库号</div>

        <div className='D4AmainBtn'>
          <Button type='primary' disabled={!value} onClick={btnOk}>
            提交
          </Button>
          &emsp;
          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        </div>
      </div>
    </Modal>
  )
}

const MemoD4auto = React.memo(D4auto)

export default MemoD4auto
