/**
 * @Description: 默认不能选择未来的时间
 * @Author: Oliver
 * @Modified by: 娄通略
 * @Date: 2020-11-16 10:15:10
 * 注意：需要将该组件放到getFieldDecorator里，否则会选不上时间
*/
import React, { PureComponent } from 'react'
import { DatePicker } from 'antd'
import moment from 'moment'
import PropTypes from 'prop-types'
// 把moment的中文语言包引进来，防止点着点着变英文了
import 'moment/locale/zh-cn'

const { RangePicker } = DatePicker;
// 不能选择的日期
const disabledDate = (current) => {
    return current && current > moment().endOf('day');
}

export default class CustomRangePicker extends PureComponent {
    static propTypes = {
        // 唯一更改键名的props
        handleTimeChange: PropTypes.func,
    }

    static defaultProps = {
        showTime: {
            hideDisabledOptions: true,
            defaultValue: [
                moment('00:00:00', 'HH:mm:ss'),
                moment('23:59:59', 'HH:mm:ss')
            ]
        },
        ranges: {
            '最近24小时': [moment().subtract(24, 'h'), moment()],
            '最近7天': [moment().subtract(7, 'd'), moment()],
            '最近30天': [moment().subtract(30, 'd'), moment()]
        },
        disabledDate: disabledDate
    }

    render() {
        const { style, showTime, handleTimeChange, value, onChange, disabledDate, ranges } = this.props;
        return (
            <RangePicker
                style={style}
                showTime={showTime}
                disabledDate={disabledDate}
                // 为了解决有时会出现中英文混杂的问题
                defaultPickerValue={[moment(), moment()]}
                // disabledTime={this.disabledRangeTime}
                format="YYYY-MM-DD HH:mm:ss"
                ranges={ranges}
                value={value}
                onChange={onChange}
                onOk={handleTimeChange}
            />
        )
    }
}