import React from 'react';
import { DatePicker, Button, Input, message, ConfigProvider } from 'antd';
import { dayFormat } from 'tools/index';
import moment from 'moment';
import locale from 'antd/es/date-picker/locale/en_US';
import 'moment/locale/es-us';
moment.locale('es-us');
import './style/index.less';

const InputGroup = Input.Group;

/**
 * 注释：
 * label：为当前组件定义的label名  ------非必传
 * format：为当前组件的日期格式，  ------必传
 * startDate：为开始时间，默认为当天 ------非必传
 * endDate：为结束时间 默认当天 ------非必传
 * startChange 选择开始时间  ------必传
 * endChange 结束时间   ------必传
 * showTime  是否展示时分秒  ------非必传
 * isShow  用于在弹框中，或者组件切换，当开始时间或者结束时间通过state获取值时，组件切换后value值不变 -----非必传
 * locale   用于配置国际化     ------必传
 * allowClear 是否显示清除按钮 -----非必传
 */

export default class RangeDatePicker extends React.Component {
	constructor(props) {
		var date = new Date()
		super(props);
		this.state = {
			formatType: true,
			startStatus: false,
			endStatus: false,
			startValue: this.props.startDate,
			endValue: this.props.endDate
		};
	}

	// componentWillReceiveProps(nextProps) {
	// 	//动态传入日期 改变面板日期
	// 	if (nextProps.isShow == true) {
	// 		this.setState({
	// 			startValue: undefined,
	// 			endValue: undefined,
	// 		})
	// 	} if (nextProps.isChange) {
	// 		this.setState({
	// 			startValue: nextProps.startDate,
	// 			endValue: nextProps.endDate,
	// 		})
	// 	}
	// }
	static getDerivedStateFromProps(nextProps, prevState) {
		if (nextProps.isShow && (prevState.startValue || prevState.endValue)) {
			console.log('RangeDatePicker-isShow')
			return {
				endValue: undefined,
				startValue: undefined,
			}
		}
		if (nextProps.isChange && ((nextProps.startDate !== prevState.startValue) || (nextProps.endDate !== prevState.endValue))) {
			console.log('RangeDatePicker-isChange')
			return {
				endValue: nextProps.endDate,
				startValue: nextProps.startDate,
			}
		}
		return null
	}

	//控制弹框面板展示/隐藏问题
	handleStartOpenChange(e) {
		this.setState({
			startStatus: e
		})
	}

	handleEndOpenChange(e) {
		this.setState({
			endStatus: e
		})
	}

	//确认框，确认选择的时间，并关闭时间面板
	handleCloseTimeModal(name) {
		this.setState({
			[name]: false
		})
	}

	onChange = (field, name, value) => {
		this.setState({
			[field]: value,
			[name]: false
		});
	}

	onStartChange = (value) => {
		let startDate = value ? moment(value).format(this.props.format) : '';
		if (moment(startDate, this.props?.format || dayFormat).unix() > (moment(this.state.endValue, this.props?.format || dayFormat).unix())) {
			message.error('开始时间不能大于结束时间')
			return
		}
		this.onChange('startValue', 'startStatus', value);
		let startChange = this.props.startChange;
		startChange && startChange(startDate);
	}

	onEndChange = (value) => {
		if (moment(this.state.startValue, this.props?.format || dayFormat).unix() > (moment(value, this.props?.format || dayFormat).unix())) {
			message.error('开始时间不能大于结束时间')
			return
		}
		this.onChange('endValue', 'endStatus', value);
		let endChange = this.props.endChange;
		endChange && endChange(value ? moment(value).format(this.props.format) : '');
	}

	//时间段
	changePeriodTime(name) {
		var { startChange, endChange, showTime } = this.props;
		var date = new Date()
		let startData = moment(date).format(dayFormat) + (showTime ? ' 00:00:00' : '');
		let endData = moment(date).format(dayFormat) + (showTime ? ' 23:59:59' : '');
		if (name == 'today') {
			startChange && startChange(startData);
			endChange && endChange(endData);
			this.setState({
				startValue: startData,
				endValue: endData,
				startStatus: false
			})
		} else if (name == 'three') {
			var code = moment().subtract(2, 'days')
			var data = moment(code).format(dayFormat) + (showTime ? ' 00:00:00' : '');
			startChange && startChange(data);
			endChange && endChange(endData);
			this.setState({
				startValue: data,
				endValue: endData,
				startStatus: false
			})
		} else if (name == 'seven') {
			var code = moment().subtract(6, 'days')
			var data = moment(code).format(dayFormat) + (showTime ? ' 00:00:00' : '');
			startChange && startChange(data);
			endChange && endChange(endData);
			this.setState({
				startValue: data,
				endValue: endData,
				startStatus: false
			})
		} else if (name == 'thirty') {
			var code = moment().subtract(29, 'days')
			var data = moment(code).format(dayFormat) + (showTime ? ' 00:00:00' : '');
			startChange && startChange(data);
			endChange && endChange(endData);
			this.setState({
				startValue: data,
				endValue: endData,
				startStatus: false
			})
		}
	}

	render() {
		const { startValue, endValue, startStatus, endStatus } = this.state;
		let { showTime, otherProps, placeholder } = this.props;
		return (
			<div className="common-range-picker" style={{ display: 'flex', lineHeight: '32px', width: this.props.totalwidth, float: this.props.float, margin: this.props.margin }}>
				<span style={{ width: this.props.labelwidth }}>{this.props.label}</span>
				<InputGroup style={{ width: this.props.width, display: 'flex' }} compact>
					<ConfigProvider locale={this.props.locale == 'EN' ? locale : ''}>
						<DatePicker
							separator="-"
							showToday={false}
							open={startStatus}
							onOpenChange={this.handleStartOpenChange.bind(this)}
							onChange={this.onStartChange}
							style={{ minWidth: this.props?.minWidth || '' }}
							format={this.props.format === 'YYYY-MM-DD HH:mm:ss' ? (!!!startStatus ? 'YYYY-MM-DD HH:mm:ss' : 'YYYYMMDD HHmmss') : (!!!startStatus ? 'YYYY-MM-DD' : 'YYYYMMDD')}
							disabled={this.props.disabled}
							allowClear={this.props.allowClear && (this.props.allowClear == false ? false : true)}
							value={startValue ? moment(startValue, this.props?.format || dayFormat) : ((this.props.startDate ? moment(this.props.startDate, this.props?.format || dayFormat) : undefined))}
							{...otherProps}
							placeholder={placeholder ? placeholder + '开始日期' : '开始日期'}
							showTime={showTime ? { defaultValue: moment('00:00:00', 'HH:mm:ss') } : false}
							renderExtraFooter={() => <div>
								<Button size='small' onClick={this.changePeriodTime.bind(this, 'today')}>{this.props.locale == 'EN' ? 'today' : '今日'}</Button>
								<Button size='small' style={{ marginLeft: 6 }} onClick={this.changePeriodTime.bind(this, 'three')}>{this.props.locale == 'EN' ? 'three days' : '近三日'}</Button>
								<Button size='small' style={{ marginLeft: 6 }} onClick={this.changePeriodTime.bind(this, 'seven')}>{this.props.locale == 'EN' ? 'seven days' : '近七日'}</Button>
								<Button size='small' style={{ marginLeft: 6 }} onClick={this.changePeriodTime.bind(this, 'thirty')}>{this.props.locale == 'EN' ? 'thirty days' : '近30日'}</Button>

								{/* <Button size='small' type='primary' style={{ float: 'right', marginTop: 7 }}
                                onClick={this.handleCloseTimeModal.bind(this, 'startStatus')}>确定</Button> */}
							</div>} />
						<Input className="crp-input" value={this.props.locale == 'EN' ? 'To' : '至'} disabled={true} style={{ width: 39, color: '#999' }} />
						<DatePicker
							separator="-"
							showToday={false}
							open={endStatus}
							style={{ minWidth: this.props?.minWidth || '' }}
							onOpenChange={this.handleEndOpenChange.bind(this)}
							onChange={this.onEndChange}
							disabled={this.props.disabled}
							value={endValue ? moment(endValue, this.props?.format || dayFormat) : (this.props.endDate ? moment(this.props.endDate, this.props?.format || dayFormat) : undefined)}
							{...otherProps}
							placeholder={placeholder ? placeholder + '结束日期' : '结束日期'}
							format={this.props.format === 'YYYY-MM-DD HH:mm:ss' ? (!!!endStatus ? 'YYYY-MM-DD HH:mm:ss' : 'YYYYMMDD HHmmss') : (!!!endStatus ? 'YYYY-MM-DD' : 'YYYYMMDD')}
							allowClear={this.props.allowClear && (this.props.allowClear == false ? false : true)}
							showTime={showTime ? { defaultValue: moment('23:59:59', 'HH:mm:ss') } : false}
						// renderExtraFooter={() => <div>
						//     <Button size='small' type='primary' style={{ marginTop: 7,marginLeft:'80%' }}
						//         onClick={this.handleCloseTimeModal.bind(this, 'endStatus')}>确定</Button></div>}
						/>
					</ConfigProvider>
				</InputGroup></div>
		);
	}
}