// 数据流名称编辑通用组件
import React, { useImperativeHandle, useState } from 'react';
import { Button, Modal, Space } from 'antd';
// import { useForm } from '@qx/form-render';
import { QxIcon } from '@/components';

import _ from 'lodash-es';
import '@/styles/modal-reset.less';
import './index.less';
import { Form } from 'antd';
// import QxFormRender from '@/packages/qx-form-generator/src/form-render';

const FORM_SCHEMA: object = {
  type: 'object',
  properties: {
    id: {
      type: 'string',
      hidden: true,
    },
    name: {
      title: '名称',
      type: 'string',
      max: 20,
      placeholder: '请输入名称',
      required: true,
      props: {
        allowClear: true,
      },
      className: 'qx-data-flow-input--clear',
    },
    remark: {
      type: 'string',
      widget: 'textarea',
      title: '说明',
      placeholder: '请输入说明',
      max: 200,
      props: {
        allowClear: true,
        //   showCount: true, // 显示字数提示
      },
      className: 'qx-data-flow-input--clear',
    },
  },
};

interface NameDescriptionSettingProps {
  cRef: any;
  handleClick: (type: string, data?: any) => void; // 名称变化调用方法
}

const NameDescriptionSetting: React.FC<NameDescriptionSettingProps> = (
  props,
) => {
  const { cRef, handleClick } = props;
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);

  useImperativeHandle(cRef, () => ({
    // 暴露给父组件
    open: (values: any) => {
      setTimeout(() => {
        if (_.isEmpty(values)) {
          form.resetFields();
        } else {
          // @ts-ignore
          form.setValues(values);
        }
      }, 100);
      setVisible(true);
    },
  }));

  const onFinish = async (data: any, error: any) => {
    // console.log('表单数据:',data);
    if (error.length > 0) {
      return;
    }
    // 校验成功 保存名称、说明
    handleClick('SAVE_NAME', data);
    setVisible(false);
  };

  return (
    <div>
      <Modal
        width={480}
        title="编辑名称与说明"
        onCancel={() => setVisible(false)}
        keyboard={false}
        maskClosable={false}
        visible={visible}
        footer={
          <Space size={8}>
            <Button onClick={() => setVisible(false)}>取消</Button>
            <Button
              type={'primary'}
              onClick={() => {
                form.submit();
              }}
            >
              保存
            </Button>
          </Space>
        }
        wrapClassName={'qx-data-flow__modal qx-name-description-modal'}
        closeIcon={
          <QxIcon
            className={'qx-data-flow__modal__close'}
            type={'icon-close'}
          />
        }
        destroyOnClose
      >
        <Form
          form={form}
          schema={FORM_SCHEMA}
          onMount={() => {}}
          // @ts-ignore
          onFinish={onFinish}
          watch={{}}
        />
      </Modal>
    </div>
  );
};

export default NameDescriptionSetting;