import React from 'react'
import css from './searchDate.scss'
import ZhPicker from './zhPicker'
import EnPicker from './enPicker'

export default class SearchDate extends React.Component {
  constructor(props) {
    super(props)
    // console.log('date',props)
    this.state = {
      fold: true,
      //当前选择的时间显示
      timeChoose: props.searchTime.label || props.lang.anyTime,
      timeS: "",
      timeE: ""
    }
    this.date = React.createRef()
  }

  componentDidMount() {
    document.addEventListener('click', this.onOutsideClick, false)
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onOutsideClick, false)
  }

  onOutsideClick = (e) => {
    if (e.target === document.querySelector('html')) {
      // 鼠标点击后移出屏幕松开
      return
    }
    if (!this.date.current.contains(e.target)) {
      // 鼠标点击到了搜索以外范围
      this.onFold()
    }
  }

  //false显示下拉框
  onSpread = () => {
    this.setState({
      fold: false
    })
  }

  //将下拉框隐藏
  onFold = () => {
    this.setState({
      fold: true
    })
  }

  onToggle = () => {
    this.setState((old) => (
        {fold: !old.fold}
    ))
  }


  sendTime = (text, type,s,e) => {
    this.setState({
      fold: true,
      timeChoose: text
    })
    // console.log("3333333333",type,s,e)

    const {chooseTime} = this.props;
    chooseTime(type,s,e,text)


  }

  getDefault = () => {
    const { lang } = this.props
    const list = [
      {
        type: 'normal',
        label: lang.anyTime,
        start: null,
        end: null,
      },
      {
        type: 'day',
        label: lang.today,
        start: null,
        end: null,
      },
      {
        type: 'week',
        label: lang.thisWeek,
        start: null,
        end: null,
      },
      {
        type: 'month',
        label: lang.thisMonth,
        start: null,
        end: null,
      },
      {
        type: 'year',
        label: lang.thisYear,
        start: null,
        end: null,
      },
    ]

    const li = list.map((v) => {
      return <li key={v.type} className="s-bg-li" onClick={() => {
        this.sendTime(v.label, v.type)
      }}>
        {v.label}
      </li>
    })

    return <ul className={css.default}>{li}</ul>
  }


  //选择自定义时间
  timeOnChange = (value, dateString) => {
    let newTime = [];
    for (let j = 0; j < dateString.length; j++) {
      let timeStr = dateString[j].replace(/-/g, "");

      newTime.push(timeStr);
    }

    this.setState({
      timeS: newTime[0],
      timeE: newTime[1],
      timeChoose:dateString[0]+ "~" +dateString[1]
    })


  }

  //点击自定义的确定按钮
  timeSelf=()=>{
    const {timeS,timeE,timeChoose} = this.state;
    this.sendTime(timeChoose, "self",timeS,timeE);
  }


  getCustom = () => {
    const {lang} = this.props
    return <div className={`${css.custom} s-b-default`}>
      <span className={css.tip}>{lang.anyTime}</span>
      {lang.language === 'en' ? <EnPicker dataInput={this.date.current} timeOnChange={this.timeOnChange} />
        : <ZhPicker dataInput={this.date.current} timeOnChange={this.timeOnChange} />
      }
      <button className={`${css.btn} btn btn-primary`} onClick={()=>{this.timeSelf()}}>{lang.confirm}</button>
    </div>
  }

  render() {
    const {fold, timeChoose} = this.state;
    return (
        <div className={`${css["ks-search-date"]} ${fold ? '' : css.spread}`} ref={this.date}>
          <div className={`${css.date} s-b-default s-br-normal`} onClick={this.onToggle}>
            <span>{timeChoose}</span>
            <i className="ks-iconfont ks-icon-delta s-hint"/>
          </div>
          <div className={`${css.select} s-bg-container s-shadow-select s-br-normal`}>
            {this.getDefault()}
            {this.date.current ? this.getCustom() : null}
          </div>
        </div>
    )
  }
}