import { defineComponent, onMounted, reactive } from "vue";
import styles from "./index.module.less";
import { NButton, NSpace, 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";

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,
			finish: false,
		});
		const getList = async () => {
			const res = await api_musicSheetCreationPage({ ...forms });
			if (res?.code == 200) {
				data.list = res.data.rows;
				data.finish = res.data.rows.length < forms.rows;
			}
		};
		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: () => {},
			});
		};
		onMounted(() => {
			getList();
		});
        const handleOpenNotaion = (item: any) => {
            window.parent.open(`${location.origin}/notation/#/?id=${item.id}`)
        }
		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) => (
						<div class={styles.item} onClick={() => handleOpenNotaion(item)}>
							<div class={styles.imgBox}>
								<img src={getImage("icon_29.png")} />
							</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>

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