import React, { useState } from 'react';
import clsx from 'clsx'
import MainTitle from './components/mainTitle'
import SearchHeader from './components/searchHeader'
import _ from 'lodash';
// import styles from './style.less'
import styles from './style.module.less'
// import './index.less'

let timeout = null
export default function PageHeader(props) {
  const {
    btnWidth,
    title,
    btnText,
    descText,
    accessTime,
    btnClick,
    searchList,
    onSearch,
    valueData = {},
    descHeight = '35px',
    handle // 按钮
  } = props
  const [data, setData] = useState(valueData)
  const onChange = (key, value, hot) => {
    setData({...data, [key]: value })
    if(hot) {
      if(timeout) clearTimeout(timeout)
      timeout = setTimeout(() => {
        onSearch({...data, [key]: value })
      }, 500)
    }
  }
  const onReset = () => {
    let resetData = {}
    searchList.default.forEach(t => {
      resetData[t.key] = data[t.key]
    })
    searchList.adv.forEach(t => {
      resetData[t.key] = null
    })
    setData(resetData)
    onSearch(resetData)
  }
  return (
    <div className='com-pageHeader'>
      {
        title &&  <MainTitle
          title={title}
          btnText={btnText}
          accessTime = {accessTime ? accessTime : ''}
          btnClick={() => btnClick()}
        />
      }
      {
        searchList &&
        <SearchHeader
          searchList={searchList}
          valueData={data}
          handle={handle}
          btnWidth={btnWidth}
          onChange={(key, e, hot) => onChange(key, e, hot)}
          onSearch={() => onSearch(data)}
          onReset={() => onReset()}
        />
      }
      {
        descText && <div className={clsx(styles.descText, 'ellipsis')} style={{ height: descHeight }}>{descText}</div>
      }
    </div>
  );
}