notation/src/pc/create/component/the-create/index.tsx

import {
	NButton,
	NCard,
	NCheckbox,
	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 { encodeUrl } from "/src/utils";
const instruments = [
	{
		label: "竖笛",
		key: "recorder",
		id: 4,
		icon: getImage("icon_27_0.png"),
		range: {
			min: 36,
			max: 62,
		},
	},
	{
		label: "排箫",
		key: "pan_flute",
		id: 1,
		icon: getImage("icon_27_1.png"),
		range: {
			min: 31,
			max: 66,
		},
	},
	{
		label: "口风琴",
		key: "piccolo",
		id: 5,
		icon: getImage("icon_27_2.png"),
		range: {
			min: 41,
			max: 72,
		},
	},
	{
		label: "陶笛",
		key: "blown_bottle",
		id: 2,
		icon: getImage("icon_27_3.png"),
		range: {
			min: 33,
			max: 53,
		},
	},
	{
		label: "葫芦丝",
		key: "clarinet",
		id: 3,
		icon: getImage("icon_27_4.png"),
		range: {
			min: 40,
			max: 57,
		},
	},
];
export const notationInstruments = instruments;
export default defineComponent({
	name: "TheCreate",
	props: {
		show: {
			type: Boolean,
			default: false,
		},
	},
	emits: ["update:show", "create"],
	setup(props, { emit }) {
		const message = useMessage();

		const formsOptions = reactive({
			loading: false,
		});
		const froms = reactive({
			key: ABC_DATA.key[0],
			meter: ABC_DATA.meter[0],
			speed: 80,
			measure: 30,
			subjectCode: "recorder",
			subjectId: 4,
		});

		const handleCreate = async () => {
			if (!froms.speed) {
				message.warning("请输入开始速度");
				return;
			}
			if (!froms.measure) {
				message.warning("请输入小节数量");
				return;
			}
			formsOptions.loading = true;
			handleOpenNotaion({
				meter: froms.meter.value,
				speed: `Q:1/4=${froms.speed}`,
				key: froms.key.value,
				subjectCode: froms.subjectCode,
				measure: froms.measure,
				subjectId: froms.subjectId
			});
			emit("create");
			formsOptions.loading = false;
		};

		const handleOpenNotaion = (data: any) => {
			const url = `${location.origin}/notation/#/?v=${Date.now()}&config=${encodeUrl(data)}`;
			// console.log("🚀 ~ url:", url);
			window.parent.postMessage(
				{
					api: "notation_open",
					url: url,
				},
				"*"
			);
			// window.open(url, "_blank");
		};

		return () => (
			<NModal
				unstableShowMask={false}
				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 size={32} style={{ paddingBottom: "45px" }}>
							{instruments.map((item) => (
								<div
									class={[styles.item, froms.subjectCode === item.key && styles.itemActive]}
									onClick={() => {
										froms.subjectCode = item.key;
										froms.subjectId = item.id;
									}}
								>
									<div class={styles.itemImg}>
										<img class={styles.icon} src={item.icon} />
									</div>
									<div>{item.label}</div>
									<img class={styles.itemIcon} src={getImage("icon_check.png")} />
								</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}
										placeholder="开始速度"
										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
										placeholder="小节数量"
										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>
		);
	},
});