import React, { useState } from 'react';
import FromChooseItem from '@/components/fromChooseItem'
import clsx from 'clsx'
import { Button } from 'antd'
import styles from './style.module.less'
export default function SearchHeader(props) {
  const { searchList, valueData, onChange, onSearch, onReset, handle, btnWidth = '88px' } = props
  const [ showMore, setShowMore ] = useState(false)
  function drawLine(list, type) {
    if(Object.prototype.toString.call(list[0]) === "[object Object]") {
      return <FromChooseItem
        renderFormList={list}
        valueData={valueData}
        onChange={(key, e) => onChange(key, e, type === 'default')}
      />
    } else {
      return list.map((t, idx) => <FromChooseItem
          key={idx}
          renderFormList={t}
          vsToFormLineTop={idx}
          valueData={valueData}
          onChange={(key, e) => onChange(key, e, type === 'default')}
        />
      )
    }
  }
  return (
    <div className={styles.searchHeader}>
      <div className={clsx(styles.defaultBox, styles.spaceBetween)}>
        <div className={styles.content}>
          {/*  */}
          {drawLine(searchList.default, 'default')}
        </div>
        <div className={styles.btn} style={{ width: btnWidth }}>
          {searchList.adv &&
            <Button type="link" onClick={() => setShowMore(!showMore)}>
              { showMore? '收起筛选' : '更多筛选' }
            </Button>
          }
          {handle}
        </div>
      </div>
      {
        showMore && (
          <div className={styles.advBox}>
            <div className={styles.content}>
              {/* <FromChooseItem
                renderFormList={searchList.adv}
                valueData={valueData}
                onChange={(key, e) => onChange(key, e)}
              /> */}
              {drawLine(searchList.adv, 'adv')}
            </div>
            <div className={styles.btnList}>
              <Button type="primary" onClick={() => onSearch()}>
                筛选
              </Button>
              <Button className={styles.marginLeft} onClick={() => onReset()}>
                重置
              </Button>
            </div>
          </div>
        )
      }
    </div>
  );
}
