import { getComUi } from '../../FormComponent'
import { Form, Button, Row, Col, Space } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import styles from './search.module.less';
import React from "react";

const SearchBox = ({ SearchBoxSchema: searchList, useForm, onFinish, onValuesChange, ...data }: any) => {
  const [form] = useForm || Form.useForm();
  const [BtnSpan, setBtnSpan] = useState<any>(24);
  const [isOpen, setIsOpen] = useState(false);
  const [allSpen, setAllSpan] = useState<number>(0);
  const [showIndex, setShowIndex] = useState<number>(0);

  const AllShow = () => {
    let AndSpan = 0;
    for (const i of searchList) {
      if (AndSpan + i.span > 24) {
        AndSpan = i.span;
      } else {
        AndSpan += i.span;
      }
    }
    setShowIndex(searchList.length);
    const span = 24 - (AndSpan % 24) >= 6 ? 24 - (AndSpan % 24) : 24;
    setBtnSpan(span);
    setIsOpen(true);
  };

  const oneShow = (): any => {
    let AndSpan = 0;
    let index = 0;
    for (let i = 0; i < searchList.length; i++) {
      AndSpan += searchList[i].span;
      index = i;
      if (AndSpan > 18) {
        index = i - 1;
        AndSpan -= searchList[i].span;
        break;
      }
    }
    const span = 24 - (AndSpan % 24) >= 6 ? 24 - (AndSpan % 24) : 24;
    setBtnSpan(span);
    setShowIndex(index);
    setIsOpen(false);
  };

  useEffect(() => {
    let count = 0;
    for (const i of searchList) {
      count += i.span;
    }
    setAllSpan(count);
    oneShow();
  }, [searchList]);

  return <div id="SearcFormWapper"
    className={styles.form_box}>
    <Form
      form={form}
      className={styles.query_filter}
      onFinish={onFinish}
      onValuesChange={onValuesChange}
      {...data}
    >
      <Row>
        {
          searchList.map((item: any, index: any) => {
            return <Col
              className={`${styles.query_filter_item} ${showIndex < index ? styles.hidden : ''
                }`}
              key={item.$id}
              span={item.span}
            >
              {item.content ? item.content : getComUi({ ...item, componentType: 'FormItem' })}
            </Col>
          })
        }
        <Col
          span={BtnSpan}
          className={styles.query_filter_item}
          style={{ justifyContent: 'flex-end', display: 'flex' }}
        >
          <Space size={10}>
            <Button htmlType="button" onClick={async () => {
              await form.resetFields()
              onFinish()
            }}>
              重置
            </Button>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            {allSpen > 18 ? (
              <Button
                type="link"
                className={styles.open}
                onClick={() => {
                  isOpen ? oneShow() : AllShow();
                }}
              >
                {isOpen ? (
                  <>
                    收起
                    <UpOutlined />
                  </>
                ) : (
                  <>
                    展开
                    <DownOutlined />
                  </>
                )}
              </Button>
            ) : null}
          </Space>
        </Col>
      </Row>
    </Form>
  </div>
}

export default SearchBox