import { defineComponent, onMounted, reactive } from "vue";
import state, { EnumMusicRenderType } from "/src/state";
import MusicScore from "../../view/music-score";
import styles from "./index.module.less";
import { getQuery } from "/src/utils/queryString";
import { closeToast, showLoadingToast } from "vant";
import { svg2canvas } from "/src/utils/svg2canvas";
import { sysMusicScoreAccompanimentQueryPage } from "../api";

export default defineComponent({
	name: "music-list",
	setup() {
		const query: any = getQuery();

		const detailData = reactive({
			isLoading: true,
			isProductLoading: false,
			product: [
				{
					state: false,
					name: "五线谱",
					type: EnumMusicRenderType.staff,
					base64: "" as any,
				},
				{
					state: false,
					name: "首调",
					type: EnumMusicRenderType.firstTone,
					base64: "" as any,
				},
				{
					state: false,
					name: "固定调",
					type: EnumMusicRenderType.fixedTone,
					base64: "" as any,
				},
			],
		});

		onMounted(() => {
			(window as any).appName = "colexiu";

			const id = query.id || "43554";
			// Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
			// 	console.log(values[0].data.xmlFileUrl)
			// 	state.xmlUrl = values[0].data.xmlFileUrl
			// 	detailData.isLoading = false;
			// 	// getMusicInfo(values[0]);
			// });
			// 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/咏鹅.xml'

			state.xmlUrl = query.xmlUrl
			detailData.isLoading = false;
			// state.xmlUrl = query.xmlUrl;
			// console.log(state.xmlUrl, 'state.xmlUrl')
			// //课堂乐器,默认简谱
			// state.musicRenderType = EnumMusicRenderType.staff;

			// showLoadingToast({ message: "生成中", duration: 0 });
		});

		/** 渲染完成 */
		const handleRendered = async () => {
			// const item = detailData.product.find((item) => item.type === state.musicRenderType);
			// if (!item) return;
			// item.state = true;
			// // item.base64 = await downPng();
			// const nextItem = detailData.product.find((item: any) => !item.state);
			// if (nextItem) {
			// 	state.musicRenderType = nextItem.type;
			// 	detailData.isLoading = true;
			// 	setTimeout(() => (detailData.isLoading = false), 500);
			// 	return;
			// }
			// closeToast();
			// console.log(detailData.product);
			// window.parent?.postMessage(
			// 	{
			// 		api: "webApi_renderSvg",
			// 		product: JSON.stringify(detailData.product),
			// 	},
			// 	"*"
			// );
			console.log('渲染完成')
		};
		// const downPng = () => {
		// 	return new Promise((resolve) => {
		// 		setTimeout(async () => {
		// 			const svg: any = document.getElementById("osmdSvgPage1")?.cloneNode(true);
		// 			if (!svg) {
		// 				resolve("");
		// 				return;
		// 			}
		// 			const cw = svg.width.animVal.value;
		// 			const ch = svg.height.animVal.value;
		// 			const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
		// 			rect.setAttribute("x", "0");
		// 			rect.setAttribute("y", "0");
		// 			rect.setAttribute("width", `${cw * 2}`);
		// 			rect.setAttribute("height", `${ch * 2}`);
		// 			rect.setAttribute("fill", "#fff");
		// 			svg.prepend(rect);
		// 			const _canvas = svg2canvas(svg.outerHTML);
		// 			const base64 = _canvas.toDataURL("image/png", 1);
		// 			resolve(base64);
		// 		}, 500);
		// 	});
		// };
		// onRendered={handleRendered}
		return () => (
			<div class={styles.detail}>
				<div id="scrollContainer" class={[styles.container, "hideCursor"]}>
					{/* 曲谱渲染 */}
					{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
				</div>
			</div>
		);
	},
});
