import Taro, { Component } from '@tarojs/taro'
import { View, Image, Picker } from '@tarojs/components'
import './index.scss'
export default class TimeTwo extends Component {
  constructor (props) {
    super(props)
    const curArr = props.curArr || []
    let startTime = ''
    let endTime = ''
    if (curArr.length > 0) {
      startTime = curArr[0]
      endTime = curArr[1]
    }
    this.state = {
      startTime,
      endTime,
    }
  }

  componentDidUpdate (prevProps, prevState) {
    const { curArr } = this.props
    if (curArr && curArr.length > 0 && prevProps.curArr !== curArr) {
      let startTime = ''
      let endTime = ''
      if (curArr.length > 0) {
        startTime = curArr[0]
        endTime = curArr[1]
      }
      this.setState({
        startTime,
        endTime,
      })
    }
  }

  dateChange (str, e) {
    this.setState({
      [str]: e.target.value
    }, () => {
      if (str === 'startTime') {
        this.setState({
          endTime: ''
        })
      }
      if (str === 'endTime') {
        const { bc } = this.props
        const { startTime, endTime } = this.state
        if (bc) bc([startTime, endTime])
      }
    })
  }

  render () {
    const { disabled, label1 = '开始时间', label2 = '结束时间', } = this.props
    const { startTime, endTime } = this.state
    return (
      <View className='time-two'>
        <View className="l-form-content">
          <View className="down"></View>
          <Picker mode='time' value={startTime} className="l-form-picker" disabled={disabled} onChange={this.dateChange.bind(this, 'startTime')}>
            <Input type='text' value={startTime} disabled  className={disabled ? 'l-form-input disabled' : 'l-form-input'}  placeholder={`${label1}`}/>
          </Picker>
        </View>
        <View className="tt-dot">-</View>
        <View className="l-form-content">
          <View className="down"></View>
          <Picker mode='time' value={endTime}  className="l-form-picker" disabled={disabled} onChange={this.dateChange.bind(this, 'endTime')}  start={startTime}>
            <Input type='text' value={endTime} disabled  className={disabled ? 'l-form-input disabled' : 'l-form-input'}  placeholder={`${label2}`}/>
          </Picker>
        </View>
      </View>
    )
  }
}