import { NDropdown, NSpin } from "naive-ui";
import { computed, defineComponent, ref, watch } from "vue";
import styles from "./index.module.less";
import { getImage } from "../../images";
import { DropdownMixedOption } from "naive-ui/es/dropdown/src/interface";

/** 新建 | 保存 | 导入 | 上传 | 导出 | 打印 | 退出*/
export type IFileBtnType =
	| "newMusic"
	| "save"
	| "xml"
	| "upload"
	| "png"
	| "wav"
	| "midi"
	| "print"
	| "down-xml"
	| "exit";

export default defineComponent({
	name: "FileBtn",
	emits: ["select"],
	props: {
		saveLoading: {
			type: Boolean,
			default: false,
		},
	},
	setup(props, { emit }) {
		const options = computed(() => {
			return [
				{
					label: () => (
						<div class={styles.dropItem}>
							<img class={styles.dropIcon} src={getImage("icon_26_4.png")} />
							<span>新建曲谱</span>
						</div>
					),
					key: "newMusic",
				},
				{
					label: () => (
						<div class={styles.dropItem}>
							<img class={styles.dropIcon} src={getImage("icon_26_0.png")} />
							<span>保存</span>
							{props.saveLoading && <NSpin style={{ marginLeft: "auto" }} size={14}></NSpin>}
						</div>
					),
					key: "save",
					disabled: props.saveLoading,
				},
				{
					label: () => (
						<div class={styles.dropItem}>
							<img class={styles.dropIcon} src={getImage("icon_26_6.png")} />
							<span>导入</span>
						</div>
					),
					key: "import",
					// disabled: true,
					children: [
						{
							label: "XML",
							key: "xml",
							// disabled: true,
						},
					],
				},
				{
					label: () => (
						<div class={styles.dropItem}>
							<img class={styles.dropIcon} src={getImage("icon_26_1.png")} />
							<span>上传到我的资源</span>
						</div>
					),
					key: "upload",
					// disabled: true,
				},
				{
					label: () => (
						<div class={styles.dropItem}>
							<img class={styles.dropIcon} src={getImage("icon_26_2.png")} />
							<span>导出</span>
						</div>
					),
					key: "export",
					children: [
						{
							label: "XML",
							key: "down-xml",
						},
						{
							label: "PNG",
							key: "png",
						},
						{
							label: "WAV",
							key: "wav",
						},
						{
							label: "MIDI",
							key: "midi",
						},
					],
				},
				{
					label: () => (
						<div class={styles.dropItem}>
							<img class={styles.dropIcon} src={getImage("icon_26_3.png")} />
							<span>打印</span>
						</div>
					),
					key: "print",
					disabled: true,
				},
			];
		});
		return () => (
			<NDropdown
				class={styles.dropWrap}
				options={options.value}
				trigger="click"
				onSelect={(val) => {
					console.log("🚀 ~ val:", val);
					emit("select", val);
				}}
			>
				<div class={styles.btnImg}>
					<img class={styles.topBtnIcon} src={getImage("icon_0.png")} />
				</div>
			</NDropdown>
		);
	},
});
