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

type Props = {
  closeFu: () => void
  editFu: (val: string[], num: number) => void
  baseTime: string
  num: number
}

function C1NoTime({ baseTime, closeFu, editFu, num }: Props) {
  const baseTimeArr = baseTime
    ? JSON.parse(baseTime).openDate.map((v: any) =>
        v.replaceAll('年', '-').replaceAll('月', '-').replaceAll('日', '')
      )
    : []

  const [value, setValue] = useState<string[]>(baseTimeArr)
  const [personCount, setPersonCount] = useState(JSON.parse(baseTime).count)

  const onChange = useCallback(
    (date: any, dateString: string[] | string) => {
      if (dateString.length) {
        let arr = dateString as string[]
        if (arr.length > num) {
          arr = arr.filter((c, i) => i < num)
          MessageFu.warning(`最多${num}个日期，已过滤超出日期`)
        }
        setValue(arr.map(v => v.replaceAll('年', '-').replaceAll('月', '-').replaceAll('日', '')))
      } else setValue([])
    },
    [num]
  )

  return (
    <Modal
      wrapClassName={styles.C1Notime}
      open={true}
      title='节假日开放日期'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <DatePicker
        multiple
        onChange={onChange}
        maxTagCount='responsive'
        value={value ? value.map(v => dayjs(v)) : []}
        size='large'
        allowClear={false}
        format='YYYY年MM月DD日'
      />

      <div className='allowCount'>
        <div className='title'>节假日可预约人数</div>
        <InputNumber
          style={{ width: 120 }}
          defaultValue={500}
          value={personCount}
          onChange={val => setPersonCount(val!)}
          min={1}
          max={11600}
        />
      </div>

      <div className='C1Nbtn'>
        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        &emsp;
        <Button type='primary' onClick={() => editFu(value, personCount)}>
          提交
        </Button>
      </div>
    </Modal>
  )
}

const MemoC1NoTime = React.memo(C1NoTime)

export default MemoC1NoTime
