import { FloatingBubble, Popup, Space } from 'antd-mobile';
import XForm from '../XForm';
import XList, { XListConfig } from '../XList';
import { SearchOutline } from 'antd-mobile-icons';
import { useXFormList } from './useXFormList';
import { useAsyncEffect } from 'ahooks';
import React from 'react';

interface Props {
  str: string | LogicProps; //参数
  name?: string;
  actions?: Array<any>; // 操作
  addCondition?: any;  // 条件
  shouldLoad?: boolean; // 是否持续加载,默认true
  module?:string
  config?: XFormListConfig // 配置
}
export interface LogicProps {
  logic: string;
  logicParam: object;
}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface XFormListConfig extends XListConfig {
  
}
const XFormList: React.FC<Props> = ({ str, addCondition, actions = [], shouldLoad = true, config,module='af_system' }) => {
  const {
    formConfig,
    queryList,
    totalPage,
    visible,
    setVisible,
    condition,
    loadData,
    initData
  } = useXFormList(str, addCondition,module)


  useAsyncEffect(async () => {
    await initData();
  }, [str, addCondition]);

  return (
    <Space direction="vertical" style={{ width: '100%', height: '100%' }}>
      <>
        {/* 数据列表 */}
        <XList
          queryParamsName={str}
          loadData={loadData}
          columnJson={formConfig.columnJson}
          queryList={queryList}
          shouldLoad={shouldLoad}
          condition={condition}
          totalPage={totalPage}
          actions={actions}
          config={config}
        />
        {/* 下方搜索条件弹出层 */}
        <Popup
          visible={visible}
          onMaskClick={() => {
            setVisible(false);
          }}
          bodyStyle={{
            overflowY: 'scroll',
            borderTopLeftRadius: '8px',
            borderTopRightRadius: '8px',
            maxHeight: '70vh',
          }}
        >
          <div style={{ height: '100%', overflowY: 'scroll', padding: '20px' }}>
            <XForm loadData={loadData} formJson={formConfig.formJson} />
          </div>
        </Popup>
      </>
      {/* 搜索气泡 */}
      <FloatingBubble
        style={{
          '--initial-position-bottom': '10vw',
          '--initial-position-right': '5vw',
          '--size': '13vw'
        }}
        onClick={() => setVisible(true)}
      >
        <SearchOutline fontSize={'10vw'} />
      </FloatingBubble>
    </Space>
  );
};

export default XFormList;