/**
 * 多选日历
 * Created by Gentean
 * Mail: 4083189@qq.com
 * Date: 2016/12/30
 * Time: 下午2:32
 */
import React from 'react';
import { message } from 'antd';
import moment from 'moment';
require('./MultipleDatePicker.less');
class MultipleDatePicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      calendar: '',
      calendarDate: props.type ? moment(props.startTime) : moment(),
      detailList: [],
      waitNoticeNumber: 0,
      totalCount: 0,
      selectDateList: props.selectDateList || [],
      endTime: props.endTime || null,
      startTime: props.startTime || null,
      homeworkProcessEnum: props.homeworkProcessEnum || '',
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState(
      {
        endTime: nextProps.endTime,
        startTime: nextProps.startTime,
        selectDateList: nextProps.selectDateList,
        homeworkProcessEnum: nextProps.homeworkProcessEnum,
      },
      () => {
        this.handleQuery();
      }
    );
  }

  componentDidMount() {
    this.handleQuery();
  }

  handleQuery() {
    var self = this;
    self.setState({
      calendar: self.renderCalendar(),
    });
  }

  renderCalendar() {
    var start = moment(this.state.calendarDate).startOf('month'),
      startDay = start.date(),
      // 每月的第一天是星期几 [0-6] 6:日
      startWeekOf = start.weekday();
    var end = moment(this.state.calendarDate).endOf('month'),
      endDay = end.date(),
      endWeekOf = end.weekday();
    var dateElms = [];
    // 上月余留的天
    var prevMonthDays = moment(start).subtract(1, 'months').endOf('month'),
      prevMonthDaysNumber = prevMonthDays.date();
    for (var j = prevMonthDaysNumber - startWeekOf, i = 0; i < startWeekOf + 1; i++, j++) {
      var time = moment(prevMonthDays).subtract(startWeekOf - 1 - i, 'days');

      dateElms.push(
        <li className={'disabled'} key={'before' + i}>
          <span>{j}</span>
        </li>
      );
    }

    // 本月
    for (var i = startDay; i <= endDay; i++) {
      var time = moment(start).add(i - 1, 'days');

      var className = '';
      if (!this.props.canSelectTodayBefore && time.valueOf() < moment().valueOf() && time.format('YYYY-MM-DD') != moment().format('YYYY-MM-DD')) {
        className = 'before-disabled';
      }
      // 今日待跟进
      if (time.format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
        className += ' today';
      }

      if (this.state.selectDateList.indexOf(time.valueOf()) > -1) {
        className += ' active';
        const today = moment().startOf('day').valueOf();
        if (this.props.type && this.props.type == 'CALENDAR_CLOCK' && time.valueOf() < today && this.state.homeworkProcessEnum == 'ONGOING') {
          className += ' past';
        }
      }
      if (this.state.startTime && this.state.endTime && (time.valueOf() > this.state.endTime.valueOf() || time.valueOf() < this.state.startTime.valueOf())) {
        className += ' disabled';
      }

      dateElms.push(
        <li className={className} key={'curr' + i} onClick={this.handleShowDetail.bind(this, time, className)}>
          <span>{i}</span>
        </li>
      );
    }

    // 下月预来的天
    for (var j = 1, i = endWeekOf; i < 6; i++, j++) {
      var time = moment(end).add(i, 'days');
      dateElms.push(
        <li className={'disabled'} key={'after' + i}>
          <span>{j}</span>
        </li>
      );
    }
    return dateElms;
  }

  handleShowDetail(time, className) {
    if ((!this.props.canSelectTodayBefore && className === 'before-disabled') || this.props.disabled) {
      return;
    }
    let date = time.valueOf();
    const today = moment().startOf('day').valueOf();
    if (this.props.type && this.props.type === 'CALENDAR_CLOCK' && date < today) {
      return;
    }
    if (this.state.homeworkProcessEnum === 'ONGOING' && date == today) {
      return;
    }
    if (
      this.props.type &&
      this.props.type == 'CALENDAR_CLOCK' &&
      this.state.startTime &&
      this.state.endTime &&
      (date > this.state.endTime.valueOf() || date < this.state.startTime.valueOf())
    ) {
      return;
    }
    let tempArr = this.state.selectDateList;

    if (tempArr.indexOf(date) > -1) {
      let index = tempArr.indexOf(date);
      tempArr.splice(index, 1);
    } else {
      if (tempArr.length > 29 && !this.props.type) {
        message.warning('最多选择30天');
        return;
      } else {
        tempArr.push(date);
      }
    }
    this.props.onSelect(tempArr);
    this.setState(
      {
        selectDateList: tempArr,
      },
      () => {
        this.handleQuery();
      }
    );
  }

  render() {
    const self = this;
    const { calendarDate, endTime, startTime } = this.state;
    const { type } = this.props;
    const prevMonth = startTime && calendarDate.subtract(1, 'months').endOf('month').valueOf() < startTime.valueOf();
    const nextMonth = !(endTime && calendarDate.add(1, 'months').valueOf() < endTime.valueOf());
    return (
      <div className={`multiple-calendar ${type === 'CALENDAR_CLOCK' ? 'punch-calender' : ''}`}>
        <Choose>
          <When condition={type == 'CALENDAR_CLOCK'}>
            <div className='punch-control'>
              <div className='punch-main'>
                <div
                  onClick={function () {
                    if (prevMonth) {
                      return;
                    }
                    this.state.calendarDate = this.state.calendarDate.subtract(1, 'months');
                    self.handleQuery();
                  }.bind(this)}
                  className={`prev-icon ${prevMonth ? 'disbled-icon' : ''}`}>
                  <span className='icon iconfont'>&#xe65f;</span>
                </div>
                <span className='month'>{this.state.calendarDate.format('YYYY年MM月')}</span>
                <div
                  className={`next-icon ${nextMonth ? 'disbled-icon' : ''}`}
                  onClick={function () {
                    if (nextMonth) {
                      return;
                    }
                    this.state.calendarDate = this.state.calendarDate.add(1, 'months');
                    self.handleQuery();
                  }.bind(this)}>
                  <span className='icon iconfont'>&#xe65e;</span>
                </div>
              </div>
              <div
                className='self'
                onClick={function () {
                  this.state.calendarDate = moment(startTime);
                  self.handleQuery();
                }.bind(this)}>
                回到起始月
              </div>
            </div>
          </When>
          <Otherwise>
            <div className='t-control'>
              <div
                className='prev'
                onClick={function () {
                  this.state.calendarDate = this.state.calendarDate.subtract(1, 'months');
                  self.handleQuery();
                }.bind(this)}>
                上月
              </div>
              <div className='loc'>{this.state.calendarDate.format('YYYY年MM月')}</div>
              <div
                className='self'
                onClick={function () {
                  this.state.calendarDate = moment();
                  self.handleQuery();
                }.bind(this)}>
                本月
              </div>
              <div
                className='next'
                onClick={function () {
                  this.state.calendarDate = this.state.calendarDate.add(1, 'months');
                  self.handleQuery();
                }.bind(this)}>
                下月
              </div>
            </div>
          </Otherwise>
        </Choose>

        <ul className='week'>
          <li>日</li>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
        </ul>
        <ul className='calendar' id='multiCalendar'>
          {this.state.calendar}
        </ul>
      </div>
    );
  }
}

MultipleDatePicker.propTypes = {};

MultipleDatePicker.defaultProps = {
  reEditUrl: '',
  close: function () {},
  canSelectTodayBefore: true, // 支持选择今天之前的日期
};

export default MultipleDatePicker;
