import React, { Component } from 'react'
import { DatePicker, Row, Col  } from 'antd';
import moment from 'moment';
import YearPicker from '../../../yearPicker/yearPicker'
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const { MonthPicker, RangePicker } = DatePicker;

class Date extends Component {
	render() {
		let {
			value,
            scope,
            date_type
		} = this.props

		if(scope ==="among") {
			return (
				<Row  className="u-field-search-among" gutter={0}>
					<Col span={11}>
                        {
                            (date_type==="YYYY" || date_type==="YYYY年" )?
                            <YearPicker
                                selectDate={value.start ? moment(value.start, "YYYY-MM-DD") : null} 
                                style={{width:"154px"}}
                                dateFormat={date_type}
                                onYearClick={(date,datestring)=>{
                                    let newValue = value;
                                    // newValue.start =  moment(date._d).format('YYYY-MM-DD HH:mm:ss');
                                    newValue.start = datestring;
                                    this.props.onChange(newValue)
                                }}  
                            />
                            : (date_type==="YYYY-MM" || date_type==="YYYY年MM月" )?
                            <MonthPicker
                                format={date_type}  
                                style={{width:"154px"}}
                                value={value.start ? moment(value.start, "YYYY-MM-DD") : null} 
                                onChange={(date,datestring)=>{
                                    let newValue = value;
                                    // newValue.start =  moment(date._d).format('YYYY-MM-DD HH:mm:ss');
                                    newValue.start =  datestring;
                                    this.props.onChange(newValue)
                                }}                            />
                            :<DatePicker 
                                style={{width:"154px"}}   
                                format={date_type}   
                                className="rep-u-field-search-datatime"                                       
                                value={value.start ? moment(value.start, "YYYY-MM-DD") : null} 
                                onChange={(date,datestring)=>{
                                    let newValue = value;
                                    // newValue.start =  moment(date._d).format('YYYY-MM-DD HH:mm:ss');
                                    newValue.start = datestring;
                                    this.props.onChange(newValue)
                                }}                            />
                        }
					</Col>
					<Col span={1}  offset={1}>
						-
					</Col>
					<Col span={11} >
                        
                        {
                            (date_type==="YYYY" || date_type==="YYYY年" )?
                            <YearPicker
                                selectDate={value.end ? moment(value.end, "YYYY-MM-DD") : null} 
                                style={{width:"154px"}}
                                dateFormat={date_type}
                                onYearClick={(date,datestring)=>{
                                    let newValue = value;
                                    // newValue.start =  moment(date._d).format('YYYY-MM-DD HH:mm:ss');
                                    newValue.end =  datestring;
                                    this.props.onChange(newValue)
                                }}  
                            />
                            : (date_type==="YYYY-MM" || date_type==="YYYY年MM月" )?
                            <MonthPicker
                                format={date_type}  
                                style={{width:"154px"}}
                                value={value.end ? moment(value.end, "YYYY-MM-DD") : null} 
                                onChange={(date,datestring)=>{
                                    let newValue = value;
                                    // newValue.end =  moment(date._d).format('YYYY-MM-DD HH:mm:ss');
                                    newValue.end = datestring;
                                    this.props.onChange(newValue)
                                }}                            />
                            :<DatePicker 
                                style={{width:"154px"}}   
                                format={date_type}   
                                // className="rep-u-field-search-datatime"                                       
                                value={value.end ? moment(value.end, "YYYY-MM-DD") : null} 
                                onChange={(date,datestring)=>{
                                    let newValue = value;
                                    // newValue.end =  moment(date._d).format('YYYY-MM-DD HH:mm:ss');
                                    newValue.end =  datestring;
                                    this.props.onChange(newValue)
                                }} 
                            />
                        }
					</Col>
				</Row>
			)
		}else{
			return (
				// <DatePicker value={value ? moment(value, "YYYY-MM-DD") : null} className="rep-u-field-search-datatime" format={"YYYY-MM-DD"} onChange={(value,datestring)=>this.props.onChange(datestring)} />
                
                    (date_type==="YYYY" || date_type==="YYYY年" )?
                    <YearPicker  selectDate={value ? moment(value, "YYYY-MM-DD") : null} 
                     style={{width:"154px"}} dateFormat={date_type}
                     onYearClick={(date,datestring)=>{
                        let newValue = value;  //有效日期格式
                        newValue =  date?moment(date._d).format('YYYY-MM-DD HH:mm:ss'):"";
                        let dateValue =  datestring;  //普通 的日期字符串
                        this.props.onChange(dateValue,newValue)
                     }}
                    />
                    : (date_type==="YYYY-MM" || date_type==="YYYY年MM月" )?
                    <MonthPicker
                        format={date_type}  
                        style={{width:"154px"}}
                        value={value ? moment(value, "YYYY-MM-DD") : null}    
                        onChange={(date,datestring)=>this.props.onChange(datestring)}
                    />
                    :<DatePicker 
                        style={{width:"174px"}}   
                        format={date_type}                                         
                        value={value ? moment(value, "YYYY-MM-DD") : null}    
                        onChange={(date,datestring)=>this.props.onChange(datestring)}
                    />
                
                )	
            
            


		}

	}
}

export default Date