/*
 * Create:      柿子
 * CreateDate:  2022/07/25
 * Describe：   日期范围选择
 * */
import React from 'react';
import { DatePicker, Button, Input, message } from 'antd';
import { dayFormat } from 'tools/index';
import moment from 'moment';
const InputGroup = Input.Group;

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

class PublicRangePicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startStatus: false,
      endStatus: false,
      startValue: moment().format('YYYY-MM-DD'),
      endValue: moment().format('YYYY-MM-DD')
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.isChange) {
      return {
        endValue: nextProps.endDate,
        startValue: nextProps.startDate,
      }
    }
    return null
  }

  handleInputChange = (e, dataIndex) => {
    this.setState({
      [dataIndex]: e
    })
  }

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

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

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

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

  //时间段
  changePeriodTime = (name) => {
    const { format, startChange, endChange } = this.props;
    var currentDay = moment().format(format);
    if (name == 'today') {
      startChange && startChange(currentDay)
      endChange && endChange(currentDay)
      this.setState({
        startValue: currentDay,
        endValue: currentDay,
        startStatus: false
      })
    } else if (name == 'three') {
      var code = moment().subtract(2, 'days')
      var data = moment(code).format(format)
      startChange && startChange(data)
      endChange && endChange(currentDay)
      this.setState({
        startValue: data,
        endValue: currentDay,
        startStatus: false
      })
    } else if (name == 'seven') {
      var code = moment().subtract(6, 'days')
      var data = moment(code).format(format)
      startChange && startChange(data)
      this.setState({
        startValue: data,
        endValue: currentDay,
        startStatus: false
      })
    } else if (name == 'thirty') {
      var code = moment().subtract(29, 'days')
      var data = moment(code).format(format)
      startChange && startChange(data)
      endChange && endChange(currentDay)
      this.setState({
        startValue: data,
        endValue: currentDay,
        startStatus: false
      })
    }
  }

  render() {
    const { style = {}, showTime, otherProps, labelWidth, label, width, locale, format, disabled, allowClear } = this.props;
    const { startValue, endValue, startStatus, endStatus } = this.state;
    return (
      <div style={{ display: 'inline-block', ...style }}>
        <div className="flex-align-items" style={{ lineHeight: '32px', width: '100%' }}>
          <span style={{ width: labelWidth }}>
            {label}
          </span>
          <InputGroup style={{ width: width || '300px', display: 'flex' }} compact>
            <DatePicker
              {...otherProps}
              format={format}
              showToday={false}
              open={startStatus}
              disabled={disabled}
              allowClear={!!allowClear}
              showTime={showTime ? { defaultValue: moment('00:00:00', 'HH:mm:ss') } : false}
              value={startValue ? moment(startValue, format) : undefined}
              renderExtraFooter={() => (
                <div>
                  <Button size='small' onClick={() => this.changePeriodTime('today')}>{locale == 'EN' ? 'today' : '今日'}</Button>
                  <Button size='small' style={{ marginLeft: 6 }} onClick={() => this.changePeriodTime('three')}>{locale == 'EN' ? 'three days' : '近三日'}</Button>
                  <Button size='small' style={{ marginLeft: 6 }} onClick={() => this.changePeriodTime('seven')}>{locale == 'EN' ? 'seven days' : '近七日'}</Button>
                  <Button size='small' style={{ marginLeft: 6 }} onClick={() => this.changePeriodTime('thirty')}>{locale == 'EN' ? 'thirty days' : '近30日'}</Button>
                </div>
              )}
              onChange={this.handleStartChange}
              onOpenChange={(e) => this.handleInputChange(e, 'startStatus')}
            />
            <Input value={locale == 'EN' ? 'To' : '至'} disabled style={{ width: 39, color: '#999' }} />
            <DatePicker
              {...otherProps}
              format={format}
              open={endStatus}
              showToday={false}
              disabled={disabled}
              allowClear={!!allowClear}
              showTime={showTime ? { defaultValue: moment('23:59:59', 'HH:mm:ss') } : false}
              value={endValue ? moment(endValue, format) : undefined}
              onChange={this.handleEndChange}
              onOpenChange={(e) => this.handleInputChange(e, 'endStatus')}
            />
          </InputGroup>
        </div>
      </div>
    );
  }
};

export default PublicRangePicker
