import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import { CloseOutlined } from '@ant-design/icons';
import { useForm } from '@qx/form-render';
import { Button, Card, Divider, Drawer, Modal, Space, Spin } from 'antd';
import Draggable from 'react-draggable';
import { history, useLocation, useParams } from 'umi';
import HeadButton from './components/head-button';
import RuntimeForm from './components/runtime-form';
import { getData, getRelData, detailRelSchema } from './services';
import { handleViewFormSchema } from './util';
import _ from 'lodash';
// TODO:
import QxFormRender from '@/packages/qx-form-generator/src/form-render';
import QxIcon from '@/packages/qx-icon';

import './index.less';

const RuntimeFormPage: React.FC = () => {
  const { appCode, funCode, type } = useParams<any>();
  // @ts-ignore
  const { query } = useLocation();
  const { viewCode, id } = query;
  const cRef = useRef({
    doSave: () => {},
  });

  const handleCallback = () => {};

  return (
    <>
      <Card
        bordered={false}
        className="view-card"
        style={{ margin: '10px auto', maxWidth: 1000 }}
      >
        <RuntimeForm
          cRef={cRef}
          dataId={id}
          type={type}
          appCode={appCode}
          funCode={funCode}
          viewCode={viewCode}
          submitCallback={handleCallback}
          mode="page"
        />
        {type !== 'view' ? (
          <Button
            type="primary"
            onClick={() => {
              cRef.current.doSave();
              history.goBack();
            }}
          >
            保存
          </Button>
        ) : null}
      </Card>
    </>
  );
};

export const PageCtrlTypes = {
  add: '新增',
  edit: '编辑',
  view: '查看',
};

interface RuntimeFormDrawerProp {
  from?: 'rel' | 'button' | 'button-rel' | string | undefined;
  title?: string;
  dRef?: any; //TODO
  type: string; //add,edit,view
  dataId?: string | undefined;
  params?: Record<string, any>;
  appCode: string;
  funCode: string;
  viewCode: string;
  excessData?: any;
  childFun?: boolean;
  radioValue?: string;
  parentfunCode?: string;
  parentappCode?: string;
  modelId?: string;
  datasetItem?: any;
  successCallback?: (result: any) => void;
  onCustomBtnClick?: (btn: any, record?: any, from?: string) => void;
  referQuery?: { appCode?: string; funCode?: string; fieldName?: string };
  viewType?: string;
  parentId?: string;
  currDataItemCtrl?: any;
}

/*表单页--抽屉的形式*/
export const RuntimeFormDrawer: React.FC<RuntimeFormDrawerProp> = (props) => {
  const {
    appCode,
    funCode,
    viewCode,
    viewType,
    parentId,
    modelId,
    datasetItem,
    currDataItemCtrl,
  } = props;
  const { type, dataId } = props;
  const [headConfig, setHeadConfig] = useState<any>({});

  const [formKey, setFormKey] = useState('1');
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [isFull, setIsFull] = useState(false);
  const cRef = useRef({
    doSave: (res: (res: any) => void) => {
      console.log(res);
    },
  });
  useEffect(() => {
    setHeadConfig({});
  }, [type]);

  const handleReload = () => {
    setFormKey(`${new Date().getTime()}`);
  };

  const handleCallback = (result: {
    success: boolean;
    close?: boolean;
    reload?: any;
  }) => {
    setLoading(false);
    if (result && result.success) {
      if (result.reload) {
        handleReload();
      } else if (result.close !== false) {
        setVisible(false);
      }
      if (props.successCallback) {
        props.successCallback(result);
      }
    }
  };

  const doSave = () => {
    setLoading(true);
    const { btn } = currDataItemCtrl;
    if (btn.needConfirm && btn.confirmContent) {
      Modal.confirm({
        content: btn.confirmContent,
        cancelText: '取消',
        okText: '确定',
        onOk: () => {
          cRef.current.doSave((res) => {
            if (res?.success === false) {
              setLoading(false);
            }
          });
        },
        onCancel: () => {
          setLoading(false);
        },
      });
    } else {
      cRef.current.doSave((res) => {
        if (res?.success === false) {
          setLoading(false);
        }
      });
    }
  };

  useImperativeHandle(props.dRef, () => ({
    // 暴露给父组件
    open: () => {
      setVisible(true);
    },
    close: () => {
      setLoading(false);
      setVisible(false);
    },
    runtimeFormRef: cRef,
  }));

  // const handleSchema = (_schema) => {
  //   if (type === 'view') {
  //     setHeadConfig(_schema.ext || { autoSave: true })
  //   }
  // }

  const handleBySchemaAndData = (_schema: any, data: any) => {
    if (type === 'view') {
      if (!_schema.ext) {
        setHeadConfig({ autoSave: true });
      } else {
        const { buttons = [], ...other } = _schema.ext;
        const resButtons = buttons.filter(
          ({ flag }: { flag: string }) => data[flag],
        );
        setHeadConfig({
          buttons: resButtons,
          ...other,
        });
      }
    }
  };

  const handleBtnClick = (button: any) => {
    if (props.onCustomBtnClick) {
      props.onCustomBtnClick(button, { id: dataId }, type);
    }
  };

  useEffect(() => {
    if (!visible) {
      setIsFull(false);
      //删除富文本创建的dom元素
      let data: any = document.getElementsByClassName('qx-append-rich-none');
      data = [].slice.apply(data);
      if (data?.length) {
        for (let i = 0; i < data.length; i++) {
          document.body.removeChild(data[i]);
        }
      }
    }
  }, [visible]);

  return (
    <>
      <Drawer
        title={props.title ? props.title : PageCtrlTypes[type || 'add']}
        placement="right"
        width={isFull ? '100vw' : '1100px'}
        className={`ant-drawer-form ${
          type === 'view' ? 'ant-drawer--view' : ''
        }`}
        onClose={() => setVisible(false)}
        visible={visible}
        destroyOnClose={true}
        maskClosable={type === 'view'}
        closable={false}
        footerStyle={{ height: '56px', textAlign: 'right' }}
        footer={
          type !== 'view' || headConfig.autoSave === false ? (
            <Button type="primary" onClick={doSave} loading={loading}>
              保存
            </Button>
          ) : null
        }
        extra={
          <Space>
            {type === 'view' && props.onCustomBtnClick ? (
              <HeadButton
                buttons={headConfig.buttons}
                handleBtnClick={handleBtnClick}
              />
            ) : null}
            {/* 如有必要，可将注释放开(回滚)*/}
            {/*<Button*/}
            {/*  type={'text'}*/}
            {/*  icon={<QxIcon type={isFull ? 'icon-narrow' : 'icon-enlarge'} />}*/}
            {/*  onClick={(e: any) => {*/}
            {/*    e.target.parentNode.blur();*/}
            {/*    setIsFull(!isFull);*/}
            {/*  }}*/}
            {/*  style={{ color: 'rgba(0,0,0,0.45)', transform: 'scale(0.9)' }}*/}
            {/*/>*/}
            {/*<Button*/}
            {/*  type={'text'}*/}
            {/*  icon={<CloseOutlined />}*/}
            {/*  onClick={() => setVisible(false)}*/}
            {/*  style={{ color: 'rgba(0,0,0,0.45)', transform: 'scale(0.9)' }}*/}
            {/*/>*/}
            <div
              className={'qx-form-drawer-right-top-icon'}
              onClick={() => {
                setIsFull(!isFull);
              }}
            >
              <QxIcon type={isFull ? 'icon-narrow' : 'icon-enlarge'} />
            </div>
            <div
              className={'qx-form-drawer-right-top-icon'}
              onClick={() => setVisible(false)}
            >
              <CloseOutlined style={{ color: 'rgba(0, 0, 0, 0.45)' }} />
            </div>
          </Space>
        }
      >
        {visible ? (
          <RuntimeForm
            cRef={cRef}
            key={formKey}
            from={props.from}
            dataId={dataId}
            type={type}
            appCode={appCode}
            funCode={funCode}
            viewCode={viewCode}
            treeViewType={viewType || ''}
            parentId={parentId || ''}
            modelId={modelId}
            datasetItem={datasetItem}
            handleBySchemaAndData={handleBySchemaAndData}
            excessData={props.excessData}
            childFun={props.childFun}
            radioValue={props.radioValue}
            parentfunCode={props.parentfunCode}
            parentappCode={props.parentappCode}
            submitCallback={handleCallback}
            mode="drawer"
            handleReload={handleReload}
          />
        ) : null}
      </Drawer>
    </>
  );
};

interface RuntimeFormDialogProp extends RuntimeFormDrawerProp {
  schema?: any;
  width?: string | number;
  onSave?: (data: any) => void;
  isApprove?: any;
  onAfterSave?: (id?: string) => void;
  isRel?: any;
  customResult?: any;
  clearSchema?: () => void;
}

/*表单页--弹框的形式*/
export const RuntimeFormDialog: React.FC<RuntimeFormDialogProp> = (props) => {
  const {
    appCode,
    funCode,
    viewCode,
    schema,
    onAfterSave,
    isRel,
    type,
    dataId,
    customResult,
    clearSchema,
  } = props;
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [initialLoading, setInitialLoading] = useState<boolean>(false);
  const cRef = useRef({
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    doSave: (fun1: any, fun2: any) => {},
  });

  const handleCallback = (result: { success: boolean }) => {
    setLoading(false);
    if (result && result.success) {
      if (props.successCallback) {
        setVisible(true);
        props.successCallback(result);
      } else {
        setVisible(false);
      }
    } else {
      setVisible(false);
    }
  };

  const doSave = () => {
    setLoading(true);
    cRef.current.doSave(
      () => {},
      () => {
        setLoading(false);
      },
    );
  };

  useImperativeHandle(props.dRef, () => ({
    // 暴露给父组件
    open: () => {
      setVisible(true);
      setInitialLoading(true);
      setTimeout(() => {
        setInitialLoading(false);
      }, 200);
    },
    close: () => {
      setLoading(false);
      setVisible(false);
    },
    setLoading: (isLoading: boolean) => {
      setLoading(isLoading || false);
    },
  }));

  useEffect(() => {
    if (!visible && clearSchema) clearSchema();
  }, [visible]);

  return (
    <>
      <Modal
        title={
          <div className={'rel-more_title'}>
            {props.title ? props.title : PageCtrlTypes[type || 'add']}
          </div>
        }
        width={props.width ? props.width : '864px'}
        bodyStyle={type !== 'view' ? { padding: '20px' } : {}} // 不能加 对其详情有影响
        onCancel={() => setVisible(false)}
        onOk={doSave}
        visible={visible}
        destroyOnClose={true}
        footer={
          type !== 'view'
            ? [
                <Button onClick={() => setVisible(false)}>关闭</Button>,
                <Button type="primary" onClick={doSave} loading={loading}>
                  保存
                </Button>,
              ]
            : [<Button onClick={() => setVisible(false)}>关闭</Button>]
        }
        className={'runtime-single-modal'}
        modalRender={(node) => (
          <Draggable handle=".ant-modal-header">
            <div>{node}</div>
          </Draggable>
        )}
      >
        {initialLoading && (
          <div style={{ textAlign: 'center', paddingTop: '10px' }}>
            <Spin spinning={initialLoading} />
          </div>
        )}
        <RuntimeForm
          key={dataId}
          cRef={cRef}
          from={props.from}
          dataId={dataId}
          type={type}
          params={props.params}
          appCode={appCode}
          funCode={funCode}
          approveData={props?.isApprove}
          viewCode={viewCode}
          schema={schema}
          onSave={props.onSave}
          customResult={customResult}
          referQuery={props.referQuery}
          submitCallback={handleCallback}
          onAfterSave={onAfterSave}
          mode="dialog"
          isRel={isRel}
        />
      </Modal>
    </>
  );
};

interface RelMoreModalProp {
  cRef?: any;
}

/*表单页--关联记录(多)/子表的弹出框*/
export const RelMoreModal: React.FC<RelMoreModalProp> = (props) => {
  const form = useForm();
  // const relMoreFormRef = useRef<any>();
  const [isFullscreen, setFullscreen] = useState<boolean>(false);
  const [formSchema, setSchema] = useState<API.Schema>({});
  const [initialSchema, setInitialSchema] = useState<API.Schema>({});
  const [visible, setVisible] = useState(false);
  const [params, setParams] = useState<any>(); //点击时传递的参数

  const changeSchema = (_schema: any) => {
    const originSchema = _.cloneDeep(_schema);
    if (
      originSchema &&
      originSchema.properties &&
      Object.keys(originSchema.properties).length
    ) {
      Object.keys(originSchema.properties).forEach((it: any) => {
        const inner = originSchema.properties[it];
        if (
          inner &&
          inner.items &&
          inner.items.properties &&
          Object.keys(inner.items.properties).length
        ) {
          inner.isFullScreen = true; // 全屏状态时表格不设置最大高度
          Object.keys(inner.items.properties).forEach((o: any) => {
            if (inner.items.properties[o]?.props?.column?.width) {
              // delete inner.items.properties[o].props.column.width
              // todo 待优化 这里要考虑调整VirtualList组件的取值逻辑(没有width时，VirtualList组件默认渲染'170px')
              inner.items.properties[o].props.column.width = '220';
            }
          });
        }
      });
    }
    setSchema({ ...originSchema });
  };

  useEffect(() => {
    // console.log(formSchema)
    if (visible) {
      if (isFullscreen) {
        // 进入全屏状态时  更改表头的宽度
        changeSchema(formSchema);
      } else {
        // 退出全屏时
        setSchema({ ...initialSchema });
      }
    }
  }, [visible, isFullscreen]);

  const handleRefSchema = (_schema: any) => {
    Object.keys(_schema.properties).forEach((item) => {
      // _schema.properties[item].title = '';
      // _schema.properties[item].description = '';
      let property = _schema.properties[item];
      property.title = '';
      property.description = '';
      if (property.widget === 'relField' && property.props.render) {
        const renderData = property.props.render;
        renderData.title = '';
        renderData.description = '';
        delete property.props;
        property = { ...property, ...renderData };
      }
      _schema.properties[item] = property;
      // if(widget === 'subform'){
      //   console.log(_schema);
      //   //子表
      //     _schema.properties[item].title = '';
      //     _schema.properties[item].description = '';
      // }
      // else{
      //   //关联记录
      //   const inner = _schema.properties[item].properties
      //   if (inner) {
      //     Object.keys(inner).forEach((_it: any) => {
      //       inner[_it].title = '';
      //       inner[_it].description = '';
      //     })
      //   }
      // }
    });
  };
  const getFormData = async (_schema: any, data: any) => {
    const { appCode, funCode, viewCode, dataId, fieldName, widget } = data;
    let result;
    if (widget === 'subform') {
      result = await getData({ appCode, funCode, viewCode, id: dataId }); // 这里获取的是点击"编辑"图标时的所有数据
    } else {
      const res = await getRelData(
        fieldName,
        appCode,
        funCode,
        viewCode,
        'ADD',
        {
          data: { ids: data.idArr },
        },
      );
      result = {
        id: dataId,
        [fieldName]: data.idArr,
        [fieldName + '_info_']: res,
      };
    }
    handleViewFormSchema(
      _schema,
      result,
      {
        appCode,
        funCode,
        viewCode,
        from: undefined,
      },
      false,
    );
    form.setValues(result); // 更新值，解决子表点击数据不更新问题
    setSchema({ ..._schema });
    setInitialSchema({ ..._schema });
    setVisible(true);
  };
  const getTableSchema = async (data: any) => {
    const _schema = await getRelSchema(
      data.appCode,
      data.funCode,
      data.fieldName,
    ); //这个接口拿到的是筛选过的schema
    if (_schema) {
      handleRefSchema(_schema); //将标题和描述赋空
      getFormData(_schema, data);
    }
  };
  useImperativeHandle(props.cRef, () => ({
    open: (values: any) => {
      setSchema({});
      setInitialSchema({});
      setParams(values);
      getTableSchema(values);
    },
    close: () => {
      setVisible(false);
    },
  }));
  return (
    <div className={'rel-more'}>
      <Modal
        width={800}
        onCancel={() => setVisible(false)}
        visible={visible}
        footer={[<Button onClick={() => setVisible(false)}>关闭</Button>]}
        className={`rel-more_modal ${
          isFullscreen ? 'rel-more_modal_full' : ''
        }`}
        destroyOnClose={true}
        modalRender={(node) => (
          <Draggable
            handle=".drag-handler"
            disabled={isFullscreen}
            position={isFullscreen ? { x: 0, y: 0 } : undefined}
          >
            <div>{node}</div>
          </Draggable>
        )}
      >
        <div style={{ background: 'white' }}>
          <div
            className={'drag-handler'}
            style={{ padding: '12px 24px 0 24px' }}
          >
            <div
              style={{
                display: 'inline-block',
                fontSize: 16,
                fontWeight: 500,
                marginTop: 5,
              }}
              className={'rel-more_title'}
            >
              {params?.modalTitle}
            </div>
            <Button
              type="text"
              icon={
                <QxIcon type={isFullscreen ? 'icon-narrow' : 'icon-enlarge'} />
              }
              onClick={() => setFullscreen(!isFullscreen)}
              style={{ float: 'right', right: 32 }}
            />
          </div>
          <Divider style={{ margin: '5px 0' }} />
          {params?.widget === 'subform' ? (
            <div className={'child-form'}>
              <QxFormRender form={form} schema={formSchema} />
            </div>
          ) : null}
          {params?.widget === 'relSelector' ? (
            <div className={'rel-more-form'}>
              <QxFormRender form={form} schema={formSchema} />
            </div>
          ) : null}
        </div>
      </Modal>
    </div>
  );
};

interface RelSingleModalProp {
  cRef?: any;
}

/*表单页--关联记录(单)的弹出框*/
export const RelSingleModal: React.FC<RelSingleModalProp> = (props) => {
  const [detailSchema, setDetailSchema] = useState<any>({});
  const [dataInfo, setDataInfo] = useState<any>({}); //传过来的参数
  const [relCode, setRelCode] = useState<any>({}); //relAppCode、relFunCode
  const formRef = useRef({
    open: () => {},
    close: () => {},
  });

  const getSchema = async (data: any) => {
    if (!data.params) {
      return;
    }
    detailRelSchema(
      data.params.appCode,
      data.params.funCode,
      data.params.fieldName,
    ).then((res) => {
      // console.log(res);
      setRelCode({ relAppCode: res?.appCode, relFunCode: res?.funCode });
      setDetailSchema(res || {});
      formRef.current.open();
    });
  };

  useImperativeHandle(props.cRef, () => ({
    // 暴露给父组件
    open: (values: {}) => {
      setDataInfo(values);
      getSchema(values);
    },
    close: () => {},
  }));
  return (
    <>
      {dataInfo.relFormId ? (
        <RuntimeFormDialog
          from={'rel'}
          title={dataInfo.modalTitle ? dataInfo.modalTitle : '详情'}
          dataId={dataInfo.relFormId}
          appCode={relCode?.relAppCode}
          funCode={relCode?.relFunCode}
          // appCode={dataInfo.appCode}
          // funCode={dataInfo.funCode}
          viewCode={dataInfo.fieldName}
          params={dataInfo.params}
          schema={detailSchema}
          dRef={formRef}
          type={'view'}
        />
      ) : null}
    </>
  );
};

export default RuntimeFormPage;