import React, {
  useEffect,
  useImperativeHandle,
  useMemo,
  useState,
} from 'react';
import { Button, Modal, Space, Table, Typography } from 'antd';
import { QxIcon } from '@/components';
import { isEmpty } from 'lodash-es';
import { handleWindowOpen } from '@qx/utils';
// import {} from '@/src/services/data-flow';
import { getIcon } from '@/utils';
import { useDebounceEffect } from 'ahooks';
import { useFlowTableScrollY } from '@/hooks';

const { Text } = Typography;

import '@/styles/modal-reset.less';
import cls from 'classnames';
import commonStyles from '@/page/view/index.module.less';
import './index.less';

const prefix = 'qx-flow-setting';

interface FlowQuoteSettingProps {
  cRef: any;
}

interface ParamsDataProps {
  id?: string;
  name?: string;
  pageSize?: number;
  pageNum?: number;
}

const FlowQuoteSetting: React.FC<FlowQuoteSettingProps> = (props) => {
  const { cRef } = props;
  const [visible, setVisible] = useState(false);
  const [paramsData, setParamsData] = useState<ParamsDataProps>({
    id: '',
    name: '',
    pageSize: 10,
    pageNum: 1,
  });
  const [pageData, setPageData] = useState<any[]>([]);
  // 表格是否添加scroll 属性
  const [isScrollY, setIsScrollY] = useState<boolean>(false);
  const [tableLoading, setTableLoading] = useState<boolean>(true); // 表格loading

  useImperativeHandle(cRef, () => ({
    // 暴露给父组件
    open: (values: ParamsDataProps) => {
      if (isEmpty(values)) {
        return;
      }
      // 打开弹框 传参
      setParamsData({
        id: values?.id || '',
        name: values?.name || '',
      });
      setVisible(true);
    },
  }));

  // list 操作
  const handleClick = (
    type: string,
    data?: any,
    e?: React.MouseEvent<HTMLElement, MouseEvent>,
  ) => {
    const { host, pathname, protocol, hash } = location;
    if (!!e) {
      e.stopPropagation();
    }
    console.log('type ==== ', type, data);

    switch (type) {
      case 'JUMP':
        // 功能名称 跳转 详情
        // handleWindowOpen(
        //   `${protocol}//${host}${pathname}#/design/data-flow?appId=${data?.appId || ''}&funCode=${
        //     data?.funCode || ''
        //   }&funId=${data?.funId || ''}&type=edit&processId=${data.id}&returnUrl=${hash}`,
        //   '_self',
        // );
        break;
      default:
        break;
    }
  };

  const cols = useMemo(() => {
    return [
      {
        title: () => {
          return (
            <span className={cls(commonStyles[`${prefix}__col-title`])}>
              应用名称
            </span>
          );
        },
        dataIndex: 'name',
        width: 230,
        className: 'qx-flow-table-cell',
        render: (text: any, row: any) => {
          return (
            <span
              className={cls(commonStyles[`${prefix}__colspan`])}
              style={{ width: '100%' }}
            >
              <Text
                style={{
                  marginRight: 4,
                  maxWidth: '100%',
                }}
                ellipsis={{ tooltip: text || '' }}
              >
                {text}
              </Text>
            </span>
          );
        },
      },
      {
        title: () => {
          return (
            <span className={cls(commonStyles[`${prefix}__col-title`])}>
              表单名称
            </span>
          );
        },
        dataIndex: 'curVersion',
        render: (text: any, row: any) => {
          return (
            <span
              className={cls(commonStyles[`${prefix}__colspan`])}
              style={{ width: '100%' }}
            >
              <Text
                style={{
                  marginRight: 4,
                  maxWidth: '100%',
                }}
                ellipsis={{ tooltip: text || '' }}
              >
                {text}
              </Text>
            </span>
          );
        },
        width: 160,
        className: 'qx-flow-table-cell',
      },
      {
        title: () => {
          return (
            <span className={cls(commonStyles[`${prefix}__col-title`])}>
              使用功能
            </span>
          );
        },
        dataIndex: 'latestConfigStatus',
        className: 'qx-flow-table-cell',
        render: (text: any, row: any) => {
          return (
            <span
              className={cls(commonStyles[`${prefix}__colspan`])}
              style={{ width: '100%' }}
            >
              <Text
                style={{
                  marginRight: 4,
                  maxWidth: '100%',
                }}
                ellipsis={{ tooltip: text || '' }}
              >
                {text}
              </Text>
            </span>
          );
        },
        width: 120,
      },
      {
        title: () => {
          return (
            <span className={cls(commonStyles[`${prefix}__col-title`])}>
              功能名称
            </span>
          );
        },
        dataIndex: 'updatedAt',
        width: 140,
        className: 'qx-flow-table-cell',
        render: (text: any, row: any) => {
          // console.log('流程使用情况 === 1', text);
          // console.log('流程使用情况 === 2', row);

          return (
            <span
              className={cls(commonStyles[`${prefix}__colspan`])}
              style={{ width: '100%' }}
            >
              <Button
                type="link"
                size="small"
                icon={getIcon('icon-field-rel')}
                onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) =>
                  handleClick('FLOW_QUOTE', row, e)
                }
              >
                等待提供字段
              </Button>
            </span>
          );
        },
      },
    ];
  }, [JSON.stringify(paramsData), JSON.stringify(pageData)]);

  // 查询list
  const handleSearch = (params?: ParamsDataProps) => {
    setTableLoading(true);
    let _cloneParams: ParamsDataProps = {};
    if (isEmpty(params)) {
      _cloneParams = { ...paramsData };
    } else {
      _cloneParams = { ...paramsData, ...params };
    }
    setParamsData(_cloneParams);
    // @ts-ignore
    // window.qx.actions.cancelToken(); // 多次请求 取最新请求 其他取消
    /*getListProcess(_cloneParams)
    .then((res: any) => {
      // 处理数据 符合表格渲染格式
      const _cloneList: any[] = [];
      const getColumnList = (data: any[]) => {
        data.forEach((item: any) => {
          _cloneList.push(_.cloneDeep(item));
          if (!!item?.processes?.length) {
            getColumnList(item?.processes);
          }
        });
      };
      getColumnList(_.cloneDeep(res || []));
      setPageData(_.cloneDeep(_cloneList));
      // setExpandedKeys(_cloneList.map((item: any) => item.key));
      setTableLoading(false);
    })
    .catch(() => {
      console.warn('数据列表获取失败');
      setPageData([]);
      setTableLoading(false);
    });*/
  };

  // 表格滚动高度获取
  const [scrollY] = useFlowTableScrollY({
    columns: cols,
    listProps: {
      paramsData,
      pageData,
    },
    hasPagination: true,
  }) as any[];

  useEffect(() => {
    if (!paramsData?.id) {
      return;
    }
    setPageData([]);
    setTableLoading(false);

    // handleSearch({id: paramsData?.id});
  }, [paramsData]);

  useDebounceEffect(
    () => {
      if (scrollY >= 100 && !!pageData?.length) {
        const itemHeaderHeight = 41;
        setIsScrollY(pageData.length * itemHeaderHeight >= scrollY);
      }
    },
    [pageData, scrollY],
    { wait: 200 },
  );

  return (
    <div>
      <Modal
        width={720}
        centered
        title="流程使用情况"
        onCancel={() => setVisible(false)}
        visible={visible}
        footer={null}
        closeIcon={
          <QxIcon
            className={'qx-data-flow__modal__close'}
            type={'icon-close'}
          />
        }
        destroyOnClose
        wrapClassName={'qx-data-flow__modal qx-flow-quote-container'}
      >
        <section className={'qx-flow-quote__header'}>
          【{paramsData?.name || ''}】正在使用中
        </section>
        <div
          className={cls(
            commonStyles[`${prefix}-container`],
            'qx-data-flow-table',
          )}
        >
          <Table
            loading={tableLoading}
            columns={cols}
            dataSource={pageData}
            scroll={
              isScrollY
                ? {
                    x: '100%',
                    y: scrollY,
                  }
                : { x: '100%' }
            }
            size={'small'}
            bordered
            rowKey={(record: any) => {
              return `${record?.type || ''}${record?.id || ''}${Math.random()
                .toString(36)
                .replaceAll(/[0-9]/g, '')
                .slice(2, 4)}`;
            }}
          />
        </div>
      </Modal>
    </div>
  );
};

export default FlowQuoteSetting;