import './demo11.css';
import Button from '../../button';
import DatePicker from '..';
import Field from '../../field';
import React from 'react';
import ReactDOM from 'react-dom';
const { RangePicker, YearPicker, MonthPicker } = DatePicker;
class App extends React.Component {
  field: Field;
  printData: () => void;
  printError: (name: any) => JSX.Element;
  constructor(props) {
    super(props);
    this.field = new Field(this);
    this.printData = () => {
      this.field.validate((err, values) => {
        if (err) {
          console.error('Error: ', err);
          return;
        }
        // @ts-ignore
        console.log('datepicker: %s', values.date.format('YYYY-MM-DD'));
        // @ts-ignore
        console.log('monthpicker: %s', values.month.format('YYYY-MM'));
        // @ts-ignore
        console.log('yearpicker: %s', values.year.format('YYYY'));
        // @ts-ignore
        const range = values.range;
        console.log(
          'rangepicker: [%s, %s]',
          range[0] && range[0].format('YYYY-MM-DD'),
          range[1] && range[1].format('YYYY-MM-DD'),
        );
      });
    };
    this.printError = name => {
      if (this.field.getError(name)) {
        return (
          <span className="error-msg">
            {this.field.getError(name).join(',')}
          </span>
        );
      }
    };
  }
  render() {
    const init = this.field.init;

    return (
      <div>
        <DatePicker
          {...init('date', {
            rules: [
              {
                required: true,
                message: '请选择日期',
              },
            ],
          })}
        />
        {this.printError('date')}
        <br />
        <br />
        <MonthPicker
          {...init('month', {
            rules: [
              {
                required: true,
                message: '请选择月份',
              },
            ],
          })}
        />
        {this.printError('month')}
        <br />
        <br />
        <YearPicker
          {...init('year', {
            rules: [
              {
                required: true,
                message: '请选择年份',
              },
            ],
          })}
        />
        {this.printError('year')}
        <br />
        <br />
        <RangePicker
          {...init('range', {
            rules: [
              {
                required: true,
                message: '请选择日期范围',
              },
            ],
          })}
        />
        {this.printError('range')}
        <br />
        <br />
        <Button onClick={this.printData}>Print to Console</Button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('date-picker-demo-11'));