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" | "exit";

export default defineComponent({
  name: "FileBtn",
  emits: ["select"],
  setup(props, { emit }) {
    const options: DropdownMixedOption[] = [
      {
        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>
          </div>
        ),
        key: "save",
      },
      // {
      // 	label: () => (
      // 		<div class={styles.dropItem}>
      // 			<img class={styles.dropIcon} src={getImage("icon_26_0.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: "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,
      },
      // {
      // 	label: () => (
      // 		<div class={styles.dropItem}>
      // 			<img class={styles.dropIcon} src={getImage("icon_26_5.png")} />
      // 			<span>退出</span>
      // 		</div>
      // 	),
      // 	key: "exit",
      // 	disabled: false,
      // },
    ];
    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>
    );
  },
});
