import React, { Component, Fragment } from 'react';
import { Row, Col, Card, Input, Tag, Button, DatePicker, Divider, message } from 'antd';
import moment from 'moment';

const { MonthPicker } = DatePicker;
export default class MonthMultiplePicker extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selectedValues: props.value || []
    }
  }

  handleClose = index => {
    const arr = [...this.state.selectedValues];
    arr.splice(index, 1);
    this.setState({
      selectedValues: arr,
    }, () => {
      this.props.onChange(this.state.selectedValues.map((item) => moment(item).format('YYYY-MM')))
    });
  }

  onStartChange = (value) => {
    if (!value || this.state.selectedValues.filter(item => moment(item).format('YYYY-MM') === moment(value).format('YYYY-MM')).length > 0) return;
    this.setState({
      selectedValues: [...this.state.selectedValues, value],
    }, () => {
      this.props.onChange(this.state.selectedValues.map((item) => moment(item).format('YYYY-MM')))
    });
    
  }

  handleStartOpenChange = open => {
    this.setState({ endOpen: open });
  };

  state = {
    currentValue: null,
    selectedValues: [],
    endOpen: false
  }

  render() {
    const { startValue, endValue, endOpen } = this.state;
    return (
      <Fragment>
        {
          this.state.selectedValues.map((item, index) => <Tag key={index} closable onClose={e => { e.preventDefault(); this.handleClose(index); }} >{moment(item).format('YYYY-MM')} </Tag>)
        }
        <MonthPicker 
          placeholder="选择月份"
          style={{ width: 110 }}
          open={endOpen}
          onChange={this.onStartChange}
          onOpenChange={this.handleStartOpenChange}
          value={this.state.currentValue}
           />
      </Fragment>
    )
  }
};