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

export type D6vatchValueType = {
  key: 'txt1' | 'txt2' | 'date' | 'txt3' | 'txt4' | 'beiZhu'
  value: string
}
type Props = {
  type: '1' | '2' | '3'
  closeFu: () => void
  succFu: (arr: D6vatchValueType[]) => void
}

function D6batchInput({ type, closeFu, succFu }: Props) {
  const [value1, setValue1] = useState('')
  const [value2, setValue2] = useState('')
  const [value3, setValue3] = useState('')
  const [value4, setValue4] = useState('')

  const btnOk = useCallback(() => {
    const arr: D6vatchValueType[] = []
    if (value1) arr.push({ key: type === '1' ? 'txt1' : 'txt3', value: value1 })
    if (value2) arr.push({ key: type === '1' ? 'txt2' : 'txt4', value: value2 })
    if (value3) arr.push({ key: 'date', value: value3 })
    if (value4) arr.push({ key: 'beiZhu', value: value4 })

    if (arr.length === 0) return MessageFu.warning('至少输入一个内容')
    MessageFu.success('批量填写成功')
    succFu(arr)
    closeFu()
  }, [closeFu, succFu, type, value1, value2, value3, value4])
  return (
    <Modal
      wrapClassName={styles.D6batchInput}
      destroyOnClose
      open={true}
      title='批量填写'
      footer={[]}
    >
      <div className='D6mbMain'>
        <div className='D6mbRow'>
          <div className='D6mbRowll'>{type === '1' ? '退还人' : '退回者'}：</div>
          <div className='D6mbRowrr'>
            <TextArea
              placeholder='请输入'
              maxLength={200}
              showCount
              value={value1}
              onChange={e => setValue1(e.target.value.trim())}
            />
          </div>
        </div>

        <div className='D6mbRow'>
          <div className='D6mbRowll'>{type === '1' ? '点收人' : '库保员'}：</div>
          <div className='D6mbRowrr'>
            <TextArea
              placeholder='请输入'
              maxLength={200}
              showCount
              value={value2}
              onChange={e => setValue2(e.target.value.trim())}
            />
          </div>
        </div>

        <div className='D6mbRow'>
          <div className='D6mbRowll'>{type === '1' ? '退库时间' : '退库日期'}：</div>
          <div className='D6mbRowrr'>
            <DatePicker
              allowClear={true}
              value={value3 ? dayjs(value3) : null}
              onChange={e => setValue3(e ? dayjs(e).format('YYYY-MM-DD') : '')}
            />
          </div>
        </div>

        <div className='D6mbRow'>
          <div className='D6mbRowll'>备注：</div>
          <div className='D6mbRowrr'>
            <TextArea
              placeholder='请输入'
              maxLength={200}
              showCount
              value={value4}
              onChange={e => setValue4(e.target.value.trim())}
            />
          </div>
        </div>

        <div className='D6mbBtn'>
          <Button type='primary' onClick={btnOk}>
            确定
          </Button>
          &emsp;
          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        </div>
      </div>
    </Modal>
  )
}

const MemoD6batchInput = React.memo(D6batchInput)

export default MemoD6batchInput
