import {
	NButton,
	NCard,
	NGi,
	NGrid,
	NIcon,
	NInputNumber,
	NLayout,
	NLayoutContent,
	NLayoutSider,
	NModal,
	NPopover,
	NRadio,
	NRadioGroup,
	NScrollbar,
	NSpace,
	NTabPane,
	NTable,
	NTabs,
	useMessage,
} from "naive-ui";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { Close } from "@vicons/ionicons5";
import styles from "./index.module.less";
import { getImage } from "/src/pc/home/images";
import { ABC_DATA } from "/src/pc/home/runtime";
import TheIcon from "/src/components/The-icon";
import TheSpeed from "/src/pc/home/component/the-speed";
import { api_musicSheetCreationSave, api_subjectList } from "/src/pc/api";
export default defineComponent({
	name: "TheCreate",
	props: {
		show: {
			type: Boolean,
			default: false,
		},
	},
	emits: ["update:show", "create"],
	setup(props, { emit }) {
		const message = useMessage();
		const instruments = [
			{
				label: "竖笛",
				key: "CLARINET",
				id: 4,
				icon: getImage("icon_27_0.png"),
			},
			{
				label: "排箫",
				key: "PANPIPE",
				id: 1,
				icon: getImage("icon_27_1.png"),
			},
			{
				label: "口风琴",
				key: "HARMONICA",
				id: 5,
				icon: getImage("icon_27_2.png"),
			},
			{
				label: "陶笛",
				key: "OCARINA",
				id: 2,
				icon: getImage("icon_27_3.png"),
			},
			{
				label: "葫芦丝",
				key: "FENUGREEK_SILK",
				id: 3,
				icon: getImage("icon_27_4.png"),
			},
		];
		const formsOptions = reactive({
			subjects: [] as any[],
			loading: false,
		});
		const froms = reactive({
			subjectId: 4,
			key: ABC_DATA.key[0],
			meter: ABC_DATA.meter[0],
			speed: 80,
			measure: 30,
		});

		const handleCreate = async () => {
			formsOptions.loading = true;
			try {
				await api_musicSheetCreationSave({
					creationData: JSON.stringify({
						celf: "K:treble",
						minUnit: "L:1/4",
						meter: froms.meter,
						speed: `Q:1/4=${froms.speed}`,
						key: froms.key,
						measures: '',
					}),
					name: "",
					creationConfig: ``,
					subjectId: 1,
				});
				emit("create");
			} catch (error) {
				console.log("🚀 ~ error:", error);
			}
			formsOptions.loading = false;
		};

		const getSubjects = async () => {
			const res = await api_subjectList();
			formsOptions.subjects = res.data || [];
		};
		onMounted(async () => {
			getSubjects();
		});
		return () => (
			<NModal
				transformOrigin="center"
				autoFocus={false}
				show={props.show}
				onUpdate:show={(val) => emit("update:show", val)}
			>
				<div class={styles.setbox}>
					<div class={styles.head}>
						<div>新建乐谱</div>
						<NButton
							class={styles.close}
							quaternary
							circle
							size="small"
							onClick={() => emit("update:show", false)}
						>
							<NIcon component={Close} size={18} />
						</NButton>
					</div>
					<div class={styles.content}>
						<div class={styles.lineTitle}>声部</div>
						<NSpace style={{ paddingBottom: "45px" }}>
							{instruments.map((item) => (
								<div
									class={[styles.item, froms.subjectId === item.id && styles.itemActive]}
									onClick={() => (froms.subjectId = item.id)}
								>
									<div class={styles.itemImg}>
										<img class={styles.icon} src={item.icon} />
									</div>
									<div>{item.label}</div>
								</div>
							))}
						</NSpace>
						<NSpace style={{ paddingBottom: "45px" }}>
							<NPopover to="body" trigger="click">
								{{
									trigger: () => (
										<div>
											<div class={styles.lineTitle}>调号</div>
											<div class={styles.beatItem}>
												<div class={[styles.beatIcon]}>
													<TheIcon iconClassName={froms.key.icon} />
												</div>
												<div>{froms.key.name}</div>
											</div>
										</div>
									),
									default: () => (
										<NGrid cols={5} xGap={20} yGap={8}>
											{ABC_DATA.key.map((item) => (
												<NGi>
													<div
														class={[styles.btnItem, froms.key.value === item.value && styles.active]}
														onClick={() => (froms.key = item)}
													>
														<div class={[styles.btnItemIcon]}>
															<TheIcon iconClassName={item.icon} />
														</div>
														<div class={styles.btnItemName}>{item.name}</div>
													</div>
												</NGi>
											))}
										</NGrid>
									),
								}}
							</NPopover>

							<NPopover to="body" trigger="click">
								{{
									trigger: () => (
										<div>
											<div class={styles.lineTitle}>拍号</div>
											<div class={styles.beatItem}>
												<div class={[styles.beatIcon]}>
													<TheIcon iconClassName={froms.meter.icon} />
												</div>
												<div>{froms.meter.name}</div>
											</div>
										</div>
									),
									default: () => (
										<NGrid cols={5} xGap={50} yGap={20}>
											{ABC_DATA.meter.map((item) => (
												<NGi>
													<div
														class={[styles.btnItem, froms.meter.value === item.value && styles.active]}
														onClick={() => (froms.meter = item)}
													>
														<div class={[styles.btnItemIcon]}>
															<TheIcon iconClassName={item.icon} />
														</div>
														<div class={styles.btnItemName}>{item.name}</div>
													</div>
												</NGi>
											))}
										</NGrid>
									),
								}}
							</NPopover>
							<div>
								<div class={styles.lineTitle}>速度</div>
								<div class={styles.beatItem}>
									<NInputNumber size="large" v-model:value={froms.speed} showButton={false} min={50}>
										{{
											prefix: () => (
												<div class={styles.speedIcon}>
													<TheIcon iconClassName="icon-a-sudu-4fenyinfu" size={["2em", "1em"]} />
												</div>
											),
										}}
									</NInputNumber>
								</div>
							</div>
							<div>
								<div class={styles.lineTitle}>小节</div>
								<div class={styles.beatItem}>
									<NInputNumber size="large" v-model:value={froms.measure} min={4}></NInputNumber>
								</div>
							</div>
						</NSpace>

						<div class={styles.btns}>
							<NButton round onClick={() => emit("update:show", false)}>
								取消
							</NButton>
							<NButton
								loading={formsOptions.loading}
								round
								type="primary"
								onClick={() => handleCreate()}
							>
								确定
							</NButton>
						</div>
					</div>
				</div>
			</NModal>
		);
	},
});
