import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
import styles from "./index.module.less";
import { NButton, NSpace, NSpin, useDialog } from "naive-ui";
import { getImage } from "../home/images";
import TheCreate from "./component/the-create";
import { storeData } from "/src/store";
import { api_musicSheetCreationPage, api_musicSheetCreationRemove } from "../api";
import { useRouter } from "vue-router";
import ABCJS from "abcjs";

export default defineComponent({
	name: "Create",
	setup() {
		const router = useRouter();
		const dialog = useDialog();
		const forms = reactive({
			teacherId: storeData.user.id,
			page: 1,
			keyword: "",
			rows: 20,
		});
		const data = reactive({
			list: [] as any[],
			addShow: false,
			loading: false,
			finish: false,
			isCreated: false,
		});
		const getList = async () => {
			data.loading = true;
			const res = await api_musicSheetCreationPage({ ...forms });
			if (res?.code == 200) {
				if (data.isCreated) {
					handleOpenNotaion(res.data.rows[0]);
				}
				data.list = data.list.concat(res.data.rows);
				data.finish = res.data.rows.length < forms.rows;
			}
			data.loading = false;
		};
		const handleReset = () => {
			forms.page = 1;
			data.finish = false;
			data.list = [];
			getList();
		};
		const handleDelte = (item: any) => {
			dialog.warning({
				title: "警告",
				content: `确定删除${item.name}曲谱吗？`,
				positiveText: "确定",
				negativeText: "取消",
				onPositiveClick: async () => {
					await api_musicSheetCreationRemove(item.id);
					handleReset();
				},
				onNegativeClick: () => {},
			});
		};
		const loadingRef = ref();
		onMounted(() => {
			getList();
			const obv = new IntersectionObserver((entries) => {
				if (entries[0].isIntersecting) {
					if (data.finish || data.loading) return;
					forms.page++;
					getList();
				}
			});
			obv.observe(loadingRef.value?.$el);
		});
		const handleOpenNotaion = (item: any) => {
			window.parent.postMessage(
				{
					api: "notation_open",
					url: `${location.origin}/notation/#/?id=${item.id}`,
				},
				"*"
			);
		};
		const productSvg = (abc: string, id: string) => {
			const a = ABCJS.renderAbc(id, abc, {selectTypes: false});
		};
		return () => (
			<div class={styles.wrap}>
				<NSpace size={18}>
					<div class={styles.createItem} onClick={() => (data.addShow = true)}>
						<img src={getImage("icon_29.png")} />
						<div>新建乐谱</div>
					</div>

					{data.list.map((item, index: number) => (
						<div class={styles.item} onClick={() => handleOpenNotaion(item)}>
							<div class={styles.imgBox} id={"item_" + index}>
								<img
									style={{ display: "none" }}
									src={getImage("icon_29.png")}
									onLoad={() => {
										productSvg(item.creationConfig, "item_" + index);
									}}
								/>
							</div>
							<div class={styles.itemBottom}>
								<div class={styles.bottombox}>
									<div class={styles.bottomLeft}>
										<div class={styles.itemtitle}>
											<img class={styles.icon_29} src={getImage("icon_29_1.png")} />
											<span>{item.name}</span>
										</div>
										<div class={styles.time}>{item.updateTime}</div>
									</div>
									<img class={styles.bottomBtn} src={getImage("icon_29_2.png")} />
									<img
										class={styles.bottomBtn}
										src={getImage("icon_29_2.png")}
										onClick={() => handleDelte(item)}
									/>
								</div>
							</div>
							<img class={styles.btn} src={getImage("icon_29_2.png")} />
						</div>
					))}
				</NSpace>
				{!data.finish && (
					<NSpace ref={loadingRef} justify="center" style={{ padding: "30px" }}>
						<NSpin size="large" />
					</NSpace>
				)}

				<TheCreate
					v-model:show={data.addShow}
					onCreate={() => {
						data.addShow = false;
						data.isCreated = true;
						handleReset();
					}}
				/>
			</div>
		);
	},
});
