import React from 'react'
import { DatePicker, Space } from 'antd';
import moment from 'dayjs';
let DatePickers:any = DatePicker
const { RangePicker }:{RangePicker:any}= DatePickers;
interface Props {
    model: 'RangePicker' | 'DatePicker',
    DatePickerChange: (moment: any, formatString: [string, string] | string) => void,
    allowClear?: boolean,
    className?: string,
    showTime?: boolean,
    scope?: { num: number, unit: 'day' | 'week' | 'month' | 'year' },//自定义时间跨度
    date?: any,
    before?: number,//截止日期以今天为底的前几天填数字
    isDisabledDate?: boolean,//是否开启时间限制
    placeholder?: any,
    style?: { width: number | string }
}

function DatePickePage(props: Props) {
    let { model, DatePickerChange, scope, before, isDisabledDate = true, allowClear = false, ...prop } = props
    const disabledDate = (current: any) => {
        let tppday = before ? current && current > moment(new Date()).subtract(before, 'day') : current && current > moment().endOf('day') //最晚日期
        let isScope = false
        if (scope) {
            isScope = current && current < moment().subtract(scope?.num, scope?.unit)//可选日期
        }
        return tppday || isScope;
    };
    return <>
        <Space direction="vertical" size={12}>
            {
                model === 'RangePicker' ?
                    <RangePicker {...prop} onChange={(mo: any, str: any) => {
                        DatePickerChange(mo, str)
                    }} disabledDate={disabledDate} value={props?.date && props?.date?.every((s: string) => s !== '') ? [moment(props.date[0]), moment(props.date[1])] : undefined} allowClear={allowClear} /> :
                    <DatePickers  onChange={DatePickerChange} {...prop} disabledDate={isDisabledDate ? disabledDate : undefined} allowClear={true} value={props.date ? moment(props.date) : undefined} />
            }
        </Space>
    </>
}
export default DatePickePage

