import React from 'react';
// import { history } from '@@/core/history';
import { useSearchParams } from '@/hooks';
import { useTitle } from 'ahooks';
// @ts-ignore;
import { handleWindowOpen } from '@qx/utils';
import { FlowHeader, QxIcon } from '@/components';
import FlowSetting from '../components/flow-setting';

// 样式
import cls from 'classnames';
import styles from '@/page/view/index.module.less';
const prefix = 'qx-data-flow';

const DataFlowView: React.FC = ({}) => {
  const [query] = useSearchParams<any>();
  const {
    appId, // 应用id
    funCode, // 表单id
    returnUrl, // 来自页面跳转返回可跳转
  } = query;

  // 添加标题
  if (!!appId && !funCode) {
    useTitle('数据流');
  }

  const handleClick = (type: string) => {
    const { host, pathname, protocol, hash } = location;

    switch (type) {
      case 'RETURN':
        // 返回上一页
        if (!!returnUrl) {
          const { host, pathname, protocol } = location;
          // 返回上一页
          handleWindowOpen(
            `${protocol}//${host}${pathname}${returnUrl}`,
            '_self',
          );
        } else {
          // history.goBack();
          window.history.back();
        }
        break;
      case 'ADD':
        // 新建数据流
        handleWindowOpen(
          `${protocol}//${host}${pathname}#/designer?appId=${
            appId || ''
          }&type=edit&returnUrl=${hash}`,
          '_self',
        );
        break;
      default:
        break;
    }
  };

  return (
    <div className={cls(styles[prefix])}>
      <FlowHeader handleClick={handleClick} type={'FLOW'} />
      <section className={cls(styles[`${prefix}__main`])}>
        <section className={cls(styles['main-content'])}>
          <FlowSetting
            params={{
              appId: appId || '',
              funCode: funCode || '',
            }}
          />
        </section>
      </section>
    </div>
  );
};

export default DataFlowView;