DateSelect

/**
 * Created by marginyu on 17/4/10.
 */

import React,{Component, PropTypes} from 'react';
import {DatePicker,Tag} from "antd";
import moment from 'moment';
const {RangePicker} = DatePicker;

const dateFormat = "YYYY-MM-DD";
const {CheckableTag} = Tag;

class DateSelect extends Component{

  static propTypes = {
    callback:PropTypes.func.isRequired,//选择日期后的回调
    hasThisWeek:PropTypes.bool,//本周
    hasRecentSevenDays:PropTypes.bool,
    hasRecentThirtyDays:PropTypes.bool,
    defaultFlag:PropTypes.number,//默认展示的单据日期; -999,不选中
    allowClear:PropTypes.bool,//是否有清除按钮
    style:PropTypes.object,
  };

  static defaultProps = {
    hasThisWeek:false,
    hasRecentThirtyDays:true,
    hasRecentSevenDays:true,
    defaultFlag:3,
    allowClear:false,
    style:{display:'inline-block'},
  };

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      flag:this.props.defaultFlag,
    };
  }


  componentDidMount() {
    //默认时间
    this.setDate(this.state.flag,true);
  }

  onChange = (dates,dateStrings)=>{
     this.setState({
       dates:dates,
       flag:-999,//不选中标签
     },this.callback);
  };

  setDate = (type, initFlag=false)=>{

    if(!initFlag && type == this.state.flag){
      return ;
    }

    let today = moment();

    let dates = [today];
    switch (type){
      case -1:
        let last = moment().date(1).subtract(1,'days');
        let first = moment().date(1).subtract(1,'months');
        dates = [first,last];//上个月
        break;
      case 0:
        dates.unshift(moment().date(1));//本月
            //本月
            break;
       case 1:
         dates.unshift(moment().subtract(6,'days'));//近七天
         break;
       case 2:
         dates.unshift(moment().subtract(14,'days'));//近15天
         break;
       case 3:
         dates.unshift(moment().subtract(29,'days'));//近30天
         break;
       case 4:
         dates.unshift(moment().weekday(0));//本周
         break;
      case -999:
         dates = [];
         break;
    }

    this.setState({
      dates,
      flag:type
    },this.callback);
  };


  callback = ()=>{
    let rs = this.state.dates.map((item)=>{
      return item.format(dateFormat);
    });
    if(rs.length==0) rs = ["",""];
    this.props.callback(rs);
  };

   render(){
      return (
        <div style={this.props.style}>
           <RangePicker
             allowClear={this.props.allowClear}
             style={{marginRight:10,verticalAlign:'middle'}}
             value = {this.state.dates}
             onChange={this.onChange}/>
          {this.props.hasThisWeek?
            <CheckableTag  checked={this.state.flag == 4} onChange={()=>this.setDate(4)}>本周</CheckableTag>
            :null}
          <CheckableTag  checked={this.state.flag == 0} onChange={()=>this.setDate(0)}>本月</CheckableTag>
          <CheckableTag  checked={this.state.flag == -1} onChange={()=>this.setDate(-1)}>上月</CheckableTag>
          {
            this.props.hasRecentSevenDays?
              <CheckableTag  checked={this.state.flag == 1} onChange={()=>this.setDate(1)}  >近7天</CheckableTag>
            :null
          }
          {/**<CheckableTag  checked={this.state.flag == 2} onChange={()=>this.setDate(2)} >近15天</CheckableTag>**/}
          {
            this.props.hasRecentThirtyDays?
              <CheckableTag  checked={this.state.flag == 3} onChange={()=>this.setDate(3)} >近30天</CheckableTag>
              :null
          }
        </div>
      );
   }
}

export default DateSelect;