@ant-design/icons#MinusOutlined TypeScript Examples

SortableItem = SortableElement(
    ({
        value,
        htmlInput,
        index,
        onChange,
        onMinus,
        describe,
    }: SortableItemProps) => {
        return (
            <Row
                className={classNames(s.row, 'arrayarguments')}
                gutter={4}
                key={index}
            >
                <Col span={22}>
                    <DragHandle />
                    <Input
                        onChange={(e) => onChange(e.target.value)}
                        prefix={<div className={s.prefix}>{index}</div>}
                        suffix={htmlInput ? <HtmlSuffix /> : null}
                        placeholder={`请输入值${describe || ''}`}
                        type="text"
                        value={value}
                    />
                </Col>
                <Col span={2} className={s.btn}>
                    {true ? (
                        <Button
                            size="small"
                            onClick={() => onMinus(index)}
                            icon={<MinusOutlined />}
                        />
                    ) : null}
                </Col>
            </Row>
        );
    }
)

DateRangePicker: React.FC<RangePickerSharedProps<Dayjs>> = (props) => {
    return (
        <DatePicker.RangePicker
            css={RANGE_PICKER_CSS}
            allowClear={false}
            suffixIcon={<DownOutlined />}
            disabledDate={(date) => date > dayjs()}
            format='DD.MM.YYYY'
            separator={<MinusOutlined />}
            {...props}
        />
    )
}

WidgetList: React.FC = React.memo(() => {
  const { t } = useTranslation(I18nKey);
  const { widgets } = useContext(Context);

  const [search, setSearch] = useState("");
  const [list, setList] = useState<IWidgetObject[]>([]);

  useEffect(() => {
    if (widgets.length) {
      setList(widgets.sort((a, b) => a.title.toUpperCase().localeCompare(b.title.toUpperCase())));
    }
  }, [widgets]);

  useLayoutEffect(() => {
    if (widgets.length) {
      const newList = widgets.sort((a, b) =>
        a.title.toUpperCase().localeCompare(b.title.toUpperCase())
      );

      if (search) {
        setList(newList.filter((w) => w.title.toUpperCase().includes(search.toUpperCase())));
      } else {
        setList(newList);
      }
    }
  }, [search, widgets]);

  return (
    <div className="ant-ext-pm__widgetList">
      <Input.Search allowClear onChange={(e) => setSearch(e.target.value)} />
      <div className="ant-ext-pm__widgetList--grid">
        <Card type={EnumTypes.ROW}>
          <PicCenterOutlined />
          <div>{t("label.row")}</div>
        </Card>
        <Card type={EnumTypes.COL}>
          <PicCenterOutlined rotate={90} />
          <div>{t("label.col")}</div>
        </Card>
        <Card type={EnumTypes.HEADING}>
          <FontSizeOutlined />
          <div>{t("label.heading")}</div>
        </Card>
        <Card type={EnumTypes.DIVIDER}>
          <MinusOutlined />
          <div>{t("label.divider")}</div>
        </Card>
      </div>
      <div className="ant-ext-pm__widgetList--grid">
        {list.length === 0 && (
          <span style={{ gridColumnEnd: "span 2" }}>{t("label.noWidgets")}</span>
        )}
        {list.map((widget) => (
          <Card key={widget.id} type={EnumTypes.TILE} widgetId={widget.id} title={widget.title}>
            {widget.icon}
            <div>{widget.title}</div>
          </Card>
        ))}
      </div>
    </div>
  );
})

export function NumberValidatorInput(
  props: NumberValidatorInputProps
): React.ReactElement {
  const { t } = useTranslation(NS_FLOW_BUILDER);

  const handleChange = (
    value: string | number,
    field: "method" | "value",
    index: number
  ): void => {
    const newValue = update(props.value, {
      $splice: [[index, 1, { ...props.value[index], [field]: value }]],
    });
    props.onChange?.(newValue);
  };

  return (
    <div>
      {props.value?.map((item, index) => (
        <div key={index} className={styles.wrapper}>
          <Input.Group compact style={{ flex: 1 }}>
            <Select
              value={item.method}
              style={{ width: 100 }}
              placeholder={t(K.COMPARE_METHOD_PLACEHOLDER)}
              onChange={(value) => handleChange(value, "method", index)}
            >
              {compareMethodList.map((name) => (
                <Select.Option key={name} value={name}>
                  {name}
                </Select.Option>
              ))}
            </Select>
            <InputNumber
              value={item.value}
              style={{ width: "calc(100% - 100px)" }}
              min={0}
              step={1}
              placeholder={t(K.COMPARE_VALUE_PLACEHOLDER)}
              onChange={(value) =>
                handleChange(value as number, "value", index)
              }
            />
          </Input.Group>
          <Button
            className={editorStyles.iconBtn}
            type="link"
            style={{ flexBasis: 30 }}
            onClick={() => props.onRemove(index)}
          >
            <MinusOutlined />
          </Button>
        </div>
      ))}
      <Button
        className={editorStyles.iconBtn}
        type="link"
        onClick={props.onAdd}
      >
        <PlusCircleOutlined />
      </Button>
    </div>
  );
}

FormDataItem: React.FC<Props> = ({ onMinus, value, order }) => {
  const { onChangeRunningData, runningData, dataPath } = useContext(FormModuleContext)
  const onChange = useCallback(
    (data: {[keys: string]: any}) => {
      if (!runningData) return;
      const operateData = cloneDeep(runningData)
      const itemPath = `${dataPath}[${order - 1}]`;
      const itemData = get(operateData, itemPath);
      const newItemData = {
        ...itemData,
        ...data
      }
      set(operateData, itemPath, newItemData);
      onChangeRunningData?.(operateData)
    },
    [dataPath, onChangeRunningData, order, runningData],
  )
  
  const [showOptions, setShowOptions] = useState(false);
  const disabled = false;
  return (
    <div className={s.root}>
      <LineItem
        label={
          <div className={s.dragwrap}>
            <span className={s.drag}>
              <DragHandle />
            </span>
            第{order}项
          </div>
        }
      >
        <Input
          disabled={disabled}
          className={s.inp}
          onChange={(e) => onChange({title: e.target.value})}
          value={value.title}
          placeholder="名称"
        />
        <Input name="rowMap"
          disabled={disabled}
          className={classNames(s.inp, s.nbl, s.nbrad)}
          onChange={(e) => onChange({dataIndex: e.target.value})}
          value={value?.dataIndex}
          placeholder="字段（必填）"
          />
        <Button
          disabled={disabled}
          className={classNames(s.btn, s.nbl, s.nbr)}
          icon={showOptions ? <CaretDownOutlined /> : <CaretRightOutlined />}
          onClick={() => setShowOptions(!showOptions)}
        />
        <Button
          disabled={disabled}
          className={s.btn}
          icon={<MinusOutlined />}
          onClick={() => onMinus?.()}
        />
      </LineItem>
      <div style={{ display: showOptions ? 'block' : 'none' }}>
        <LineItem label="">
          <SubItem value={value} onChange={onChange} />
        </LineItem>
      </div>
    </div>
  );
}

IconSymbol: FC = () => {
  return (
    <Row>
      {/*<CaretUpOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
      {/*/>*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
      {/*/>*/}
      {/*<StepBackwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      {/*<StepForwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      <StepForwardOutlined />
      <ShrinkOutlined />
      <ArrowsAltOutlined />
      <DownOutlined />
      <UpOutlined />
      <LeftOutlined />
      <RightOutlined />
      <CaretUpOutlined />
      <CaretDownOutlined />
      <CaretLeftOutlined />
      <CaretRightOutlined />
      <VerticalAlignTopOutlined />
      <RollbackOutlined />
      <FastBackwardOutlined />
      <FastForwardOutlined />
      <DoubleRightOutlined />
      <DoubleLeftOutlined />
      <VerticalLeftOutlined />
      <VerticalRightOutlined />
      <VerticalAlignMiddleOutlined />
      <VerticalAlignBottomOutlined />
      <ForwardOutlined />
      <BackwardOutlined />
      <EnterOutlined />
      <RetweetOutlined />
      <SwapOutlined />
      <SwapLeftOutlined />
      <SwapRightOutlined />
      <ArrowUpOutlined />
      <ArrowDownOutlined />
      <ArrowLeftOutlined />
      <ArrowRightOutlined />
      <LoginOutlined />
      <LogoutOutlined />
      <MenuFoldOutlined />
      <MenuUnfoldOutlined />
      <BorderBottomOutlined />
      <BorderHorizontalOutlined />
      <BorderInnerOutlined />
      <BorderOuterOutlined />
      <BorderLeftOutlined />
      <BorderRightOutlined />
      <BorderTopOutlined />
      <BorderVerticleOutlined />
      <PicCenterOutlined />
      <PicLeftOutlined />
      <PicRightOutlined />
      <RadiusBottomleftOutlined />
      <RadiusBottomrightOutlined />
      <RadiusUpleftOutlined />
      <RadiusUprightOutlined />
      <FullscreenOutlined />
      <FullscreenExitOutlined />
      <QuestionOutlined />
      <PauseOutlined />
      <MinusOutlined />
      <PauseCircleOutlined />
      <InfoOutlined />
      <CloseOutlined />
      <ExclamationOutlined />
      <CheckOutlined />
      <WarningOutlined />
      <IssuesCloseOutlined />
      <StopOutlined />
      <EditOutlined />
      <CopyOutlined />
      <ScissorOutlined />
      <DeleteOutlined />
      <SnippetsOutlined />
      <DiffOutlined />
      <HighlightOutlined />
      <AlignCenterOutlined />
      <AlignLeftOutlined />
      <AlignRightOutlined />
      <BgColorsOutlined />
      <BoldOutlined />
      <ItalicOutlined />
      <UnderlineOutlined />
      <StrikethroughOutlined />
      <RedoOutlined />
      <UndoOutlined />
      <ZoomInOutlined />
      <ZoomOutOutlined />
      <FontColorsOutlined />
      <FontSizeOutlined />
      <LineHeightOutlined />
      <SortAscendingOutlined />
      <SortDescendingOutlined />
      <DragOutlined />
      <OrderedListOutlined />
      <UnorderedListOutlined />
      <RadiusSettingOutlined />
      <ColumnWidthOutlined />
      <ColumnHeightOutlined />
      <AreaChartOutlined />
      <PieChartOutlined />
      <BarChartOutlined />
      <DotChartOutlined />
      <LineChartOutlined />
      <RadarChartOutlined />
      <HeatMapOutlined />
      <FallOutlined />
      <RiseOutlined />
      <StockOutlined />
      <BoxPlotOutlined />
      <FundOutlined />
      <SlidersOutlined />
      <AndroidOutlined />
      <AppleOutlined />
      <WindowsOutlined />
      <IeOutlined />
      <ChromeOutlined />
      <GithubOutlined />
      <AliwangwangOutlined />
      <DingdingOutlined />
      <WeiboSquareOutlined />
      <WeiboCircleOutlined />
      <TaobaoCircleOutlined />
      <Html5Outlined />
      <WeiboOutlined />
      <TwitterOutlined />
      <WechatOutlined />
      <AlipayCircleOutlined />
      <TaobaoOutlined />
      <SkypeOutlined />
      <FacebookOutlined />
      <CodepenOutlined />
      <CodeSandboxOutlined />
      <AmazonOutlined />
      <GoogleOutlined />
      <AlipayOutlined />
      <AntDesignOutlined />
      <AntCloudOutlined />
      <ZhihuOutlined />
      <SlackOutlined />
      <SlackSquareOutlined />
      <BehanceSquareOutlined />
      <DribbbleOutlined />
      <DribbbleSquareOutlined />
      <InstagramOutlined />
      <YuqueOutlined />
      <AlibabaOutlined />
      <YahooOutlined />
      <RedditOutlined />
      <SketchOutlined />
      <AccountBookOutlined />
      <AlertOutlined />
      <ApartmentOutlined />
      <ApiOutlined />
      <QqOutlined />
      <MediumWorkmarkOutlined />
      <GitlabOutlined />
      <MediumOutlined />
      <GooglePlusOutlined />
      <AppstoreAddOutlined />
      <AppstoreOutlined />
      <AudioOutlined />
      <AudioMutedOutlined />
      <AuditOutlined />
      <BankOutlined />
      <BarcodeOutlined />
      <BarsOutlined />
      <BellOutlined />
      <BlockOutlined />
      <BookOutlined />
      <BorderOutlined />
      <BranchesOutlined />
      <BuildOutlined />
      <BulbOutlined />
      <CalculatorOutlined />
      <CalendarOutlined />
      <CameraOutlined />
      <CarOutlined />
      <CarryOutOutlined />
      <CiCircleOutlined />
      <CiOutlined />
      <CloudOutlined />
      <ClearOutlined />
      <ClusterOutlined />
      <CodeOutlined />
      <CoffeeOutlined />
      <CompassOutlined />
      <CompressOutlined />
      <ContactsOutlined />
      <ContainerOutlined />
      <ControlOutlined />
      <CopyrightCircleOutlined />
      <CopyrightOutlined />
      <CreditCardOutlined />
      <CrownOutlined />
      <CustomerServiceOutlined />
      <DashboardOutlined />
      <DatabaseOutlined />
      <DeleteColumnOutlined />
      <DeleteRowOutlined />
      <DisconnectOutlined />
      <DislikeOutlined />
      <DollarCircleOutlined />
      <DollarOutlined />
      <DownloadOutlined />
      <EllipsisOutlined />
      <EnvironmentOutlined />
      <EuroCircleOutlined />
      <EuroOutlined />
      <ExceptionOutlined />
      <ExpandAltOutlined />
      <ExpandOutlined />
      <ExperimentOutlined />
      <ExportOutlined />
      <EyeOutlined />
      <FieldBinaryOutlined />
      <FieldNumberOutlined />
      <FieldStringOutlined />
      <DesktopOutlined />
      <DingtalkOutlined />
      <FileAddOutlined />
      <FileDoneOutlined />
      <FileExcelOutlined />
      <FileExclamationOutlined />
      <FileOutlined />
      <FileImageOutlined />
      <FileJpgOutlined />
      <FileMarkdownOutlined />
      <FilePdfOutlined />
      <FilePptOutlined />
      <FileProtectOutlined />
      <FileSearchOutlined />
      <FileSyncOutlined />
      <FileTextOutlined />
      <FileUnknownOutlined />
      <FileWordOutlined />
      <FilterOutlined />
      <FireOutlined />
      <FlagOutlined />
      <FolderAddOutlined />
      <FolderOutlined />
      <FolderOpenOutlined />
      <ForkOutlined />
      <FormatPainterOutlined />
      <FrownOutlined />
      <FunctionOutlined />
      <FunnelPlotOutlined />
      <GatewayOutlined />
      <GifOutlined />
      <GiftOutlined />
      <GlobalOutlined />
      <GoldOutlined />
      <GroupOutlined />
      <HddOutlined />
      <HeartOutlined />
      <HistoryOutlined />
      <HomeOutlined />
      <HourglassOutlined />
      <IdcardOutlined />
      <ImportOutlined />
      <InboxOutlined />
      <InsertRowAboveOutlined />
      <InsertRowBelowOutlined />
      <InsertRowLeftOutlined />
      <InsertRowRightOutlined />
      <InsuranceOutlined />
      <InteractionOutlined />
      <KeyOutlined />
      <LaptopOutlined />
      <LayoutOutlined />
      <LikeOutlined />
      <LineOutlined />
      <LinkOutlined />
      <Loading3QuartersOutlined />
      <LoadingOutlined />
      <LockOutlined />
      <MailOutlined />
      <ManOutlined />
      <MedicineBoxOutlined />
      <MehOutlined />
      <MenuOutlined />
      <MergeCellsOutlined />
      <MessageOutlined />
      <MobileOutlined />
      <MoneyCollectOutlined />
      <MonitorOutlined />
      <MoreOutlined />
      <NodeCollapseOutlined />
      <NodeExpandOutlined />
      <NodeIndexOutlined />
      <NotificationOutlined />
      <NumberOutlined />
      <PaperClipOutlined />
      <PartitionOutlined />
      <PayCircleOutlined />
      <PercentageOutlined />
      <PhoneOutlined />
      <PictureOutlined />
      <PoundCircleOutlined />
      <PoundOutlined />
      <PoweroffOutlined />
      <PrinterOutlined />
      <ProfileOutlined />
      <ProjectOutlined />
      <PropertySafetyOutlined />
      <PullRequestOutlined />
      <PushpinOutlined />
      <QrcodeOutlined />
      <ReadOutlined />
      <ReconciliationOutlined />
      <RedEnvelopeOutlined />
      <ReloadOutlined />
      <RestOutlined />
      <RobotOutlined />
      <RocketOutlined />
      <SafetyCertificateOutlined />
      <SafetyOutlined />
      <ScanOutlined />
      <ScheduleOutlined />
      <SearchOutlined />
      <SecurityScanOutlined />
      <SelectOutlined />
      <SendOutlined />
      <SettingOutlined />
      <ShakeOutlined />
      <ShareAltOutlined />
      <ShopOutlined />
      <ShoppingCartOutlined />
      <ShoppingOutlined />
      <SisternodeOutlined />
      <SkinOutlined />
      <SmileOutlined />
      <SolutionOutlined />
      <SoundOutlined />
      <SplitCellsOutlined />
      <StarOutlined />
      <SubnodeOutlined />
      <SyncOutlined />
      <TableOutlined />
      <TabletOutlined />
      <TagOutlined />
      <TagsOutlined />
      <TeamOutlined />
      <ThunderboltOutlined />
      <ToTopOutlined />
      <ToolOutlined />
      <TrademarkCircleOutlined />
      <TrademarkOutlined />
      <TransactionOutlined />
      <TrophyOutlined />
      <UngroupOutlined />
      <UnlockOutlined />
      <UploadOutlined />
      <UsbOutlined />
      <UserAddOutlined />
      <UserDeleteOutlined />
      <UserOutlined />
      <UserSwitchOutlined />
      <UsergroupAddOutlined />
      <UsergroupDeleteOutlined />
      <VideoCameraOutlined />
      <WalletOutlined />
      <WifiOutlined />
      <BorderlessTableOutlined />
      <WomanOutlined />
      <BehanceOutlined />
      <DropboxOutlined />
      <DeploymentUnitOutlined />
      <UpCircleOutlined />
      <DownCircleOutlined />
      <LeftCircleOutlined />
      <RightCircleOutlined />
      <UpSquareOutlined />
      <DownSquareOutlined />
      <LeftSquareOutlined />
      <RightSquareOutlined />
      <PlayCircleOutlined />
      <QuestionCircleOutlined />
      <PlusCircleOutlined />
      <PlusSquareOutlined />
      <MinusSquareOutlined />
      <MinusCircleOutlined />
      <InfoCircleOutlined />
      <ExclamationCircleOutlined />
      <CloseCircleOutlined />
      <CloseSquareOutlined />
      <CheckCircleOutlined />
      <CheckSquareOutlined />
      <ClockCircleOutlined />
      <FormOutlined />
      <DashOutlined />
      <SmallDashOutlined />
      <YoutubeOutlined />
      <CodepenCircleOutlined />
      <AliyunOutlined />
      <PlusOutlined />
      <LinkedinOutlined />
      <AimOutlined />
      <BugOutlined />
      <CloudDownloadOutlined />
      <CloudServerOutlined />
      <CloudSyncOutlined />
      <CloudUploadOutlined />
      <CommentOutlined />
      <ConsoleSqlOutlined />
      <EyeInvisibleOutlined />
      <FileGifOutlined />
      <DeliveredProcedureOutlined />
      <FieldTimeOutlined />
      <FileZipOutlined />
      <FolderViewOutlined />
      <FundProjectionScreenOutlined />
      <FundViewOutlined />
      <MacCommandOutlined />
      <PlaySquareOutlined />
      <OneToOneOutlined />
      <RotateLeftOutlined />
      <RotateRightOutlined />
      <SaveOutlined />
      <SwitcherOutlined />
      <TranslationOutlined />
      <VerifiedOutlined />
      <VideoCameraAddOutlined />
      <WhatsAppOutlined />

      {/*</Col>*/}
    </Row>
  );
}

ApiDataMap: React.FC<Props> = ({
    dataMap,
    onChange,
    description,
    title,
    overwrite,
}) => {
    const [maps, setMaps] = useState<Api['dataMap']>(dataMap);
    const [visableModal, setVisableModal] = useState<boolean>(false);
    const [mapsArg, setMapsArg] = useState<ArgumentsObject>();
    const [currentIndex, setCurrentIndex] = useState<number>();

    useEffect(() => {
        if (overwrite) {
            setMaps(dataMap?.slice(0, 1));
        } else {
            setMaps(dataMap);
        }
    }, [dataMap, overwrite]);

    const updateMaps = useCallback(
        (data: Api['dataMap']) => {
            setMaps(data);
            if (onChange instanceof Function) {
                onChange(data);
            }
        },
        [onChange]
    );

    const onPluse = useCallback(() => {
        const operateApiDataMap = [...(maps || [])];
        operateApiDataMap.push({});
        updateMaps(operateApiDataMap);
    }, [maps, updateMaps]);

    const onMinus = useCallback(
        (index: number) => {
            let operateApiDataMap = [...(maps || [])];
            operateApiDataMap = operateApiDataMap.filter(
                (_, itemIndex) => itemIndex !== index
            );
            updateMaps(operateApiDataMap);
        },
        [maps, updateMaps]
    );

    const onArgOk = useCallback(
        (data) => {
            let operateApiDataMap = [...(maps || [])];
            if (currentIndex !== undefined && data[0]) {
                operateApiDataMap[currentIndex].map = data[0];
                updateMaps(operateApiDataMap);
            }
            setVisableModal(false);
        },
        [currentIndex, maps, updateMaps]
    );

    const showArg = useCallback(
        (index: number) => {
            setCurrentIndex(index);
            const mapsArg = (maps || [])[index].map;
            setMapsArg(mapsArg || undefined);
            setVisableModal(true);
        },
        [maps]
    );

    const onChangeSource = useCallback(
        (index, e) => {
            let operateApiDataMap = [...(maps || [])];
            operateApiDataMap[index].source = e.target.value;
            updateMaps(operateApiDataMap);
        },
        [maps, updateMaps]
    );

    const onChangeTarget = useCallback(
        (index, e) => {
            let operateApiDataMap = [...(maps || [])];
            operateApiDataMap[index].target = e.target.value;
            updateMaps(operateApiDataMap);
        },
        [maps, updateMaps]
    );

    return (
        <>
            <Button
                onClick={onPluse}
                icon={<PlusOutlined />}
                type="text"
                size="small"
            >
                {title}
            </Button>
            {description ? (
                <Tooltip title={parser(description || '')}>
                    <QuestionCircleOutlined />
                </Tooltip>
            ) : null}
            {maps?.map((item, index) => (
                <Row
                    key={index}
                    gutter={4}
                    className={classNames(s.row, s.map)}
                >
                    {overwrite ? null : (
                        <>
                            <Col span={8}>
                                <Tooltip
                                    title={
                                        <div>
                                            源数据以{' '}
                                            <span style={{ color: 'red' }}>
                                                response
                                            </span>{' '}
                                            开头
                                            <br />
                                            response[key]
                                            <br />
                                            Eg:
                                            定位到原始数据中的body值response.body
                                        </div>
                                    }
                                >
                                    <Input
                                        placeholder="输入要转换的源数据"
                                        onChange={(e) =>
                                            onChangeSource(index, e)
                                        }
                                        value={item.source as any}
                                    />
                                </Tooltip>
                            </Col>
                            <Col span={8}>
                                <Tooltip
                                    title={
                                        <div>
                                            输入目标数据: <br /> 最终Api
                                            return数据为
                                            <br />
                                            {`{`}
                                            <br />
                                              &nbsp;response, <br />
                                              &nbsp;{item.target || 'target'}: {item.source ? `[ ${item.source} ]` : '[ source ]'}
                                            <br />
                                            {`}`}
                                        </div>
                                    }
                                >
                                    <Input
                                        placeholder="输入目标数据"
                                        onChange={(e) =>
                                            onChangeTarget(index, e)
                                        }
                                        value={item.target as any}
                                    />
                                </Tooltip>
                            </Col>
                        </>
                    )}
                    <Col span={overwrite ? 23 : 7}>
                        <Tooltip
                            title={
                                <div>
                                    确定转换映射关系，
                                    <br /> {`{ foo: bar }`} <br />
                                    foo=新数据 key；bar=源数据 key<br /><br />
                                    {`{`}<br />
                                    {Object.keys(item?.map?.data || {}).map(key => <div key={key}> &nbsp; {key}: {item?.map?.data[key]}</div>)}
                                    {`}`}
                                </div>
                            }
                        >
                            <Button
                                className={s.w100}
                                onClick={() => showArg(index)}
                                icon={<SettingOutlined />}
                            >
                                映射关系
                            </Button>
                        </Tooltip>
                    </Col>
                    <Col span={1}>
                        <Tooltip title={<div>移除</div>}>
                            <MinusOutlined onClick={() => onMinus(index)} />
                        </Tooltip>
                    </Col>
                </Row>
            ))}
            <ArgumentsSetting
                title="映射关系"
                dataFlexible
                visible={visableModal}
                initArgumentData={[
                    mapsArg || {
                        type: 'object',
                        describe: '',
                        fieldName: 'mapsArg',
                        name: '映射关系',
                        data: {},
                    },
                ]}
                onCancel={() => setVisableModal(false)}
                onOk={onArgOk}
                forceUpdate
            />
        </>
    );
}

ApiItem = SortableElement(
    ({
        currentIndex,
        element,
        apiData,
        onRemove,
        onChangeUrl,
        onChangeMethod,
        onChangeSetting,
        onHandleUserArg,
        onchangeDatamap,
        onchangeEntermap,
        onChangeName,
        sortable,
    }: {
        currentIndex: number;
        element: any;
        apiData?: Api[];
        onRemove?: (index: number, data: Api) => void;
        onChangeUrl: (index: number) => any;
        onChangeMethod: (index: number) => any;
        onChangeSetting: (index: number) => any;
        onHandleUserArg: (
            index: number,
            type: 'body' | 'successPublic' | 'errorPublic'
        ) => void;
        sortable?: boolean;
        onchangeDatamap: (data: Api['dataMap']) => void;
        onchangeEntermap: (data: Api['enterMap']) => void;
        onChangeName?: (index: number, value: string) => void;
    }) => {
        const item = {
            ...(apiData?.length ? apiData[currentIndex] : {}),
            ...element,
        };

        const [isEdit, setIsEdit] = useState(false);

        return (
            <div className={classNames(s.item, 'apiitem')} key={item.apiId}>
                {sortable ? <DragHandle /> : null}
                <div className={s.divide}>
                    <div className={s.title}>
                        {!isEdit ? (
                            <div>
                                {item.name || item.apiId || '接口名称'}{' '}
                                {onRemove instanceof Function ? <EditOutlined onClick={() => setIsEdit(true)} /> : null}
                            </div>
                        ) : null}
                        {isEdit ? (
                            <Row className={s.row} gutter={4}>
                                <Col span={20}>
                                    <Input
                                        style={{ width: '100%' }}
                                        type="text"
                                        size="small"
                                        value={item.name}
                                        onChange={(e) => (onChangeName instanceof Function) ? onChangeName(currentIndex, e.target.value) : null}
                                    />
                                </Col>
                                <Col span={4}>
                                    <Button onClick={() => setIsEdit(false)} style={{ width: '100%' }} size="small">确定</Button>
                                </Col>
                            </Row>
                        ) : null}
                    </div>

                    {(onRemove instanceof Function && !isEdit) ? (
                        <Button
                            size="small"
                            icon={
                                <MinusOutlined
                                    onClick={() =>
                                        onRemove(currentIndex, element)
                                    }
                                />
                            }
                        />
                    ) : null}
                </div>
                <Row className={s.row} gutter={4}>
                    <Col span={24}>
                        <Input
                            onChange={onChangeUrl(currentIndex)}
                            addonBefore={selectMethod(
                                onChangeMethod(currentIndex),
                                item.method
                            )}
                            addonAfter={selectSetting(
                                onChangeSetting(currentIndex),
                                '高级设置'
                            )}
                            value={item.url}
                            placeholder="请输入Url 接口地址"
                        />
                    </Col>
                </Row>
                {item.hideBodyInput ? (
                    <div>
                        <ApiDataMap
                            title="入参转换/映射"
                            onChange={onchangeEntermap}
                            description={item.enterDescription}
                            dataMap={item?.enterMap}
                            overwrite={true}
                        />
                    </div>
                ) : (
                    <Row className={s.row} gutter={4}>
                        <Col span={24}>
                            <Button
                                onClick={() =>
                                    onHandleUserArg(currentIndex, 'body')
                                }
                                className={s.w100}
                            >
                                入参设置
                            </Button>
                        </Col>
                    </Row>
                )}
                <ApiDataMap
                    title="结果转换/映射"
                    onChange={onchangeDatamap}
                    description={item.description}
                    dataMap={item?.dataMap}
                />
                <Divider orientation="left" plain>
                    将结果发布到全局
                </Divider>
                <Row gutter={4}>
                    <Col span={12}>
                        <Tooltip title={<div>将Api请求成功结果发布到全局</div>}>
                            <Button
                                onClick={() =>
                                    onHandleUserArg(
                                        currentIndex,
                                        'successPublic'
                                    )
                                }
                                className={s.w100}
                            >
                                success
                            </Button>
                        </Tooltip>
                    </Col>
                    <Col span={12}>
                        <Tooltip title={<div>将Api请求失败结果发布到全局</div>}>
                            <Button
                                onClick={() =>
                                    onHandleUserArg(currentIndex, 'errorPublic')
                                }
                                className={s.w100}
                            >
                                error
                            </Button>
                        </Tooltip>
                    </Col>
                </Row>
            </div>
        );
    }
)

ObjectArguments: React.FC<Props> = ({
  typeArguments,
  flexible,
  htmlInput,
  describe,
  onChange,
}) => {
  const [argumentsState, setArgumentsState] = useState<ArgumentsItem>();
  useEffect(() => {
    setArgumentsState(typeArguments);
  }, [typeArguments]);

  const addOption = useRef<any>(null);

  const onChangeValue = useCallback(
    (key: string) => (e: any) => {
      const result: anyObj = { ...argumentsState };
      result.data[key] = e.target.value;
      if (onChange instanceof Function) {
        onChange(result as ArgumentsItem);
      }
      setArgumentsState(result as ArgumentsItem);
    },
    [argumentsState, onChange]
  );

  const onAddKey = useCallback(() => {
    const result: anyObj = { ...argumentsState };
    if (addOption.current) {
      const key = addOption.current.input.value;
      if (!key) {
        const msg = `请输入属性名！`;
        console.error(msg);
        message.error(msg);
        return;
      }
      if (result.data[key] !== undefined) {
        const msg = `属性名${key}增加失败！当前对象已包含此属性`;
        console.error(msg);
        message.error(msg);
        return;
      }
      result.data[key] = null;
    }
    if (onChange instanceof Function) {
      onChange(result as ArgumentsItem);
    }
    setArgumentsState(result as ArgumentsItem);
  }, [argumentsState, onChange]);

  const onMinus = useCallback((type: string) => () => {
    const result: anyObj = { ...argumentsState };
    delete result.data[type]
    if (onChange instanceof Function) {
      onChange(result as ArgumentsItem);
    }
    setArgumentsState(result as ArgumentsItem);
  }, [argumentsState, onChange]);

  const data: any = argumentsState?.data || {};
  return (
    <>
      {flexible ? (
        <Row className={s.toolbar} gutter={4}>
          <Col span={4}>
            <div className={s.label}>新增属性</div>
          </Col>
          <Col span={16}>
            <Input ref={addOption} placeholder={describe} />
          </Col>
          <Col span={4}>
            <Button onClick={onAddKey} icon={<PlusOutlined  />}>确定</Button>
          </Col>
        </Row>
      ) : null}
      {Object.keys(data).map((key) => (
        <Row className={s.row} gutter={4} key={key}>
          <Col span={5}>
            <div className={s.label}>{key}</div>
          </Col>
          <Col span={17}>
            <Input
              onChange={onChangeValue(key)}
              suffix={htmlInput ? <HtmlSuffix /> : null}
              placeholder="value"
              type="text"
              value={data[key]}
            />
          </Col>
          <Col span={2} className={s.btn}>
            {flexible ? (
              <Button size="small" onClick={onMinus(key)} icon={<MinusOutlined />} />
            ) : null}
          </Col>
        </Row>
      ))}
    </>
  );
}

Backgrounditem: React.FC<Props> = ({
  onChange,
  defaultData,
  onMinus,
}) => {
  const [data, setData] = useState<BackgroundGroupListTypesOfStyleItems>({
    ...defaultData,
  });
  const {
    gradient,
    gradientDirections,
    imageUrl,
    positionX,
    positionY,
    sizeX,
    sizeY,
    repeat,
  } = data;
  
  // 确定当前类型
  const [imageType, setImageType] = useState(gradient ? "gradient" : "image");
  const onChangeTab = useCallback(
    (e: RadioChangeEvent) => {
      const operateData = { ...data };
      const type = e.target.value;
      if (type === "gradient") {
        delete operateData.imageUrl;
      }
      if (type === "image") {
        delete operateData.gradient;
        delete operateData.gradientDirections;
      }
      setImageType(e.target.value);
      setData(operateData);
      onChange(operateData);
    },
    [data, onChange]
  );

  useEffect(() => {
    setData(defaultData);
    if (!!defaultData.imageUrl) {
      setImageType('image');
    }
    if (!!defaultData.gradient) {
      setImageType('gradient');
    }
  }, [defaultData])

  const onChangeBackgroundImage = useCallback(
    (url) => {
      const operateData = { ...data };
      operateData.imageUrl = url;
      setData(operateData);
      onChange(operateData);
    },
    [data, onChange]
  );

  const onChangeGradient = useCallback(
    (result: BackgroundGradientTypesOfStyleItems) => {
      const operateData = { ...data };
      const { gradient, gradientDirections } = result || {};
      operateData.gradient = gradient;
      operateData.gradientDirections = gradientDirections;
      setData(operateData);
      onChange(operateData);
    },
    [data, onChange]
  );

  const onChangeRepeat = useCallback(
    (e) => {
      const operateData = { ...data };
      operateData.repeat = e;
      setData(operateData);
      onChange(operateData);
    },
    [data, onChange]
  );

  const onChangeUnitInput = useCallback(
    (key: "positionX" | "positionY" | "sizeX" | "sizeY") =>
      ([value, unit]: UnitType) => {
        const operateData = { ...data };
        operateData[key] = [value, unit || ""];
        setData(operateData);
        onChange(operateData);
      },
    [data, onChange]
  );

  const onChangeQuickPosition = useCallback(
    ([positionX, positionY]) => {
      const operateData = { ...data };
      operateData.positionX = positionX;
      operateData.positionY = positionY;
      setData(operateData);
      onChange(operateData);
    },
    [data, onChange]
  );

  /**
   * 渐变渲染
   * @returns
   */
  const renderGradient = () => (
    <GradientSlider
      onChange={onChangeGradient}
      defaultData={{ gradient, gradientDirections }}
    />
  );

  /**
   * 图片渲染
   * @returns
   */
  const renderImage = () => (
    <Row className={s.row} style={{ marginBottom: "15px" }}>
      <Col span={12}>
        <Upload
          label="背景图片"
          onChange={onChangeBackgroundImage}
          defaultImg={imageUrl}
        />
      </Col>
    </Row>
  );

  return (
    <div className={classNames(s.backgroundwrap, 'hocdragwrap')}>
      <DragHandle />
      <div className={s.divide}>
        <div className={s.title} />
        <div className={s.menu}>
          <Button size="small" onClick={onMinus} icon={<MinusOutlined />}>
            删除
          </Button>
        </div>
      </div>
      <div className={s.backgrounditem}>
        <Row className={s.row}>
          <Col span={24}>
            <Radio.Group
              defaultValue={imageType}
              className={s.tab}
              onChange={onChangeTab}
            >
              <Radio.Button value="image">图片背景</Radio.Button>
              <Radio.Button value="gradient">渐变背景</Radio.Button>
            </Radio.Group>
          </Col>
        </Row>
        {imageType === "image" ? renderImage() : null}
        {imageType === "gradient" ? renderGradient() : null}
        <Row className={s.row}>
          <Col span={12}>
            <Select
              label="平铺方式"
              value={repeat}
              optionsData={{
                "no-repeat": "不平铺",
                repeat: "平铺",
                "repeat-x": "横向平铺",
                "repeat-y": "纵向平铺",
              }}
              onChange={onChangeRepeat}
            />
          </Col>
          <Col span={12}>
            <UnitInput
              label="背景高度"
              min={0}
              max={100000}
              onChange={onChangeUnitInput("sizeY")}
              defaultValue={sizeY}
            />
          </Col>
        </Row>
        <Row className={s.row}>
          <Col span={12}>
            <QuadrangularSelect
              label="背景位置"
              defaultData={[positionX, positionY]}
              onChange={onChangeQuickPosition}
            />
          </Col>
          <Col span={12}>
            <Row className={s.row}>
              <Col span={24}>
                <UnitInput
                  label="背景宽度"
                  min={0}
                  max={100000}
                  onChange={onChangeUnitInput("sizeX")}
                  defaultValue={sizeX}
                />
              </Col>
            </Row>
            <Row className={s.row}>
              <Col span={24}>
                <UnitInput
                  label="横向位置"
                  min={0}
                  max={100000}
                  onChange={onChangeUnitInput("positionX")}
                  defaultValue={positionX}
                />
              </Col>
            </Row>
            <Row className={s.row}>
              <Col span={24}>
                <UnitInput
                  label="纵向位置"
                  min={0}
                  max={100000}
                  onChange={onChangeUnitInput("positionY")}
                  defaultValue={positionY}
                />
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </div>
  );
}

EventItem: React.FC<Props> = ({
  moduleUuid,
  dispatchedFunctions,
  argumentList,
  onChange,
  onMinus,
  onSetArg,
  canNotSetArguments
}) => {
  const [selectItem, setSelectItem] = useState<any[]>([]);
  /**
   * 设置当前被选项
   */
  useEffect(() => {
    setSelectItem([moduleUuid, dispatchedFunctions]);
  }, [moduleUuid, dispatchedFunctions]);

  const appData = useSelector((state: RootState) => state.appData);

  /**
   * 运行时可选模块清单
   */
  const [moduleList, setModuleList] = useState<ModuleListItem[]>([]);

  /**
   * 初始化运行时模块清单，
   * 仅包含有方法导出的模块
   */
  useEffect(() => {
    // 处理全局方法
    const data: ModuleListItem[] = [
      {
        name: "全局",
        uuid: "global",
        type: "global",
      },
    ];
    for (let index = 0; index < appData.length; index++) {
      const item = appData[index];
      // 检查可选模块是否有方法导出
      const exposeFunctions: EventEmitterExpose[] =
        require(`~/modules/${item.type}`).default.exposeFunctions;
      if (exposeFunctions && exposeFunctions.length > 0) {
        data.push({
          name: item.moduleName || `'未标题'-${item.moduleId}`,
          uuid: item.moduleId,
          type: item.type,
        });
      }
    }
    setModuleList(data);
  }, [appData]);

  /**
   * 运行时可选方法清单
   */
  const [functionList, setFunctionList] = useState<ExposeFunctions[]>([]);

  /**
   * 通过所有运行时模块id
   * 找出包含有方法导出的模块
   * 保存到可选模块清单
   */
  const getFunctionOptionsList = useCallback(
    // 根据被选模块获取模块方法清单
    (moduleUuid: string) => {
      // 获取模块type
      const result: ModuleListItem | undefined = moduleList.find(
        (item) => item.uuid === moduleUuid
      );
      if (!result) return;
      let exposeFunctions: EventEmitterExpose[] = [];
      if (result.type !== "global") {
        exposeFunctions = require(`~/modules/${result.type}`).default
          .exposeFunctions;
      } else {
        exposeFunctions = Output.exposeFunctions || [];
      }
      setFunctionList(exposeFunctions);
    },
    [moduleList]
  );

  // 模块id变更时根据模块id获取当前模块的方法清单
  useEffect(() => {
    getFunctionOptionsList(moduleUuid);
  }, [getFunctionOptionsList, moduleUuid]);

  /**
   * 模块被修改时，模块对应的方法要做同步修改
   */
  const onChangemoduleUuid = useCallback(
    (data: string) => {
      // 修改被选数据
      const operateData = [...selectItem];
      operateData[0] = data;
      operateData[1] = "";
      setSelectItem(operateData);
      // 获取被选模块的方法清单
      getFunctionOptionsList(data);
      // 数据变更
      if (onChange instanceof Function) {
        onChange(operateData);
      }
    },
    [selectItem, getFunctionOptionsList, onChange]
  );

  /**
   * 修改方法
   */
  const onChangeDispatchedFunctions = useCallback(
    (data: string) => {
      const operateData = [...selectItem];
      operateData[1] = data;
      setSelectItem(operateData);
      if (onChange instanceof Function) {
        onChange(operateData);
      }
    },
    [selectItem, onChange]
  );

  return (
    <Row className={classNames(s.row, 'eventitem')} gutter={4}>
      <Col span={1}>
        <DragHandle />
      </Col>
      <Col span={9}>
        <Select
          value={selectItem[0] || null}
          className={s.selecter}
          onChange={onChangemoduleUuid}
          placeholder="请选择要操作的模块"
          showSearch
          filterOption={
            (input, option) => {
              const str = option?.children?.join("").toLowerCase();
              if (str?.indexOf(input) !== -1) {
                return true;
              }
              return false;
            }
          }
        >
          {moduleList.map((item) => (
            <Select.Option
              key={item.uuid}
              value={item.uuid}
            >
              {item.name}-{item.type}
            </Select.Option>
          ))}
        </Select>
      </Col>
      <Col span={8}>
        <Select
          value={selectItem[1] || null}
          className={s.selecter}
          placeholder="请选择方法"
          onChange={onChangeDispatchedFunctions}
        >
          {functionList.map((item) => (
            <Select.Option key={item.name} value={item.name}>
              {item.description}
            </Select.Option>
          ))}
        </Select>
      </Col>
      <Col span={4} className={s.minuswrap}>
        {/** 未选择方法时不可以编辑参数 */}
        <Button
          icon={<SettingOutlined />}
          onClick={onSetArg}
          disabled={canNotSetArguments}
        >
          参数
        </Button>
      </Col>
      <Col span={2} className={s.minuswrap}>
        <Button
          size="small"
          icon={<MinusOutlined onClick={onMinus} />}
        />
      </Col>
    </Row>
  );
}

ShadowItem:React.FC<Props> = ({data, type, onMinus, onToggleShow, onChangeColor, onChangeInset, onChangeshiftRight, onChangeshiftDown, onChangeBlur, onChangeSpread}) => {
    return (
        <div className={classNames(s.shadowwrap, 'shadowwrap')}>
            <DragHandle />
            <div className={s.divide}>
              <div className={s.title} />
              <div className={s.menu}>
                <Button
                  size="small"
                  onClick={onMinus}
                  icon={<MinusOutlined />}
                >删除</Button>
              </div>
            </div>
            <div className={classNames({ [s.hidden]: data.hiddenItem }, s.content)}>
              <Row className={s.row}>
                <Col span={12}>
                  <Color
                    label="投影颜色"
                    onChange={onChangeColor}
                    defaultColor={data.color}
                  />
                </Col>
                <Col span={12}>
                  {type !== "text" ? (
                    <Row>
                      <Col span={12}></Col>
                      <Col span={12} style={{textAlign: 'right'}}>
                        <Switch
                          checkedChildren="内阴影"
                          unCheckedChildren="内阴影"
                          checked={data.inset}
                          onChange={onChangeInset}
                        />
                      </Col>
                    </Row>
                  ) : null}
                </Col>
              </Row>
              <Row className={s.row}>
                <Col span={12}>
                  <UnitInput
                    label="横向偏移"
                    min={-1000}
                    max={1000}
                    defaultValue={data.shiftRight as any}
                    onChange={onChangeshiftRight}
                  />
                </Col>
                <Col span={12}>
                  <UnitInput
                    label="纵向偏移"
                    min={-1000}
                    max={1000}
                    defaultValue={data.shiftDown as any}
                    onChange={onChangeshiftDown}
                  />
                </Col>
              </Row>
              <Row className={s.row}>
                <Col span={12}>
                  <UnitInput
                    label="模糊"
                    min={-1000}
                    max={1000}
                    defaultValue={data.blur as any}
                    onChange={onChangeBlur}
                  />
                </Col>
                <Col span={12}>
                  {type !== "text" ? (
                    <UnitInput
                      label="扩展"
                      min={-1000}
                      max={1000}
                      defaultValue={data.spread as any}
                      onChange={onChangeSpread}
                    />
                  ) : null}
                </Col>
              </Row>
            </div>
          </div>
    )
}

AddItem: React.FC<Props> = ({ dataSource, onChange, value, defaultValue }) => {
  const [formRow, setFormRow] = useState<FormRow>({});
  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields([]);
  }, [dataSource, form])

  useEffect(() => {
    const data: any = {}
    if (value) {
      for (const key in value) {
        if (Object.prototype.hasOwnProperty.call(value, key)) {
          const element = value[key] as string[] | undefined;
          if (element) {
            element.forEach((item, index) => {
              if (!data[index]) data[index] = {};
              data[index][key] = item
            })
          }
        }
      }
      
      form.setFieldsValue(data)
      setFormRow(data)
    }
  }, [form, value])


  const changeForm = useCallback(
    () => {
      const data: FormRow = form.getFieldsValue();
      const TheadName: (string | undefined)[] = [];
      const rowMap: (string | undefined)[] = [];
      const columWidth: (string | undefined)[] = [];
      Object.keys(data).forEach(key => {
        const element: FormRowItem = data[key];
        TheadName.push(element.TheadName);
        rowMap.push(element.rowMap);
        columWidth.push(element.columWidth);
      })
      onChange?.({ TheadName, rowMap, columWidth }, form)
    },
    [form, onChange],
  )

  const onAddKey = useCallback(
    () => {
      setFormRow(data => {
        const def = { ...data };
        const nextKey = Object.keys(def).length;
        def[nextKey] = { TheadName: '', rowMap: '', columWidth: '' };
        return def
      });
      setTimeout(() => {
        changeForm()
      }, 100);
    },
    [changeForm],
  )

  const onMinus = useCallback(
    (index) => () => {
      setFormRow(data => {
        const def = { ...data };
        delete def[index];
        return def
      });
      setTimeout(() => {
        changeForm()
      }, 100);
    },
    [changeForm],
  )

  const setFormFromTag = useCallback(
    (key: any, value: any) => () => {
      form.setFields([{ name: key, value }]);
      changeForm()
    },
    [changeForm, form],
  )

  const disabled = !dataSource?.length;

  return (
    <Row>
      <Col>
        <Row className={s.toolbar} gutter={4}>
          <Col span={24}>
            <Button disabled={disabled} className={s.btn} onClick={onAddKey} icon={<PlusOutlined />}>
              增加
            </Button> &nbsp;&nbsp;
            {!dataSource?.length ?
              <span className={s.info}>请先选择表格数据</span>
              : null}
          </Col>
        </Row>
      </Col>
      <Col span={24}>
        <Form form={form} onFieldsChange={changeForm}>
          {Object.keys(formRow).map((formRowKey) => <Form.Item key={formRowKey} className={s.item} >
            <Input.Group compact >
              <Form.Item
                noStyle
                name={[formRowKey, 'TheadName']}
                className={s.item}
              >
                <Input disabled={disabled} style={{ width: '33%' }} placeholder="列名" />
              </Form.Item>
              <Form.Item
                noStyle
                name={[formRowKey, 'rowMap']}
                className={s.item}
              >
                <Input disabled={disabled} style={{ width: '33%' }} placeholder="字段名{{key}}" suffix={
                  <HtmlSuffix info={
                    <>
                      <div>可用字段：</div>
                      <Space wrap>
                        {
                          Object.keys(dataSource?.[0] || {})?.length &&
                          Object.keys(dataSource?.[0] || {})?.map(key =>
                            <Tag className={s.tag} key={key} onClick={setFormFromTag([formRowKey, 'rowMap'], `{{${key}}}`)}>
                              {`{{${key}}}`}
                            </Tag>
                          )
                        }
                      </Space>
                    </>
                  } />
                } />
              </Form.Item>
              <Form.Item
                noStyle
                name={[formRowKey, 'columWidth']}
                className={s.item}
              >
                <Input disabled={disabled} style={{ width: '27%' }} placeholder="宽度 ex: 20px" />
              </Form.Item>
              <Form.Item
                noStyle
                className={s.item}
              >
                <Button disabled={disabled} onClick={onMinus(formRowKey)} icon={<MinusOutlined />} />
              </Form.Item>
            </Input.Group>
          </Form.Item>)}
        </Form>
      </Col>
    </Row>
  )
}

TableDataItem: React.FC<Props> = ({ label, onMinus, value, onChange }) => {
  const [currentdataType, setCurrentDataType] = useState<string>(value?.dataType || '');
  const [showOptions, setShowOptions] = useState(false);
  const { disabled, dataSource } = useContext(TableModuleContext);

  const onChangeValue = useCallback((data: { [keys in keyof TableDataItemValue]?: string }) => {
    onChange?.({ ...value, ...data })
  }, [onChange, value]);

  const onChangeType = useCallback(
    (e) => {
      setCurrentDataType(e)
      onChangeValue({ dataType: e, format: undefined })
    },
    [onChangeValue],
  )

  const onChangeFormat = useCallback(
    (e) => {
      onChangeValue({ format: e })
    },
    [onChangeValue],
  )


  const renderNumber = useCallback(
    () => <Select
      placeholder="请选择数据格式"
      onChange={onChangeFormat}
      className={classNames(s.format)}
      value={value?.format}
    >
      {Object.keys(dataTypeFormat.number).map(
        key =>
          <Select.Option key={key} value={key}>
            {dataTypeFormat.number[key]}
          </Select.Option>
      )}
    </Select>,
    [onChangeFormat, value?.format],
  )

  const renderDate = useCallback(
    () => <Select
      placeholder="请选择数据格式"
      className={classNames(s.format)}
      onChange={onChangeFormat}
      value={value?.format}
    >
      {Object.keys(dataTypeFormat.date).map(
        key =>
          <Select.Option key={key} value={key}>
            {dataTypeFormat.date[key]}
          </Select.Option>
      )}
    </Select>,
    [onChangeFormat, value?.format],
  )

  const onChangeImgFormat = useCallback(
    (val, type: ('width' | 'height')) => {
      const data = value?.format?.split(',') || [];
      if (type === 'width') data[0] = val || '';
      if (type === 'height') data[1] = val || '';
      onChangeFormat(data.join(','));
    },
    [onChangeFormat, value?.format],
  )


  const renderImage = useCallback(
    () => <>
      <Input
        placeholder='宽度'
        className={classNames(s.format)}
        style={{ width: '25%' }}
        onChange={e => onChangeImgFormat(e.target.value, 'width')}
        value={value?.format?.split(',')[0]} />
      <Input
        placeholder='高度'
        className={classNames(s.format)}
        style={{ width: '25%' }}
        onChange={e => onChangeImgFormat(e.target.value, 'height')}
        value={value?.format?.split(',')[1]} />
    </>,
    [onChangeImgFormat, value?.format],
  )


  return (
    <div className={s.root}>
      <LineItem label={<div className={s.dragwrap}><span className={s.drag}><DragHandle /></span>{label || '列'}</div>}>
        <Input
          disabled={disabled}
          className={s.inp}
          onChange={(e) => onChangeValue({ headName: e.target.value })}
          value={value?.headName}
          placeholder="名称"
          suffix={<HtmlSuffix />}
        />
        <Input name="rowMap"
          disabled={disabled}
          className={classNames(s.inp, s.nbl, s.nbrad)}
          onChange={(e) => onChangeValue({ rowMap: e.target.value })}
          value={value?.rowMap}
          placeholder="字段"
          suffix={
            <HtmlSuffix info={
              <>
                <div>可用字段：</div>
                <Space wrap>
                  {
                    Object.keys(dataSource?.[0] || {})?.map(key =>
                      <Tag className={s.tag} key={key} onClick={() => onChangeValue({ rowMap: `{{${key}}}` })}>
                        {`{{${key}}}`}
                      </Tag>
                    )
                  }
                </Space>
              </>
            } />
          } />
        <Button
          disabled={disabled}
          className={classNames(s.btn, s.nbl, s.nbr)}
          icon={showOptions ? <CaretDownOutlined /> : <CaretRightOutlined />}
          onClick={() => setShowOptions(!showOptions)}
        />
        <Button
          disabled={disabled}
          className={s.btn}
          icon={<MinusOutlined />}
          onClick={() => onMinus?.()}
        />
      </LineItem>
      <div style={{ display: showOptions ? 'block' : 'none' }}>
        <LineItem label="">
          <LineItem label="数据类别">
            <div className={s.datatype}>
              <Select
                className={classNames(s.nbrad)}
                style={{ flex: 'auto' }}
                disabled={disabled}
                value={value?.dataType}
                placeholder="默认为字符"
                onChange={onChangeType}>
                {
                  Object.keys(dataType).map(key => <Select.Option key={key} value={key}>{dataType[key]}</Select.Option>)
                }
              </Select>
              {currentdataType === 'number' ? renderNumber() : null}
              {currentdataType === 'date' ? renderDate() : null}
              {currentdataType === 'image' ? renderImage() : null}
            </div>
          </LineItem>
          <LineItem label="列宽">
            <Input disabled={disabled} placeholder="ex:50%或50px, 默认自动"
              value={value?.columWidth}
              onChange={(e) => onChangeValue({ columWidth: e.target.value })}
            />
          </LineItem>
        </LineItem>
      </div>
    </div>
  )
}