music-score/src/page-instrument/view-figner/index.tsx

import { PropType, computed, defineComponent, nextTick, onBeforeMount, onMounted, onUnmounted, reactive, ref } from "vue";
import styles from "./index.module.less";
import icons from "./image/icons.json";
import { FIGNER_INSTRUMENT_DATA, FIGNER_INSTRUMENT_REALKEY, IFIGNER_INSTRUMENT_Note } from "/src/view/figner-preview";
import { ITypeFingering, IVocals, getFingeringConfig, mappingVoicePart, subjectFingering } from "/src/view/fingering/fingering-config";
import { Howl } from "howler";
import { storeData } from "/src/store";
import { api_back, api_cloudLoading, api_setRequestedOrientation, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
import Hammer from "hammerjs";
import { Button, Icon, Loading, Popover, Popup, Progress, Space, showToast } from "vant";
import GuideIndex from "./guide/guide-index";
import { getQuery } from "/src/utils/queryString";
import { browser } from "/src/utils";
import { usePageVisibility } from "@vant/use";
import { watch } from "vue";
import icon_loading_img from "./image/icon_loading_img.png";
import state, { IPlatform } from "/src/state";
import { api_subjectList, getSubjectList } from "../api";
import ChangeSubject from "./change-subject";

export default defineComponent({
  name: "viewFigner",
  emits: ["close"],
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    isComponent: {
      type: Boolean,
      default: false,
    },
    subject: {
      type: String as PropType<IVocals>,
      default: "",
    },
  },
  setup(props, { emit }) {
    const query = getQuery();
    const browsInfo = browser();
    const code = mappingVoicePart(query.code, "INSTRUMENT");
    const subject = props.isComponent ? props.subject || "pan-flute" : code || "pan-flute";
    const data = reactive({
      loading: true,
      subject: subject as any,
      realKey: 0,
      notes: [] as IFIGNER_INSTRUMENT_Note[],
      tones: [] as IFIGNER_INSTRUMENT_Note[],
      activeTone: {} as IFIGNER_INSTRUMENT_Note,
      popupActiveTone: {} as IFIGNER_INSTRUMENT_Note,
      activeToneName: "",
      soundFonts: {} as any,
      viewIndex: 0,
      viewTotal: 1,
      noteAudio: null as unknown as Howl,
      transform: {
        scale: 1,
        x: 0,
        y: 0,
        startScale: 1,
        startX: 0,
        startY: 0,
        transition: "",
      },
      tipShow: false,
      tips: [] as IFIGNER_INSTRUMENT_Note[],

      tnoteShow: false,
      loadingSoundFonts: true,
      loadingSoundProgress: 0,

      changeSubjectShow: false,

      huaweiPad: navigator?.userAgent?.includes("UAWEIVRD-W09") ? true : false,
      paddingTop: "",
      paddingLeft: "",
      subjects: [] as any,
      fingeringModeList: [
        {
          text: "指法模式",
          value: "fingeringMode",
          icon: icons.icon_click,
        },
        {
          text: "听音模式",
          value: "listenMode",
          icon: icons.icon_listen,
        },
        {
          text: "音阶模式",
          value: "scaleMode",
          icon: icons.icon_mode,
        },
      ],
      fingeringMode: query.type || ("scaleMode" as "fingeringMode" | "listenMode" | "scaleMode"), // 模式
      noteType: "all" as "#c" | "all", // 音调
      loadingDom: false, // 切换乐器时需要重置
      loadingImg: false, // 切换模式，加载图片
    });
    const fingerData = reactive({
      relationshipIndex: 0,
      subject: null as unknown as ITypeFingering,
      fingeringInfo: subjectFingering(data.subject),
    });
    if (!props.isComponent) {
      state.fingeringInfo = fingerData.fingeringInfo;
    }

    const getAPPData = async (type: "top" | "left") => {
      const screenData = await isSpecialShapedScreen();
      if (screenData?.content) {
        // console.log("🚀 ~ screenData:", screenData.content);
        const { isSpecialShapedScreen, notchHeight } = screenData.content;
        if (isSpecialShapedScreen) {
          if (type === "top") {
            data.paddingTop = 25 + "px";
          }
          if (type === "left") {
            data.paddingLeft = 25 + "px";
          }
        }
      }
    };

    const getHeadTop = () => {
      if (!browsInfo.ios && fingerData.fingeringInfo.orientation === 1) {
        getAPPData("top");
      }
      if (!browsInfo.ios && fingerData.fingeringInfo.orientation === 0) {
        getAPPData("left");
      }
    };

    const getNotes = () => {
      const fignerData = FIGNER_INSTRUMENT_DATA[data.subject as keyof typeof FIGNER_INSTRUMENT_DATA];
      if (fignerData) {
        data.tones = fignerData.tones || [];
        if (data.tones.length) {
          data.activeTone = data.tones[0];
          data.popupActiveTone = data.tones[0];
        }
        data.tips = fignerData.tips || [];
        setNotes();
        setTimeout(() => {
          data.loading = false;
        }, 600);
      }
    };
    const setNotes = () => {
      const fignerData = FIGNER_INSTRUMENT_DATA[data.subject as keyof typeof FIGNER_INSTRUMENT_DATA];
      if (fignerData) {
        const tempNotes = fignerData[`list${data.activeTone.realName || ""}`];
        const appendNote: any = [];
        tempNotes.forEach((note: any) => {
          note.steps = new Array(Math.abs(note.step)).fill(1);
          if (FIGNER_INSTRUMENT_REALKEY.includes(note.realKey)) {
            appendNote.push(note);
          }
        });
        // 判断是音符状态
        data.notes = data.noteType === "#c" ? appendNote : tempNotes;
        // data.notes = fignerData[`list${data.activeTone.realName || ""}`];
      }
    };
    const getFingeringData = async () => {
      const subject: any = data.subject + (data.viewIndex === 0 ? "" : data.viewIndex);
      console.log("🚀 ~ subject:", subject);
      fingerData.subject = await getFingeringConfig(subject);
    };
    const createAudio = (url: string) => {
      return new Promise((resolve, reject) => {
        const noteAudio = new Howl({
          src: url,
          loop: true,
          onload: () => {
            resolve(noteAudio);
          },
          onloaderror: () => {
            reject(new Error(`加载音频失败`));
          },
        });
      });
    };
    const getSounFonts = async () => {
      const pathname = /(192|localhost)/.test(location.origin) ? "/" : location.pathname;
      data.loadingSoundFonts = true;
      try {
        data.loadingSoundProgress = 0;
        for (let i = 0; i < data.notes.length; i++) {
          const note = data.notes[i];
          // console.log("🚀 ~ note:", i);
          let url = `${pathname}soundfonts/${data.subject}/`;
          url += note.realName;
          url += ".mp3";
          data.soundFonts[note.realKey] = await createAudio(url);
          data.loadingSoundProgress = Math.floor(((i + 1) / data.notes.length) * 100);
        }
        data.loadingSoundProgress = 100;
      } catch (e: any) {
        //
        showToast(e.message);
      }
      api_cloudLoading();
      data.loadingSoundFonts = false;
    };

    // const selectSubjectType = (subject: string) => {
    //   data.subjects.forEach((item: any) => {
    //     if (item.value === subject) {
    //       item.className = styles.selected;
    //     } else {
    //       item.className = "";
    //     }
    //   });
    // };

    // 切换当前模式
    const onChangeFingeringModel = () => {
      //
      if (playAction.listenLock) return;
      if (playAction.showAnswerLoading) return;
      data.loadingImg = true;
      if (data.fingeringMode === "scaleMode") {
        if (["pan-flute", "ocarina"].includes(data.subject)) {
          data.viewIndex = 1;
        } else {
          data.viewIndex = 0;
        }
        const o: any = {
          "pan-flute": 2,
          ocarina: 2,
          piccolo: 2,
          "hulusi-flute": 2,
          "baroque-recorder": 2,
        };
        data.viewTotal = o[data.subject] || 1;
        data.fingeringMode = "listenMode";
      } else if (data.fingeringMode === "listenMode") {
        data.fingeringMode = "fingeringMode";
      } else if (data.fingeringMode === "fingeringMode") {
        data.fingeringMode = "scaleMode";
        data.viewIndex = 0;
        data.noteType = "all";
      }
      data.tipShow = false;
      resetMode(true, 0);
      setTimeout(() => {
        __init(false);
      }, 100);
    };

    const __init = async (loadSong = true) => {
      data.loadingDom = true;
      getNotes();

      // selectSubjectType(data.subject);

      if (data.fingeringMode === "fingeringMode") {
        if (data.subject === "pan-flute") {
          data.viewIndex = 3;
        } else if (["pan-flute", "ocarina", "melodica"].includes(data.subject)) {
          data.viewIndex = 1;
        }
      } else {
        if (["pan-flute", "ocarina"].includes(data.subject)) {
          data.viewIndex = 1;
        }
      }

      const o: any = {
        "pan-flute": 2,
        ocarina: 2,
        piccolo: 2,
        "hulusi-flute": 2,
        "baroque-recorder": 2,
      };
      data.viewTotal = o[data.subject] || 1;
      getFingeringData();
      getHeadTop();
      if (loadSong) {
        await getSounFonts();
      }

      data.loadingDom = false;
      data.loadingImg = false;
    };

    // 获取声部
    const getSubjects = async () => {
      try {
        // api_subjectList
        const subjects = await api_subjectList({
          enableFlag: true,
          delFlag: 0,
          page: 1,
          rows: 999,
        });

        const rows = subjects.data || [];
        rows.forEach((row: any) => {
          const tempList: any = {
            text: row.name,
            value: mappingVoicePart(row.code, "INSTRUMENT"),
            id: row.id,
            children: [] as any,
          };
          if (row.instruments && row.instruments.length > 0) {
            if (row.instruments.length > 1) {
              row.instruments.forEach((i: any) => {
                tempList.children.push({
                  text: i.name,
                  id: i.id,
                  value: mappingVoicePart(i.code, "INSTRUMENT"),
                });
              });
            } else {
              const singleRow = row.instruments[0];
              if (singleRow.code) {
                tempList.value = mappingVoicePart(singleRow.code, "INSTRUMENT");
                tempList.id = singleRow.id;
              }
            }
          }
          data.subjects.push(tempList);
        });

        data.subjects.forEach((item: any) => {
          if (item.value === data.subject && item.children?.length > 1) {
            data.subject = item.children[0].value;
          }
        });
      } catch (e) {
        //
      }
    };

    onBeforeMount(async () => {
      if (browser().isApp) {
        state.platform = "APP" as IPlatform;
      } else {
        state.platform = query.platform?.toLocaleUpperCase() || "";
      }

      if (state.platform === IPlatform.PC) {
        document.title = "听音练习";
      }
      await getSubjects();
      __init();
    });

    /**
     * 播放音频
     * @param item 音频节点
     * @param showNote 是否显示对应的指法
     * @returns
     */
    const noteClick = (item: IFIGNER_INSTRUMENT_Note, showNote = true) => {
      // console.log('音高', item.realKey)
      if (data.noteAudio) {
        data.noteAudio.stop();
        if (data.realKey === item.realKey) {
          data.realKey = 0;
          data.noteAudio = null as unknown as Howl;
          return;
        }
      }
      if (showNote) {
        data.realKey = item.realKey;
      }
      data.noteAudio = data.soundFonts[item.realKey];
      if (data.noteAudio) {
        data.noteAudio.play();
      }
    };
    const handleStop = () => {
      if (data.noteAudio) {
        data.noteAudio.stop();
        data.realKey = 0;
        data.noteAudio = null as unknown as Howl;
      }
    };

    /** 返回 */
    const handleBack = () => {
      // platform: query.platform,
      handleStop();
      if (props.isComponent) {
        // 返回的时候默认横屏
        api_setRequestedOrientation(0);
        emit("close");
        return;
      } else if (state.platform === IPlatform.PC) {
        console.log(1, query);
        if (query.matchMedia == 1) {
          // 老师端，首页
          window.parent.postMessage(
            {
              api: "iframe_exit",
            },
            "*"
          );
          return;
        } else {
          window.close();
          return;
        }

        // if (fingerData.fingeringInfo.orientation === 0) {
        // 	api_setRequestedOrientation(1);
        // }
      }
      // 不在APP中,
      if (!storeData.isApp) {
        window.close();
        return;
      }
      api_back();
    };

    // 排箫，默认0.9显示
    const setDefaultScale = () => {
      if (data.subject === "pan-flute") {
        data.transform.scale = 0.9;
        data.transform.startScale = 0.9;
      }
    };

    onMounted(() => {
      loadElement();
      api_setStatusBarVisibility();
    });
    const loadElement = () => {
      const fingeringContainer = document.getElementById("fingeringContainer");
      setDefaultScale();
      // console.log("🚀 ~ fingeringContainer:", fingeringContainer);
      const mc = new Hammer.Manager(fingeringContainer as HTMLElement);
      mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
      mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get("pan")]);
      // mc.get("pan").set({ direction: Hammer.DIRECTION_ALL });
      // mc.get("pinch").set({ enable: true });
      mc.on("panstart pinchstart", function (ev) {
        data.transform.transition = "";
      });
      mc.on("panmove pinchmove", function (ev) {
        if (ev.type === "pinchmove") {
          // console.log("🚀 ~ ev:", ev.type, ev.scale, ev.deltaX, ev.deltaY);
          data.transform.scale = ev.scale * data.transform.startScale;
          data.transform.x = data.transform.startX + ev.deltaX;
          data.transform.y = data.transform.startY + ev.deltaY;
        }
        if (ev.type === "panmove") {
          // console.log("🚀 ~ ev:", ev.type, ev.deltaX, ev.deltaY);
          data.transform.x = data.transform.startX + ev.deltaX;
          data.transform.y = data.transform.startY + ev.deltaY;
        }
      });
      //
      mc.on("hammer.input", function (ev) {
        if (ev.isFinal) {
          data.transform.startScale = data.transform.scale;
          data.transform.startX = data.transform.x;
          data.transform.startY = data.transform.y;
        }
      });
    };
    const resetElement = () => {
      data.transform.transition = "all 0.3s";
      nextTick(() => {
        data.transform.scale = data.subject === "pan-flute" ? 0.9 : 1;
        data.transform.x = 0;
        data.transform.y = 0;
        data.transform.startScale = data.subject === "pan-flute" ? 0.9 : 1;
        data.transform.startX = 0;
        data.transform.startY = 0;
      });
    };

    // 判断乐器是否移动
    const instrumentTranstion = computed(() => {
      const transform = data.transform;
      if (transform.scale !== 1 || transform.x !== 0 || transform.y !== 0 || transform.startScale !== 1 || transform.startX !== 0 || transform.startY !== 0) {
        return true;
      } else {
        return false;
      }
    });

    const pageVisible = usePageVisibility();
    watch(
      () => pageVisible.value,
      (val) => {
        if (val === "hidden") {
          console.log("页面隐藏停止播放");
          handleStop();
          gaumntPause();
        }
      }
    );
    /** 课件播放 */
    const changePlay = (res: any) => {
      if (res?.data?.api === "setPlayState") {
        handleStop();
        gaumntPause();
      }
    };

    const noteBoxRef = ref();
    const scrollNoteBox = (type: "left" | "right") => {
      const width = noteBoxRef.value.offsetWidth / 2;
      (noteBoxRef.value as unknown as HTMLElement).scrollBy({
        left: type === "left" ? -width : width,
        behavior: "smooth",
      });
    };

    const playStatus = reactive({
      gamut: false, // 是否播放音阶
      gamutTimer: null as any, // 播放音阶定时器
      answer: false, // 是否显示答案
      action: false, // 是否开始播放
    });

    /** 音符切换 */
    const noteChangeShow = () => {
      if (playStatus.action) {
        if (playAction.listenLock) return;
        playAction.resetAction = true;
        resetMode(true, 0);
      }
      // // 播放音阶时不能切换
      // if (playStatus.gamut) return;
      // // 开始答题不能切换
      // if (playStatus.action) return;
      playStatus.gamut = false;
      gaumntPause();
      if (data.noteType === "all") {
        data.noteType = "#c";
      } else {
        data.noteType = "all";
      }
      getNotes();

      setTimeout(() => {
        playAction.resetAction = false;
      }, 2000);
    };

    // 开始播放音阶
    const onGamutPlayOrPause = async () => {
      playAction.resetAction = false;
      if (playStatus.gamut) {
        playStatus.gamut = false;
        gaumntPause();
      } else {
        // 不管当前显示在哪个音老师滚动到开始位置
        (noteBoxRef.value as unknown as HTMLElement).scroll({
          left: 0,
          top: 0,
          behavior: "smooth",
        });
        playStatus.gamut = true;
        const notes = data.notes;
        let scrollCount = 0;
        for (let i = 0; i < notes.length; i++) {
          if (!playStatus.gamut) return false;
          const activeDom = document.querySelectorAll(".note-class")[i] as any;
          if (activeDom.offsetLeft >= noteBoxRef.value.offsetWidth + (noteBoxRef.value.offsetWidth / 2) * scrollCount - activeDom.offsetWidth) {
            scrollNoteBox("right");
            scrollCount++;
          }
          await gaumtPlay(notes[i]);
        }

        // // 处理播放到最后一个
        setTimeout(() => {
          playStatus.gamut = false;
          gaumntPause();
        }, 667);
      }
    };
    const gaumtPlay = (note: any, status?: boolean) => {
      return new Promise((resolve) => {
        playStatus.gamutTimer = setTimeout(() => {
          if (playStatus.gamut || status) {
            noteClick(note);
          }
          resolve(note);
        }, 667);
      });
    };
    const gaumntPause = () => {
      clearTimeout(playStatus.gamutTimer);
      if (data.noteAudio) {
        data.noteAudio.stop();
        data.realKey = 0;
        data.noteAudio = null as unknown as Howl;
      }
    };

    /** 开始播放 */
    const playAction = reactive({
      exampleAnser: {} as any, // 示例声音
      standardAnswer: {} as any, // 标准答案key
      showAnswerLoading: false, // 显示按答案中
      listenModeStatus: false, // 是否开始了模式
      listenLock: false,
      listenTipsStatus: false, // 开始播放状态
      resetAction: false, // 是否重置
      /** 0: 未答，1: 答对，2: 答错 */
      userAnswerStatus: 0 as 0 | 1 | 2, // 用户回答状态
      userAnswer: {} as any, // 用户答的数据
    });
    const onActionPlay = async () => {
      playAction.resetAction = false;
      if (playAction.listenLock) return;
      if (playAction.showAnswerLoading) return;
      playStatus.action = true;
      playStatus.answer = true;
      // 先暂停播放声音
      gaumntPause();
      if (data.fingeringMode === "fingeringMode") {
        onFingeringMode();
      } else if (data.fingeringMode === "listenMode") {
        if (playAction.listenModeStatus) {
          playAction.listenLock = true;
          await fingeringPlay(playAction.standardAnswer, 1500, false);
          gaumntPause();
          playAction.listenLock = false;
        } else {
          onListenMode();
        }
      }
    };

    // 指法模式
    const fingeringPlay = (note: any, timer = 1500, showNote = true) => {
      return new Promise((resolve) => {
        noteClick(note, showNote);
        setTimeout(() => {
          resolve(note);
        }, timer);
      });
    };
    const onFingeringMode = () => {
      const randomIndex = Math.floor(Math.random() * data.notes.length);
      playAction.standardAnswer = data.notes[randomIndex];
      data.realKey = data.notes[randomIndex].realKey;
      if (playAction.listenModeStatus) {
        return;
      }
      playAction.listenModeStatus = true; // 是否开始听音
      playAction.listenLock = true; // 锁
      playAction.listenTipsStatus = true;
      setTimeout(() => {
        playAction.listenTipsStatus = false;
        playAction.listenLock = false; // 锁
      }, 2000);
    };
    // 听音模式
    const onListenMode = async () => {
      playAction.listenModeStatus = true; // 是否开始听音
      playAction.listenLock = true; // 锁
      playAction.listenTipsStatus = true;
      // 设置并保存示例数据
      let randomIndex = data.notes.findIndex((item: any) => item.realKey === 67); // Math.floor(Math.random() * data.notes.length);

      playAction.exampleAnser = data.notes[randomIndex];
      data.realKey = playAction.exampleAnser.realKey;
      scrollAnswer(playAction.exampleAnser.realKey);
      await fingeringPlay(playAction.exampleAnser);
      data.realKey = 0;
      playAction.exampleAnser = {};
      gaumntPause();
      setTimeout(async () => {
        // 设置答题数据
        randomIndex = Math.floor(Math.random() * data.notes.length);
        playAction.standardAnswer = data.notes[randomIndex];
        await fingeringPlay(data.notes[randomIndex], 1500, false);
        gaumntPause();
        playAction.listenLock = false;
        playAction.listenTipsStatus = false;
      }, 1000);
    };

    // 显示答案
    const onShowAnswer = async () => {
      if (playAction.listenLock) return;
      playAction.showAnswerLoading = true;
      scrollAnswer(playAction.standardAnswer.realKey);
      await fingeringPlay(playAction.standardAnswer);
      resetMode(true, 0);
      // }
    };
    // 滚动到对应答案位置
    const scrollAnswer = (realKey?: any) => {
      const tempRealKey = realKey || data.realKey;
      const index = data.notes.findIndex((item: any) => item.realKey === tempRealKey);
      const activeDom = document.querySelectorAll(".note-class")[index] as any;
      if (activeDom) {
        const aWidth = activeDom.offsetWidth;
        const width = noteBoxRef.value.offsetWidth;
        const aLeft = Math.max(activeDom?.offsetLeft - aWidth, 0);
        (noteBoxRef.value as unknown as HTMLElement).scroll({
          left: Math.max(aLeft - width / 2, 0),
          top: 0,
          behavior: "smooth",
        });
      }
    };

    /**
     * 重置播放状态
     * @param status 是否全部重置
     * @param timer 延时时长（默认2s）
     */
    const resetMode = (status = true, timer = 2000) => {
      // 2秒钟后重置
      setTimeout(() => {
        gaumntPause();
        if (status) {
          playAction.standardAnswer = {};
          playAction.showAnswerLoading = false;
          playAction.userAnswerStatus = 0;
          playAction.userAnswer = {};
          playAction.listenModeStatus = false;
          playStatus.action = false;
          playStatus.answer = false;
          playStatus.gamut = false;
          data.realKey = 0;
        } else {
          playAction.userAnswerStatus = 0;
          playAction.userAnswer = {};
        }
      }, timer);
    };

    /** 滚轮缩放 */
    const handleWheel = (e: WheelEvent) => {
      e.preventDefault();
      if (e.deltaY > 0) {
        data.transform.scale -= 0.1;
        if (data.transform.scale <= 0.5) {
          data.transform.scale = 0.5;
        }
      } else {
        data.transform.scale += 0.1;
        if (data.transform.scale >= 2) {
          data.transform.scale = 2;
        }
      }
    };

    onMounted(() => {
      window.addEventListener("message", changePlay);
      const fingeringContainer = document.getElementById("fingeringContainer");
      fingeringContainer?.addEventListener("wheel", handleWheel);
    });

    onUnmounted(() => {
      window.removeEventListener("message", changePlay);
      const fingeringContainer = document.getElementById("fingeringContainer");
      fingeringContainer?.removeEventListener("wheel", handleWheel);
      document.title = "Ai学练";
    });

    const containerBox = computed(() => {
      if (state.platform === IPlatform.PC || query.modelType) {
        return {
          paddingTop: "1rem",
          paddingBottom: "",
        };
      }
      if (data.fingeringMode === "scaleMode") {
        if (data.subject === "hulusi-flute") {
          return {
            paddingTop: "3.1rem",
            paddingBottom: ".8rem",
          };
        } else if (data.subject === "piccolo" || data.subject === "baroque-recorder") {
          return {
            paddingTop: "4rem",
            paddingBottom: ".8rem",
          };
        } else if (data.subject === "pan-flute") {
          return {
            paddingTop: "0",
            paddingBottom: "0",
          };
        } else if (data.subject === "ocarina") {
          return {
            paddingTop: "1.2rem",
            paddingBottom: "0",
          };
        } else if (data.subject === "melodica") {
          return {
            paddingTop: "2.8rem",
            paddingBottom: "1.8rem",
          };
        } else {
          return {
            paddingTop: "",
            paddingBottom: "",
          };
        }
      } else {
        if (data.subject === "hulusi-flute") {
          return {
            paddingTop: "3.1rem",
            paddingBottom: "0rem",
          };
        } else if (data.subject === "piccolo" || data.subject === "baroque-recorder") {
          return {
            paddingTop: "3rem",
            paddingBottom: ".5rem",
          };
        } else if (data.subject === "pan-flute") {
          return {
            paddingTop: "0",
            paddingBottom: "0",
          };
        } else if (data.subject === "ocarina") {
          return {
            paddingTop: "1rem",
            paddingBottom: "0",
          };
        } else if (data.subject === "melodica") {
          return {
            paddingTop: "2.8rem",
            paddingBottom: "0.8rem",
          };
        } else {
          return {
            paddingTop: "",
            paddingBottom: "",
          };
        }
      }
    });

    const listenText = computed(() => {
      if (data.fingeringMode === "fingeringMode") {
        if (playStatus.action) {
          return "换一换";
        } else {
          return "开始练习";
        }
      } else if (data.fingeringMode === "listenMode") {
        if (playStatus.action) {
          return "再听一遍";
        } else {
          return "开始听音";
        }
      }
      return "开始听音";
    });

    const modeText = computed(() => {
      let text = "";
      let icon = icons.icon_mode;
      data.fingeringModeList.forEach((item: any) => {
        if (item.value === data.fingeringMode) {
          text = item.text;
          icon = item.icon;
        }
      });
      return {
        text,
        icon,
      };
    });

    // 屏幕方向 0 竖，1 横
    const orientationDirection = computed(() => {
      return ["hulusi-flute", "piccolo", "baroque-recorder"].includes(data.subject) ? 1 : 0;
    });

    const resultImg = (note: any) => {
      if (data.realKey === note.realKey && !playStatus.action) {
        return {
          icon: icons.icon_btn_ylow,
          status: false,
        };
      } else if (playAction.exampleAnser.realKey === note.realKey) {
        return {
          icon: icons.icon_btn_ylow,
          status: false,
        };
      } else if (playAction.standardAnswer.realKey === note.realKey) {
        // 没有开始答题
        if (!playStatus.action) {
          return {
            icon: icons.icon_btn_ylow,
            status: false,
          };
        }
        // 显示答案中
        if (playAction.showAnswerLoading) {
          return {
            icon: icons.icon_btn_green,
            status: true,
          };
        }
        // 用户答对
        if (playAction.userAnswerStatus === 1) {
          return {
            icon: icons.icon_btn_green,
            status: true,
          };
        }
      } else {
        // 用户答错
        if (playAction.userAnswerStatus === 2 && playAction.userAnswer.realKey === note.realKey) {
          return {
            icon: icons.icon_btn_red,
            status: true,
          };
        }
      }
      return {
        icon: icons.icon_btn_blue,
        status: true,
      };
    };
    return () => {
      const relationship = fingerData.subject?.relationship?.[data.realKey] || [];
      const rs: number[] = Array.isArray(relationship[1]) ? relationship[fingerData.relationshipIndex] : relationship;
      const canTizhi = Array.isArray(relationship[1]);
      return (
        <div class={[styles.fingerBox, state.platform !== IPlatform.PC && !query.modelType && fingerData.fingeringInfo.orientation === 1 ? styles.fingerBottom : styles.fingerRight]}>
          <div
            class={styles.head}
            style={{
              paddingTop: data.paddingTop ? data.paddingTop : "",
              paddingLeft: data.paddingLeft ? data.paddingLeft : "",
            }}
          >
            <div class={styles.left}>
              <button class={[styles.backBtn]} onClick={() => handleBack()}>
                <img src={icons.icon_back} />
              </button>

              <div
                class={styles.baseBtn}
                onClick={(e) => {
                  //
                  // 播放音阶时不能切换
                  if (playStatus.gamut) {
                    return;
                  }
                  // 开始答题不能切换
                  if (playAction.listenLock) {
                    return;
                  }

                  data.changeSubjectShow = true;
                }}
              >
                <img src={icons.icon_change_instrument} />
                <span>切换乐器</span>
              </div>
              <div class={styles.baseBtn} onClick={onChangeFingeringModel}>
                <img src={modeText.value.icon} />
                <span>{modeText.value.text}</span>
              </div>
              {/*  */}
            </div>
            {/*  */}
          </div>
          <div class={styles.fingerContent}>
            <div class={styles.wrapFinger}>
              <div
                id="fingeringContainer"
                class={styles.boxFinger}
                style={{
                  paddingTop: containerBox.value.paddingTop,
                  paddingBottom: containerBox.value.paddingBottom,
                }}
              >
                <div
                  style={{
                    transform: `translate3d(${data.transform.x}px,${data.transform.y}px,0px) scale(${data.transform.scale})`,
                    transition: data.transform.transition,
                  }}
                  class={[styles.fingeringContainer]}
                >
                  <div class={styles.imgs}>
                    {!data.loadingImg && <img src={data.fingeringMode === "scaleMode" ? fingerData.subject?.json?.full : fingerData.subject?.json?.full1} />}
                    {rs.map((key: number | string, index: number) => {
                      const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
                      return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
                    })}
                    <div style={{ left: data.viewIndex == 2 ? "0" : "64%" }} class={[styles.tizhi, canTizhi && styles.canDisplay]} onClick={() => (fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)}>
                      替指
                    </div>
                    <div id="finger-note-2" style={{ left: "50%", transform: "translateX(-50%)" }} class={styles.tizhi} onClick={() => (fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)}></div>
                  </div>
                </div>
              </div>
              <div
                class={styles.notes}
                style={{
                  paddingLeft: data.paddingLeft ? data.paddingLeft : "",
                }}
              >
                {playAction.listenTipsStatus && <div class={[styles.tipsT, data.fingeringMode === "fingeringMode" ? styles.playTips2 : styles.playTips]}></div>}
                {playAction.userAnswerStatus === 1 && <div class={[styles.tipsT, styles.playSuccess]}></div>}
                {playAction.userAnswerStatus === 2 && <div class={[styles.tipsT, styles.playError]}></div>}
                {playAction.resetAction && <div class={[styles.tipsT, styles.playTips5]}></div>}
                {((data.noteType !== "#c" && (orientationDirection.value === 0 || (orientationDirection.value === 1 && state.platform === IPlatform.PC))) || (orientationDirection.value === 1 && state.platform === IPlatform.APP)) && (
                  <Button class={styles.noteBtn} onClick={() => scrollNoteBox("left")}>
                    <Icon name="arrow-left" />
                  </Button>
                )}
                <div class={[styles.noteContent, data.fingeringMode !== "scaleMode" && orientationDirection.value === 0 && styles.noteContentOther, browsInfo.ios ? "" : styles.noteContentWrap, data.huaweiPad && styles.huaweiPad]}>
                  {/* 判断是否为音阶模式 */}
                  {data.fingeringMode !== "scaleMode" && (
                    <div draggable={false} class={styles.note} onClick={noteChangeShow}>
                      <img draggable={false} src={data.noteType === "all" ? icons.icon_btn_orange : icons.icon_btn_orange2} />
                    </div>
                  )}

                  {/* [styles.noteContent, browsInfo.ios ? "" : styles.noteContentWrap, data.huaweiPad && styles.huaweiPad] */}
                  <div class={styles.lastNoteContent}>
                    <div ref={noteBoxRef} class={styles.noteBox}>
                      {data.notes.map((note: IFIGNER_INSTRUMENT_Note, index: number) => {
                        const steps = new Array(Math.abs(note.step)).fill(1);
                        return (
                          <div
                            id={index == 0 ? "finger-note-0" : ""}
                            draggable={false}
                            class={[styles.note, "note-class"]}
                            key={note.realKey}
                            onClick={async () => {
                              // 判断是否在播放音阶
                              if (playStatus.gamut) return;
                              if (playAction.listenLock) return;
                              if (playAction.showAnswerLoading) return;
                              if (playStatus.action) {
                                playAction.userAnswer = note;
                                // 判断用户答题
                                const userResult = note.realKey === playAction.standardAnswer.realKey ? 1 : 2;
                                playAction.userAnswerStatus = userResult;
                                playAction.listenLock = true;
                                data.realKey = note.realKey;
                                await fingeringPlay(note, 1000);
                                resetMode(userResult === 1 ? true : false, 0);
                                data.realKey = 0;

                                // 如果是指法模式显示完之后要还原
                                if (data.fingeringMode === "fingeringMode" && userResult === 2) {
                                  // 延迟显示，因为重置的时候有一个异步操作
                                  setTimeout(() => {
                                    data.realKey = playAction.standardAnswer.realKey;
                                  }, 10);
                                }
                                playAction.listenLock = false;
                              } else {
                                noteClick(note);
                              }
                            }}
                          >
                            <img draggable={false} src={resultImg(note).icon} />

                            {playStatus.action && ((playAction.showAnswerLoading && playAction.standardAnswer.realKey === note.realKey) || (playAction.userAnswerStatus === 1 && playAction.userAnswer.realKey === note.realKey)) ? <span class={styles.showAnswer}></span> : ""}
                            {playStatus.action && playAction.userAnswerStatus === 2 && playAction.userAnswer.realKey === note.realKey ? <span class={[styles.showAnswer, styles.errorAnswer]}></span> : ""}
                            <div
                              class={[
                                styles.noteKey,
                                ((data.realKey === note.realKey && !playStatus.action) ||
                                  (playStatus.action && playAction.exampleAnser.realKey === note.realKey) ||
                                  (playStatus.action && ((playAction.showAnswerLoading && playAction.standardAnswer.realKey === note.realKey) || (playAction.userAnswerStatus === 1 && playAction.userAnswer.realKey === note.realKey))) ||
                                  (playStatus.action && playAction.userAnswerStatus === 2 && playAction.userAnswer.realKey === note.realKey)) &&
                                  styles.keyActive,
                              ]}
                            >
                              {/* 显示对应的点 */}
                              {note.step > 0 ? steps.map((n: any) => <span class={styles.dot}></span>) : null}

                              <div class={styles.noteName}>
                                <sup>{note.mark && (note.mark === "rise" ? "#" : "b")}</sup>
                                {note.key}
                              </div>
                              {/* 显示对应的点 */}
                              {note.step < 0 ? steps.map((n: any) => <span class={styles.dot}></span>) : null}
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>
                {((data.noteType !== "#c" && (orientationDirection.value === 0 || (orientationDirection.value === 1 && state.platform === IPlatform.PC))) || (orientationDirection.value === 1 && state.platform === IPlatform.APP)) && (
                  <Button class={styles.noteBtn} onClick={() => scrollNoteBox("right")}>
                    <Icon name="arrow" />
                  </Button>
                )}
              </div>
              {data.fingeringMode !== "scaleMode" && (
                <div class={styles.optionBtns}>
                  <Button class={[styles.oBtn, styles.gamut, playStatus.action && styles.disabled]} round onClick={onGamutPlayOrPause}>
                    {playStatus.gamut ? "暂停" : "播放音阶"}
                  </Button>
                  <Button class={[styles.oBtn, styles.play, playStatus.gamut && styles.disabled]} round onClick={onActionPlay}>
                    {listenText.value}
                  </Button>
                  <Button class={[styles.oBtn, styles.success, !playStatus.answer && styles.disabled]} round onClick={onShowAnswer}>
                    显示答案
                  </Button>
                </div>
              )}
            </div>
            <div class={[styles.tips, data.loadingDom ? styles.hiddens : "", data.tipShow ? "" : styles.tipHidden]}>
              <div class={styles.tipTitle}>
                <div class={styles.tipTitleName}>{fingerData.fingeringInfo.code}使用说明</div>
                <Button class={styles.tipClose} onClick={() => (data.tipShow = false)}>
                  <Icon name="cross" size={19} color="#fff" />
                </Button>
              </div>
              <div class={styles.iconBook}></div>
              <div class={styles.tipContentbox}>
                <div class={styles.tipContent}>
                  {data.tips.map((tip, tipIndex) => (
                    <div class={styles.tipItem}>
                      <div class={styles.iconWrap}>
                        <div class={styles.tipItemIcon}>{tipIndex + 1}</div>
                      </div>
                      <div>
                        {tip.name}: {tip.realName}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            {data.loadingSoundFonts && (
              <div class={styles.loading}>
                <div class={styles.loadingWrap}>
                  <img class={styles.loadingIcon} src={icon_loading_img} />
                  <Progress percentage={data.loadingSoundProgress} />
                  <div class={styles.loadingTip}>加载中，请稍后…</div>
                </div>
              </div>
            )}
          </div>
          <div class={styles.fixedRightBtns}>
            <div class={styles.rightBtn}>
              {data.subject !== "melodica" && data.fingeringMode === "scaleMode" && (
                <div
                  class={styles.baseBtn}
                  onClick={() => {
                    data.viewIndex++;
                    if (data.viewIndex > data.viewTotal) {
                      if (["pan-flute", "ocarina"].includes(data.subject)) {
                        data.viewIndex = 1;
                      } else {
                        data.viewIndex = 0;
                      }
                    }
                    getFingeringData();
                  }}
                >
                  <img src={icons.icon_toggle} />
                  <span>视图</span>
                </div>
              )}
              <div
                class={styles.baseBtn}
                onClick={() => {
                  resetElement();
                  data.tipShow = !data.tipShow;
                }}
              >
                <img src={icons.icon_2_1} />
                <span>说明</span>
              </div>

              {!!data.tones.length && data.fingeringMode === "scaleMode" && (
                <>
                  {fingerData.fingeringInfo.name == "hulusi-flute" ? (
                    <div id="finger-note-1" class={[styles.baseBtn, styles.toggleBtnhulusi, styles.active]} onClick={() => (data.tnoteShow = true)}>
                      <div>
                        全按作
                        <div class={[styles.noteKey, styles.noteKeyBtn]}>
                          {data.activeTone.step > 0 ? <span class={styles.dot}></span> : null}
                          <span class={styles.dot}></span>

                          <div class={styles.noteName}>
                            <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
                            {data.activeTone.key}
                          </div>
                          {data.activeTone.step < 0 ? <span class={styles.dot}></span> : null}
                        </div>
                      </div>
                      <img src={icons.icon_arrow} />
                    </div>
                  ) : (
                    <div id="finger-note-1" class={[styles.baseBtn, styles.toggleBtnhulusi2, styles.active]} onClick={() => (data.tnoteShow = true)}>
                      <div class={styles.oterhD}>
                        <div>
                          <div style={{ marginTop: "-4px" }}>
                            <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
                            {data.activeTone.name}
                          </div>
                          调
                        </div>
                        <img src={icons.icon_arrow} />
                      </div>
                    </div>
                  )}
                </>
              )}
            </div>

            <div class={[styles.baseBtn, !instrumentTranstion.value && styles.resetBtn]} style={{ marginTop: "8px" }} onClick={() => resetElement()}>
              <img src={icons.icon_2_0} />
              <span>还原</span>
            </div>
          </div>

          <Popup class="tonePopup" v-model:show={data.tnoteShow} position={state.platform !== IPlatform.PC && !query.modelType && fingerData.fingeringInfo.orientation === 1 ? "bottom" : "right"}>
            <div class={styles.tones}>
              <div class={styles.toneTitle}>
                <div class={styles.tipTitleName}>移调</div>
                <Button class={styles.tipClose} onClick={() => (data.tnoteShow = false)}>
                  <Icon name="cross" size={19} color="#fff" />
                </Button>
              </div>
              <div class={styles.tipContentbox}>
                <div class={styles.tipContent}>
                  <div class={styles.tipWrap}>
                    <Space size={0} class={styles.toneContent}>
                      {data.tones.map((tone: IFIGNER_INSTRUMENT_Note) => {
                        const steps = new Array(Math.abs(tone.step)).fill(1);
                        return (
                          <Button
                            class={[fingerData.fingeringInfo.name == "hulusi-flute" && styles.hulusiBtn]}
                            round
                            plain
                            type={data.popupActiveTone.realName === tone.realName ? "primary" : "default"}
                            onClick={() => {
                              data.popupActiveTone = tone;
                              setNotes();
                            }}
                          >
                            {fingerData.fingeringInfo.name == "hulusi-flute" ? (
                              <div style={{ display: "flex", alignItems: "center" }}>
                                全按作
                                <div class={[styles.noteKey, styles.hulusiNoteKey]}>
                                  {tone.step > 0 ? <span class={styles.dot}></span> : null}
                                  <div class={styles.noteName} style={{ fontSize: "0.25rem" }}>
                                    <sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
                                    {tone.key}
                                  </div>
                                  {tone.step < 0 ? <span class={styles.dot}></span> : null}
                                </div>
                              </div>
                            ) : (
                              <div class={styles.noteName}>
                                <sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
                                {tone.name}
                              </div>
                            )}
                          </Button>
                        );
                      })}
                    </Space>
                  </div>
                  <div class={styles.toneAction}>
                    <img onClick={() => (data.tnoteShow = false)} src={icons.icon_action_cancel} />
                    <img
                      onClick={() => {
                        data.activeTone = data.popupActiveTone;
                        setNotes();
                        data.tnoteShow = false;
                      }}
                      src={icons.icon_action_confirm}
                    />
                  </div>
                </div>
              </div>
            </div>
          </Popup>

          <Popup v-model:show={data.changeSubjectShow} class={styles.changeSubjectPopup}>
            <ChangeSubject
              subjectList={data.subjects}
              subject={data.subject}
              onClose={() => (data.changeSubjectShow = false)}
              onConfirm={(code: any) => {
                if (data.subject === code) return;
                const originalSubject = JSON.parse(JSON.stringify(data.subject));
                data.subject = code;
                data.viewIndex = 0;
                data.tipShow = false;
                data.loadingDom = true;
                fingerData.fingeringInfo = subjectFingering(data.subject);
                data.activeTone = {} as any;
                resetElement();
                resetMode(true, 0);
                api_setRequestedOrientation(orientationDirection.value);

                data.changeSubjectShow = false;
                // 设置屏幕方向
                setTimeout(() => {
                  const before = ["hulusi-flute", "piccolo", "baroque-recorder"].includes(originalSubject) ? 1 : 0;
                  if (orientationDirection.value !== before) {
                    data.paddingTop = "";
                    data.paddingLeft = "";
                  }

                  __init();
                }, 100);
              }}
            />
          </Popup>

          {props.show && !data.loading && !data.loadingSoundFonts && <GuideIndex fingeringMode={data.fingeringMode} showGuide={false} list={["finger"]} />}
        </div>
      );
    };
  },
});