import { NDropdown } from "naive-ui";
import { defineComponent } 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'

export default defineComponent({
	name: "FileBtn",
	emits: ["select"],
	setup(props, { emit }) {
		const options: DropdownMixedOption[] = [
			{
				label: "新建曲谱",
				key: "newMusic",
			},
			{
				label: () => (
					<div class={styles.dropItem}>
						<img class={styles.dropIcon} src={getImage("icon_26_0.png")} />
						<span>保存</span>
					</div>
				),
				key: "save",
				disabled: true
			},
			{
				label: () => (
					<div class={styles.dropItem}>
						<img class={styles.dropIcon} src={getImage("icon_26_0.png")} />
						<span>导入</span>
					</div>
				),
				key: "import",
				children: [
					{
						label: "xml",
                        key: 'xml'
					},
				],
			},
			{
				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: "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}
				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>
		);
	},
});