/**
 * 2019年10月23日
 * 移动端日期选择封装
 */
import React, { Component } from 'react'
import { DatePicker, List, Button, InputItem, Modal } from 'antd-mobile';
import moment from 'moment'
export default class MobileDate extends Component {
    constructor(props){
        super(props)
        const value = props.value ||[];
        
        this.state = {
            dates:value
        }
    }
    triggerChange = (changedValue) => {
        // Should provide an event to pass value to Form.
        const onChange = this.props.onChange;
        
        if (onChange) {
          onChange(changedValue);
        }
      }
    componentWillReceiveProps(nextProps) {
        // Should be a controlled component.
        if ('value' in nextProps) {
            const value = nextProps.value;
            this.setState({dates:value});
        }
    }
    handelStartChange = (date) => {
        const {dates}=this.state
      
        if(dates.length==0){
            dates.push(moment(date.valueOf()))
        }else{
            dates[0]=moment(date.valueOf())
        }
        
        if (!('value' in this.props)) {
            this.setState({dates});
          }
          this.triggerChange(dates);
      
    }
    handelEndChange = (date) => {
        const {dates}=this.state
        if(dates.length==0){
            dates.push(null)
            dates.push(moment(date.valueOf()))
        }else if(dates.length==1){
            dates.push(moment(date.valueOf()))
            
        }else{
            dates[1]=moment(date.valueOf())
        }
        if (!('value' in this.props)) {
            this.setState({dates});
          }
          this.triggerChange(dates);
      
        
    }
    render() {
        let {dates} = this.state
        const {format}=this.props
        const startTime=dates.length>0?dates[0].valueOf():null
        const endTime=dates.length>1?dates[1].valueOf():null
       
        return (
            <div>
                <DatePicker
                // value={this.state.date}
                extra={<span style={{fontSize:14}}>{!!startTime?moment(startTime).format(format?format:'YYYY-MM-DD HH:mm:ss'):'请选择时间'}</span>}
                locale={{okText:"确定",dismissText:'取消'}}
                value={ !!startTime?new Date(startTime):null}
                format={format?format:'YYYY-MM-DD HH:mm:ss'}
                onChange={date => this.handelStartChange(date)}
                >
                <List.Item arrow="horizontal">开始时间</List.Item>
                </DatePicker>
                <DatePicker
                // value={this.state.date}
                extra={<span style={{fontSize:14}}>{!!endTime?moment(endTime).format(format?format:'YYYY-MM-DD HH:mm:ss'):'请选择时间'}</span>}
                value={!!endTime?new Date(endTime):null}
                locale={{okText:"确定",dismissText:'取消'}}
                format={format?format:'YYYY-MM-DD HH:mm:ss'}
                onChange={date => this.handelEndChange(date)}
                >
                <List.Item arrow="horizontal">结束时间</List.Item>
                </DatePicker>
            </div>
        )
    }
}
