import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import React, { useEffect, useRef, useState } from "react";
import { Button, Input } from "antd";
import "./index.less";
//#region src/components/eftpos/SettlementModal/Action.tsx
/**
* @title 渲染动态内容
* @description 用于渲染从接口解析出来的元素
*/
const Action = (props) => {
	var _data$layouts2, _data$layouts3;
	const { data, showMessage = true } = props;
	const [inputValues, setInputValues] = useState({});
	const inputValuesRef = useRef(inputValues);
	useEffect(() => {
		var _data$layouts;
		if (!data) return;
		const inputObj = {};
		data === null || data === void 0 || (_data$layouts = data.layouts) === null || _data$layouts === void 0 || _data$layouts.forEach((item) => {
			var _item$elements;
			item === null || item === void 0 || (_item$elements = item.elements) === null || _item$elements === void 0 || _item$elements.forEach((element) => {
				if ((element === null || element === void 0 ? void 0 : element.type) === "input" && (element === null || element === void 0 ? void 0 : element.name)) inputObj[element === null || element === void 0 ? void 0 : element.name] = inputValuesRef.current[element === null || element === void 0 ? void 0 : element.name] || "";
			});
		});
		setInputValues(inputObj);
	}, [data]);
	useEffect(() => {
		inputValuesRef.current = inputValues;
	}, [inputValues]);
	const handleInputChange = (key, value) => {
		setInputValues((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [key]: value }));
	};
	return /* @__PURE__ */ React.createElement(React.Fragment, null, showMessage && (data === null || data === void 0 ? void 0 : data.message) && /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-settlement-modal-step-item" }, data === null || data === void 0 ? void 0 : data.message), (data === null || data === void 0 || (_data$layouts2 = data.layouts) === null || _data$layouts2 === void 0 ? void 0 : _data$layouts2.length) > 0 && (data === null || data === void 0 || (_data$layouts3 = data.layouts) === null || _data$layouts3 === void 0 ? void 0 : _data$layouts3.map((item, index) => {
		var _item$elements2;
		return /* @__PURE__ */ React.createElement("div", {
			key: index,
			className: "pisell-eftpos-settlement-modal-step-item-btns",
			style: {
				marginTop: "20px",
				width: "100%",
				display: "flex",
				justifyContent: "center"
			}
		}, item === null || item === void 0 || (_item$elements2 = item.elements) === null || _item$elements2 === void 0 ? void 0 : _item$elements2.map((element) => {
			const { key, label, type, text, name } = element;
			if (type === "button") return /* @__PURE__ */ React.createElement(Button, {
				key: key + label,
				block: true,
				className: "pisell-eftpos-settlement-modal-step-item-btn",
				onClick: () => {
					var _props$onClick;
					return props === null || props === void 0 || (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, element, { inputValues });
				}
			}, element.label);
			else if (type === "text") return /* @__PURE__ */ React.createElement("div", {
				key: key + label,
				className: "pisell-eftpos-settlement-modal-step-item-tip"
			}, label ? `${label}: ` : "", text || "");
			else if (type === "image") {
				const { name, data, encoding } = (element === null || element === void 0 ? void 0 : element.image) || {};
				const imageUrl = data ? `data:${name || "image/png"};${encoding || "base64"},${data}` : "";
				return /* @__PURE__ */ React.createElement("div", { style: {
					width: "100%",
					display: "flex",
					justifyContent: "center"
				} }, /* @__PURE__ */ React.createElement("img", {
					key: key + label,
					src: imageUrl,
					alt: label
				}));
			} else if (type === "input") return /* @__PURE__ */ React.createElement("div", { style: {
				width: "100%",
				display: "flex",
				alignItems: "center",
				flexWrap: "wrap"
			} }, /* @__PURE__ */ React.createElement("span", { style: { marginRight: "10px" } }, `${label ? `${label} ` : ""}`), /* @__PURE__ */ React.createElement(Input, {
				key: key + label,
				alt: label,
				style: {
					flex: 1,
					minWidth: "200px"
				},
				value: inputValues[name] || "",
				onChange: (e) => handleInputChange(name, e.target.value)
			}));
			return null;
		}));
	})), (data === null || data === void 0 ? void 0 : data.detailsText) && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-eftpos-settlement-modal-step-item pisell-eftpos-settlement-modal-step-item-tip",
		style: { marginTop: "24px" }
	}, data === null || data === void 0 ? void 0 : data.detailsText));
};
//#endregion
export { Action as default };
