const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_types = require("./types.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
//#region src/components/eftposPay/mx51/Action.tsx
/**
* @title 渲染动态内容
* @description 用于渲染从接口解析出来的元素
*/
const Action = (props) => {
	var _data$layouts2, _data$layouts3;
	const { data, showMessage = true, cancelDisabled = false } = props;
	const [inputValues, setInputValues] = (0, react.useState)({});
	const inputValuesRef = (0, react.useRef)(inputValues);
	(0, react.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]);
	(0, react.useEffect)(() => {
		inputValuesRef.current = inputValues;
	}, [inputValues]);
	const handleInputChange = (key, value) => {
		setInputValues((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [key]: value }));
	};
	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, showMessage && (data === null || data === void 0 ? void 0 : data.message) && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__eft-pay-step-item pisell-lowcode__eft-pay-step-item-tip" }, 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.default.createElement("div", {
			key: index,
			className: "pisell-lowcode__eft-pay-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.default.createElement(antd.Button, {
				key: key + label,
				block: true,
				className: "pisell-lowcode__eft-pay-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 });
				},
				disabled: key === require_types.EButtonKeyType.CancelTransaction ? cancelDisabled : false
			}, element.label);
			else if (type === "text") return /* @__PURE__ */ react.default.createElement("div", {
				key: key + label,
				className: "pisell-lowcode__eft-pay-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.default.createElement("div", { style: {
					width: "100%",
					display: "flex",
					justifyContent: "center"
				} }, /* @__PURE__ */ react.default.createElement("img", {
					key: key + label,
					src: imageUrl,
					alt: label
				}));
			} else if (type === "input") return /* @__PURE__ */ react.default.createElement("div", { style: {
				width: "100%",
				display: "flex",
				alignItems: "center",
				flexWrap: "wrap"
			} }, /* @__PURE__ */ react.default.createElement("span", { style: { marginRight: "10px" } }, `${label ? `${label} ` : ""}`), /* @__PURE__ */ react.default.createElement(antd.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.default.createElement("div", {
		className: "pisell-lowcode__eft-pay-step-item pisell-lowcode__eft-pay-step-item-tip",
		style: { marginTop: "24px" }
	}, data === null || data === void 0 ? void 0 : data.detailsText));
};
//#endregion
exports.default = Action;
