import Taro, { Component } from '@tarojs/taro'
import './TopSearch.scss'
import LFormGroup from '@/c/lform/formGroup'
import { AtDrawer } from 'taro-ui'
export default class TopSearch extends Component {
  constructor (props) {
    super(props)
    this.state = {
      formObj: {},
      sceneArr: [],
    }
  }

  componentDidUpdate (prevProps, prevState) {
    // const { curObj } = this.props
    // console.log(curObj)
    // // if (show && prevProps.show !== show) {
    // //   const { curObj } = this.state
    // //   console.log(curObj)
    // //   this.setState({
    // //     formObj: {...curObj}
    // //   })
    // // }
  }

  componentWillMount () {
  }
  
  clearAllSearch = () => {
    this.setState({
      formObj: {},
    })
  }

  dealPopup () {
    const { bc } = this.props
    let { formObj } = this.state
    if (!formObj.end_at) {
      formObj.start_at = ''
    }
    bc(formObj)
  }
  closePopup () {
    const { close } = this.props
    close()
  }

  baseFormChange (key, val) {
    let { formObj } = this.state
    formObj[key] = val
    this.setState({
      formObj
    })
  }
  baseFormStartChange (key, val) {
    let { formObj } = this.state
    formObj[key] = val
    formObj.end_at = ''
    this.setState({
      formObj
    })
  }

  render () {
    const { show } = this.props
    const { formObj } = this.state
    return (
      <AtDrawer
        show={show}
        onClose={this.closePopup.bind(this)}
        right 
        mask>
        <View className="l-search-form">
          <LFormGroup
            val={formObj.start_at}
            labelShow="no"
            valStr="start_at"
            keyStr2="开始时间"
            typeStr="date"
            bc={this.baseFormStartChange.bind(this)}
          />
          <LFormGroup
            val={formObj.end_at}
            startDate={formObj.start_at}
            labelShow="no"
            valStr="end_at"
            keyStr2="结束时间"
            typeStr="date"
            bc={this.baseFormChange.bind(this)}
          />
          <View className="lsf-op"> 
            <View className="lsf-radio" onClick={this.dealPopup.bind(this)}>搜索</View>
            <View className="lsf-radio clear" onClick={this.clearAllSearch.bind(this)}>清空搜索条件</View>
          </View>
        </View>
      </AtDrawer>
    )
  }
}