import { defineComponent, reactive } from "vue";
import styles from "./index.module.less";
import { Checkbox, CheckboxGroup, Radio, RadioGroup } from "vant";
import { ABC_DATA } from "../../home/runtime";


export default defineComponent({
	name: "Notes",
	emits: ["change"],
	setup(props, { emit }) {
		const data = reactive({
			type: "",
			clef: "[K:treble]",
			key: "C",
			meter: "4/4",
		});
		return () => (
			<div>
				<RadioGroup
					v-model={data.type}
					class={styles.noteTypes}
					onChange={() => {
						emit("change", { type: "type", value: data.type });
					}}
				>
					{ABC_DATA.types.map((item) => {
						return <Radio name={item.value}>{item.name}</Radio>;
					})}
				</RadioGroup>
				<div>
					<div>临时升降记号</div>
					{ABC_DATA.accidentals.map((item) => (
						<button onClick={() => emit("change", { type: "accidentals", value: item.value })}>
							{item.name}
						</button>
					))}
					<div>谱号</div>
					{ABC_DATA.clef.map((item) => (
						<button onClick={() => emit("change", { type: "clef", value: item.value })}>
							{item.name}
						</button>
					))}
					<div>调号</div>
					{ABC_DATA.key.map((item) => (
						<button onClick={() => emit("change", { type: "key", value: item.value })}>
							{item.name}
						</button>
					))}
					<div>拍号</div>
					{ABC_DATA.meter.map((item) => (
						<button onClick={() => emit("change", { type: "meter", value: item.value })}>
							{item.name}
						</button>
					))}
					<div>演奏技法</div>
					{ABC_DATA.play.map((item) => (
						<button onClick={() => emit("change", { type: "play", value: item.value })}>
							{item.name}
						</button>
					))}

					<div>连线</div>
					{ABC_DATA.tie.map((item) => (
						<button onClick={() => emit("change", { type: "tie", value: item.value })}>
							{item.name}
						</button>
					))}
					<div>力度记号</div>
					{ABC_DATA.dynamics.map((item) => (
						<button onClick={() => emit("change", { type: "dynamics", value: item.value })}>
							{item.name}
						</button>
					))}
				</div>
			</div>
		);
	},
});
