import { defineComponent, reactive } from "vue";
import styles from "./index.module.less";
import TheIcon from "/src/components/The-icon";
import { Button, Input, Space } from "@varlet/ui";
import { NButton, NInputNumber } from "naive-ui";

export default defineComponent({
	name: "TheSpeed",
	emits: ["change"],
	setup(props, { emit }) {
		const data = reactive({
			speed: 80,
			status: "",
		});
		return () => (
			<div>
				<div class={styles.speedEdit}>
					<NInputNumber
						size="large"
						v-model:value={data.speed}
						showButton={false}
						min={1}
						onUpdateValue={(val) => {
							console.log("🚀 ~ val:", val)
							data.status = /^\+?[1-9]\d*$/.test(val + "") ? "" : "error";
						}}
					>
						{{
							prefix: () => (
								<div class={styles.speedIcon}>
									<TheIcon iconClassName="icon-a-sudu-4fenyinfu" size={["2em", "1em"]} />
								</div>
							),
							suffix: () => (
								<NButton
									text
									type="primary"
									onClick={() => emit("change", { type: "speeds", value: "Q:1/4=" + data.speed })}
								>
									使用
								</NButton>
							),
						}}
					</NInputNumber>
				</div>
			</div>
		);
	},
});
