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,
		});
		return () => (
			<div>
				<div class={styles.speedEdit} onKeyup={(e: Event) => e.stopPropagation()}>
					<NInputNumber
						size="large"
						v-model:value={data.speed}
						min={45}
						max={270}
						onUpdate:value={() => {
							emit("change", { type: "speeds", value: "Q:1/4=" + data.speed });
						}}
					>
						{{
							prefix: () => (
								<div class={styles.speedIcon}>
									<TheIcon iconClassName="icon-a-sudu-4fenyinfu" size={["2em", "1em"]} />
								</div>
							),
						}}
					</NInputNumber>
				</div>
			</div>
		);
	},
});
