music-score/src/page-instrument/header-top/index.tsx

import { Transition, computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch, toRef, ComputedRef, nextTick } from "vue";
import styles from "./index.module.less";

import iconBack from "./image/icon-back.png";
import listImg from "./image/list.png";
import iconMode from "./image/mode.png";
import { headImg } from "./image";
import { Badge, Circle, Popover, Popup, showConfirmDialog, showToast, NoticeBar } from "vant";
import Speed from "./speed";
import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
import Settting from "./settting";
import state, { IPlatform, handleChangeSection, handleResetPlay, handleRessetState, togglePlay, IPlayState, refreshMusicSvg } from "/src/state";
import { getAudioCurrentTime } from "/src/view/audio-list";
import { followData, toggleFollow } from "/src/view/follow-practice";
import { api_back } from "/src/helpers/communication";
import MusicType from "./music-type";
import ModeTypeMode from "../component/mode-type-mode";
import { getQuery } from "/src/utils/queryString";
import { storeData } from "/src/store";
import TeacherTop from "../custom-plugins/guide-page/teacher-top";
import StudentTop from "../custom-plugins/guide-page/student-top";
import { HANDLE_WORK_ADD } from "../custom-plugins/work-index";
import { browser } from "/src/utils";
import store from "store";
import "../component/the-modal-tip/index.module.less";
import { metronomeData } from "../../helpers/metronome";
import { toggleMusicSheet } from "/src/view/plugins/toggleMusicSheet";
import useDrag from "/src/view/plugins/useDrag/index";
import Dragbom from "/src/view/plugins/useDrag/dragbom";
import { getGuidance, setGuidance } from "../custom-plugins/guide-page/api";
import ModeView from "./modeView";
import { smoothAnimationState } from "../view-detail/smoothAnimation";
import { isMusicList, musicListShow } from "../component/the-music-list";
import { EvaluatingDriver, FollowDriver, PractiseDriver } from "../custom-plugins/guide-driver";

/** 头部数据和方法 */
export const headTopData = reactive({
  /** 模式 */
  modeType: "" as "init" | "show",
  /** 显示返回按钮 */
  showBack: true,
  /** 设置弹窗 */
  settingMode: false,
  /** 切换模式 */
  handleChangeModeType(value: "practise" | "follow" | "evaluating") {
    // 后台设置为不能评测
    if (value === "evaluating" && !state.enableEvaluation) return;
    // 打击乐&节奏练习不支持跟练模式
    if (value === "follow" && state.isPercussion) return;
    // 跟练模式，光标只有音符模式，无节拍模式
    if (value === "follow" && metronomeData.cursorMode === 2) {
      metronomeData.cursorMode = 1;
    }
    if (value === "practise") {
      // state.playIngSpeed = state.speed
    }
    if (value === "evaluating") {
      // 如果延迟检测资源还在加载中，给出提示
      if (!evaluatingData.jsonLoadDone) {
        evaluatingData.jsonLoading = true;
        state.audioDone && showToast("资源加载中，请稍后"); //音频资源加载完之后才提示
        return;
      }
      // 如果是pc端, 评测模式暂不可用
      if (state.platform === IPlatform.PC) {
        showConfirmDialog({
          className: "modalTip",
          title: "温馨提示",
          message: "该功能暂未开放，敬请期待!",
          showCancelButton: false,
        });
        return;
      }
      // 评测模式，只有一行谱模式
      if (!state.isSingleLine) {
        state.isSingleLine = true;
        refreshMusicSvg();
      }
      smoothAnimationState.isShow.value = false; // 隐藏旋律线
      state.playIngSpeed = state.originSpeed;
      handleStartEvaluat();
      // 开发模式，把此处打开
      // state.modeType = "evaluating";
      // evaluatingData.rendered = true;
      // evaluatingData.soundEffectMode = true;
    } else if (value === "follow") {
      // 跟练模式，只有一行谱模式
      if (!state.isSingleLine) {
        state.isSingleLine = true;
        refreshMusicSvg();
      }
      smoothAnimationState.isShow.value = false;
      toggleFollow();
    }
    headTopData.modeType = "show";
  },
  // 改变模式之前的状态
  oldPlayType: "play",
  // 记录切换模式前的状态
  oldModeType: "practise" as "practise" | "follow" | "evaluating",
});

export const headData = reactive({
  speedShow: false,
  musicTypeShow: false,
});

let resetBtn: ComputedRef<{
  display: boolean;
  disabled: boolean;
}>;
// 点击切换的时候才触发提醒
let isClickMode = false;
/**
 * 处理模式切换
 * @param oldPlayType   没改变之前的播放模式
 * @param oldPlaySource  没改变之前的播放类型
 * @param isforceReset   是否强制刷新播放状态 模式times时值改变时候也刷新
 */
export function handlerModeChange(oldPlayType: "play" | "sing", oldPlaySource: IPlayState, isforceReset?: boolean) {
  const isModeChange = modeChangeHandleTimes(oldPlayType, oldPlaySource);
  // 没有切换的时候 不处理下面的
  if (isModeChange) {
    try {
      metronomeData.metro.calculation(state.times);
    } catch (error) {}
    console.log("重新之后的times", state.times, state.fixtime);
  }
  if (isModeChange || isforceReset) {
    // 重置播放状态
    handleRessetState();
    // 隐藏重播按钮
    resetBtn && (resetBtn.value.display = false);
  }
  // 当模式改变的时候  放在这里是因为需要等谱面加载完成之后再提示（点击按钮模式切换才提示）
  if (isClickMode) {
    showToast({
      message: state.playType === "play" ? "已切换为演奏场景" : "已切换为演唱场景",
      position: "top",
      className: "selectionToast",
    });
    isClickMode = false;
  }
}
// 模式切换之后重新给times赋值
function modeChangeHandleTimes(oldPlayType: "play" | "sing", oldPlaySource: IPlayState) {
  const playType = state.playType;
  const playSource = state.playSource;
  const { notBeatFixtime, xmlMp3BeatFixTime, difftime } = state.times[0];
  const { isOpenMetronome, isSingOpenMetronome } = state;
  // 演奏向演唱切
  if (oldPlayType === "play" && playType === "sing") {
    if (playSource === "mingSong") {
      // 唱名文件也要加上弱起时间  他们制作曲子加了弱起时间
      state.fixtime = difftime;
      state.times.map((item) => {
        item.time = item.xmlNoteTime + difftime;
        item.endtime = item.xmlNoteEndTime + difftime;
        item.fixtime = difftime;
      });
      return true;
    } else {
      //演奏开了节拍器，演唱没开节拍器
      if (isOpenMetronome && !isSingOpenMetronome) {
        state.fixtime = notBeatFixtime;
        state.times.map((item) => {
          item.time = item.notBeatTime;
          item.endtime = item.notBeatEndTime;
          item.fixtime = notBeatFixtime;
        });
        return true;
      } else if (!isOpenMetronome && isSingOpenMetronome) {
        state.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
        state.times.map((item) => {
          item.time = item.notBeatTime + xmlMp3BeatFixTime;
          item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime;
          item.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
        });
        return true;
      }
    }
  } else if (oldPlayType === "sing" && playType === "play") {
    // 演唱向演奏切
    if (oldPlaySource === "mingSong") {
      // 有节拍器
      if (isOpenMetronome) {
        state.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
        state.times.map((item) => {
          item.time = item.notBeatTime + xmlMp3BeatFixTime;
          item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime;
          item.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
        });
        return true;
      } else {
        state.fixtime = notBeatFixtime;
        state.times.map((item) => {
          item.time = item.notBeatTime;
          item.endtime = item.notBeatEndTime;
          item.fixtime = notBeatFixtime;
        });
        return true;
      }
    }
    // 演奏开了节拍器，演唱没开节拍器
    if (isOpenMetronome && !isSingOpenMetronome) {
      state.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
      state.times.map((item) => {
        item.time = item.notBeatTime + xmlMp3BeatFixTime;
        item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime;
        item.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
      });
      return true;
    } else if (!isOpenMetronome && isSingOpenMetronome) {
      state.fixtime = notBeatFixtime;
      state.times.map((item) => {
        item.time = item.notBeatTime;
        item.endtime = item.notBeatEndTime;
        item.fixtime = notBeatFixtime;
      });
      return true;
    }
  } else if (oldPlayType === "sing" && playType === "sing") {
    // 演唱之间切换
    // 切到唱名时候
    if (playSource === "mingSong") {
      // 唱名文件也要加上弱起时间  他们制作曲子加了弱起时间
      state.fixtime = difftime;
      state.times.map((item) => {
        item.time = item.xmlNoteTime + difftime;
        item.endtime = item.xmlNoteEndTime + difftime;
        item.fixtime = difftime;
      });
      return true;
    } else if (oldPlaySource === "mingSong") {
      // 有节拍器
      if (isSingOpenMetronome) {
        state.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
        state.times.map((item) => {
          item.time = item.notBeatTime + xmlMp3BeatFixTime;
          item.endtime = item.notBeatEndTime + xmlMp3BeatFixTime;
          item.fixtime = notBeatFixtime + xmlMp3BeatFixTime;
        });
        return true;
      } else {
        state.fixtime = notBeatFixtime;
        state.times.map((item) => {
          item.time = item.notBeatTime;
          item.endtime = item.notBeatEndTime;
          item.fixtime = notBeatFixtime;
        });
        return true;
      }
    }
  }
  return false;
}

export default defineComponent({
  name: "header-top",
  emits: ["close"],
  setup(props, { emit }) {
    const query = getQuery();
    // 是否显示引导
    const showGuide = ref(false);
    const showStudentGuide = ref(false);
    const showWebGuide = ref(true);
    let displayFingeringCache = false; // 指法缓存
    /** 设置按钮 */
    const settingBtn = computed(() => {
      // 音频播放中 禁用
      if (state.playState === "play") return { display: true, disabled: true };
      // 评测开始 禁用, 跟练开始 禁用
      if (evaluatingData.startBegin || followData.start) return { display: true, disabled: true };

      return {
        display: true,
        disabled: false,
      };
    });

    /** 转谱按钮 */
    const converBtn = computed(() => {
      // 音频播放中 禁用
      if (state.playState === "play") return { display: true, disabled: true };
      // 评测开始 禁用
      if (evaluatingData.startBegin || followData.start) return { display: true, disabled: true };

      return {
        disabled: false,
        display: true,
      };
    });

    /** 速度按钮 */
    const speedBtn = computed(() => {
      // 选择模式, 跟练模式  不显示
      if (headTopData.modeType !== "show" || state.modeType === "follow") return { display: false, disabled: true };
      // 评测模式, 音频播放中 禁用
      if (state.modeType === "evaluating" || state.playState === "play") return { display: true, disabled: true };

      return {
        disabled: false,
        display: true,
      };
    });
    /** 节拍器按钮 */
    const metronomeBtn = computed(() => {
      // 选择模式  不显示
      if (headTopData.modeType !== "show") return { display: false, disabled: true };
      // 音频播放中 禁用
      if (state.playState === "play") return { display: true, disabled: true };
      return {
        disabled: false,
        display: true,
      };
    });

    /** 指法按钮 */
    const fingeringBtn = computed(() => {
      // 后台设置不显示指法
      if (!state.isShowFingering) return { display: true, disabled: true };
      // 没有指法 选择模式 评测模式 跟练模式 不显示
      if (headTopData.modeType !== "show" || !state.fingeringInfo.name || ["evaluating", "follow"].includes(state.modeType)) return { display: false, disabled: true };
      // 音频播放中 禁用
      if (state.playState === "play") return { display: true, disabled: true };

      return {
        disabled: false,
        display: true,
      };
    });

    /** 摄像头按钮 */
    const cameraBtn = computed(() => {
      // 选择模式 不显示
      if (headTopData.modeType !== "show" || state.modeType !== "evaluating") return { display: false, disabled: true };
      // 音频播放中 禁用
      if (state.playState === "play") return { display: true, disabled: true };

      return {
        disabled: false,
        display: true,
      };
    });

    /** 选段按钮 */
    const selectBtn = computed(() => {
      // 选择模式 不显示
      if (headTopData.modeType !== "show" || ["follow"].includes(state.modeType)) return { display: false, disabled: true };
      // 音频播放中 禁用
      if (state.playState === "play" || query.workRecord) return { display: true, disabled: true };

      return {
        disabled: false,
        display: true,
      };
    });

    /** 原声按钮 */
    const originBtn = computed(() => {
      // 没有音源不显示
      if(state.noMusicSource) return { display: false, disabled: false };
      // 选择模式,跟练模式 不显示
      if (headTopData.modeType !== "show" || state.modeType === "follow") return { display: false, disabled: false };
      // 评测开始 禁用
      if (state.modeType === "evaluating") return { display: false, disabled: true };
      if (!state.isAppPlay) {
        if (state.playType === "play") {
          // 原声, 伴奏 少一个,就不能切换
          if (state.music && state.accompany) return { display: true, disabled: false };
        } else {
          // 播放过程中不能切换
          if (state.playState === "play") {
            return { display: true, disabled: true };
          }
          // 范唱
          let index = 0;
          state.fanSong && index++;
          state.banSong && index++;
          state.mingSong && index++;
          if (index > 1) {
            return { display: true, disabled: false };
          }
        }
      }
      return {
        disabled: true,
        display: true,
      };
    });
    /** 播放类型按钮 */
    const playTypeBtn = computed(() => {
      // 选择模式,跟练模式,评测模式 不显示
      if (headTopData.modeType !== "show" || state.modeType === "follow" || state.modeType === "evaluating") return { display: false, disabled: false };
      if (!state.isAppPlay) {
        let index = 0;
        state.music && index++;
        state.accompany && index++;
        let songIndex = 0;
        state.fanSong && songIndex++;
        state.banSong && songIndex++;
        state.mingSong && songIndex++;
        // 演唱和演奏 都有数据的时间不禁用
        if (songIndex > 0 && index > 0) {
          // 音频播放中 禁用
          if (state.playState === "play") {
            return { display: true, disabled: true };
          }
          return { display: true, disabled: false };
        }
      }
      return {
        disabled: false,
        display: false,
      };
    });
    /** 模式切换按钮 */
    const toggleBtn = computed(() => {
      // 没有音源不显示
      if(state.noMusicSource) return { display: false, disabled: false };
      // 不是演奏模式 影藏
      if (state.playType !== "play") return { display: false, disabled: false };
      // 选择模式, url设置模式 不显示
      if (headTopData.modeType !== "show" || !headTopData.showBack) return { display: false, disabled: false };
      // 跟练开始, 评测开始 播放开始 隐藏
      if (state.playState == "play" || followData.start || evaluatingData.startBegin) return { display: false, disabled: false };

      return {
        display: true,
        disabled: false,
      };
    });

    /** 播放按钮 */
    const playBtn = computed(() => {
      // 没有音源不显示
      if(state.noMusicSource) return { display: false, disabled: false };
      // 选择模式 不显示
      if (headTopData.modeType !== "show") return { display: false, disabled: false };
      // 评测模式 不显示,跟练模式 不显示
      if (["evaluating", "follow"].includes(state.modeType)) return { display: false, disabled: true };
      // midi音频未初始化完成不可点击
      if (state.isAppPlay && state.midiPlayIniting) return { display: true, disabled: true };
      return {
        display: true,
        disabled: false,
      };
    });

    /** 重播按钮 */
    resetBtn = computed(() => {
      // 没有音源不显示
      if(state.noMusicSource) return { display: false, disabled: false };
      // 选择模式 不显示
      if (headTopData.modeType !== "show") return { display: false, disabled: false };
      // 评测模式 不显示,跟练模式 不显示
      if (["evaluating", "follow"].includes(state.modeType)) return { display: false, disabled: true };
      // 播放状态 不显示
      if (state.playState === "play") return { display: false, disabled: true };
      // 播放进度为0 不显示
      const currentTime = getAudioCurrentTime();
      // midi音频未初始化完成不可点击
      if (state.isAppPlay && state.midiPlayIniting) return { display: false, disabled: true };
      if (!currentTime) return { display: false, disabled: true };

      return {
        display: true,
        disabled: false,
      };
    });

    const isAllBtns = computed(() => {
      const flag = converBtn.value.display && speedBtn.value.display && selectBtn.value.display && originBtn.value.display && toggleBtn.value.display && showGuide.value;
      return flag;
    });

    const isAllBtnsStudent = computed(() => {
      const flag = converBtn.value.display && speedBtn.value.display && selectBtn.value.display && originBtn.value.display && toggleBtn.value.display && showStudentGuide.value;

      return flag;
    });

    const showGuideIndex = computed(() => {
      // 从课堂乐器学生端课件预览默认不显示会员
      if (storeData.user.vipMember || state.paymentType === "FREE" || query.showCourseMember === "true") {
        // 学生端
        return true;
      } else {
        // vip
        return false;
      }
    });

    const browInfo = browser();
    /** 返回 */
    const handleBack = () => {
      HANDLE_WORK_ADD();
      // 不在APP中,
      if (!storeData.isApp) {
        window.close();
        return;
      }
      if ((browInfo.iPhone || browInfo.ios) && query.workRecord) {
        setTimeout(() => {
          api_back();
        }, 550);
        return;
      }
      api_back();
    };

    /** 根据参数设置模式 */
    const getQueryModelSetModelType = () => {
      /** 作业模式 start, 如果为作业模式不处理,让作业模块处理 */
      if (query.workRecord) {
        return;
      }
      /** 作业模式 end */
      if (state.defaultModeType == 1) {
        headTopData.handleChangeModeType("practise");
        // if (state.platform === IPlatform.PC || state.isPreView) {
        //   headTopData.showBack = false;
        // }
        if (state.isPreView) {
          headTopData.showBack = false;
        }
      } else {
        if (query.modelType) {
          if (query.modelType === "practise") {
            headTopData.handleChangeModeType("practise");
          } else if (query.modelType === "evaluating") {
            headTopData.handleChangeModeType("evaluating");
          }
          headTopData.showBack = false;
        } else {
          setTimeout(() => {
            headTopData.modeType = "init";
          }, 500);
        }
      }
    };

    /** 课件播放 */
    const changePlay = (res: any) => {
      // console.log('监听上课页面message',res)
      if (res?.data?.api === "setPlayState") {
        togglePlay("paused", "courseware");
      }
      // 上课页面，按钮方向
      if (res?.data?.api === "imagePos") {
        if (res?.data.data) {
          state.playBtnDirection = res.data.data === "right" ? "right" : "left";
          // if (state.fingeringInfo.direction === "vertical" && state.setting.displayFingering) {
          //   state.musicScoreBtnDirection = state.playBtnDirection === 'right' ? 'left' : 'right';
          // } else {
          //   state.musicScoreBtnDirection = state.playBtnDirection;
          // }
          state.musicScoreBtnDirection = state.playBtnDirection;
        }
      }
    };

    const parentClassName = "settingBoxClass_drag";
    const userId = storeData.user?.id ? String(storeData.user?.id) : "";
    const positionInfo =
      state.platform !== IPlatform.PC
        ? {
            styleDrag: { value: null },
          }
        : useDrag([`${parentClassName} .top_drag`, `${parentClassName} .bom_drag`], parentClassName, toRef(headTopData, "settingMode"), userId);

    onMounted(() => {
      getQueryModelSetModelType();
      window.addEventListener("message", changePlay);
      if (state.platform === IPlatform.PC) {
        showGuide.value = true;
      } else {
        showStudentGuide.value = true;
      }

      if (query.showWebGuide === "false") {
        showWebGuide.value = false;
      }
    });

    onUnmounted(() => {
      window.removeEventListener("message", changePlay);
    });
    const noticeBarWidth = ref<number>();
    watch(
      () => smoothAnimationState.isShow.value,
      () => {
        // NoticeBar能不能滚动
        if (smoothAnimationState.isShow.value && isMusicList.value) {
          nextTick(() => {
            const widthCon = (document.querySelector("#noticeBarRollDom .van-notice-bar__content") as any)?.offsetWidth || undefined;
            noticeBarWidth.value = widthCon;
          });
        }
      },
      { immediate: true }
    );
    // 设置改变触发
    watch(state.setting, () => {
      console.log(state.setting, "state.setting");
      store.set("musicscoresetting", state.setting);
    });

    // 获取引导页信息
    const getAllGuidance = async () => {
      let guideInfo: any = null;
      try {
        const res = await getGuidance({ guideTag: "guideInfo" });
        if (res.data) {
          guideInfo = JSON.parse(res.data?.guideValue) || null;
        } else {
          guideInfo = {};
        }
        state.guideInfo = guideInfo;
      } catch (e) {
        console.log(e);
      }
    };
    getAllGuidance();

    // 完成拖动弹窗引导页
    const handleGuide = async () => {
      state.guideInfo.teacherDrag = true;
      try {
        const res = await setGuidance({ guideTag: "guideInfo", guideValue: JSON.stringify(state.guideInfo) });
      } catch (e) {
        console.log(e);
      }
    };
    return () => (
      <>
        <div
          class={[styles.headerTop]}
          onClick={(e: Event) => {
            e.stopPropagation();
            if (state.platform === IPlatform.PC) {
              // 显示隐藏菜单
              window.parent.postMessage(
                {
                  api: "onAttendToggleMenu",
                },
                "*"
              );
            }
          }}
        >
          {/* 返回和标题 */}
          {!(state.playState == "play" || followData.start || evaluatingData.startBegin) && (
            <div id="noticeBarRollDom" class={styles.headTopLeftBox}>
              <img src={iconBack} class={["headTopBackBtn", styles.img, !headTopData.showBack && styles.hidenBack]} onClick={handleBack} />
              {smoothAnimationState.isShow.value ? (
                <div
                  style={
                    noticeBarWidth.value
                      ? {
                          "--noticeBarWidth": noticeBarWidth.value + "px",
                        }
                      : {}
                  }
                  class={[styles.title, "headeTopTitleBtn"]}
                  onClick={() => {
                    isMusicList.value && (musicListShow.value = true);
                  }}
                >
                  {isMusicList.value && <div class={[styles.symbolNote, "driver-8"]}></div>}
                  <NoticeBar text={state.examSongName} background="none" />
                </div>
              ) : (
                isMusicList.value && (
                  <img
                    src={listImg}
                    class={[styles.img, styles.listImg, "driver-8"]}
                    onClick={() => {
                      musicListShow.value = true;
                    }}
                  />
                )
              )}
            </div>
          )}
          {/* 模式切换 */}
          {
            <div
              id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
              style={{ display: toggleBtn.value.display ? "" : "none" }}
              class={["driver-9", styles.modeChangeBox, toggleBtn.value.disabled && styles.disabled]}
              onClick={() => {
                headTopData.oldModeType = state.modeType;
                handleRessetState();
                headTopData.modeType = "init";
              }}
            >
              <img class={styles.img} src={iconMode} />
              <div class={styles.title}>{state.modeType === "practise" ? "练习模式" : state.modeType === "follow" ? "跟练模式" : state.modeType === "evaluating" ? "评测模式" : ""}</div>
            </div>
          }

          {/* 模式提醒 */}
          {
            state.modeType === "practise" &&
              <div class={[styles.modeWarn, "practiseModeWarn"]}>
                <img src={state.playType === "play" ? headImg("perform1.png") : headImg("sing1.png")} />
                <div>{state.playType === "play" ? "演奏场景" : "演唱场景"}</div>
              </div>
          }
          {/* 功能按钮 */}
          <div
            class={[styles.headRight]}
            onClick={(e: Event) => {
              e.stopPropagation();
            }}
          >
            {/* 一行谱模式，暂不支持节拍指针 */}
            {/* {!state.isSingleLine ? (
              <div
                class={[styles.btn, state.platform === IPlatform.PC ? styles.pcBtn : ""]}
                onClick={() => {
                  // 切换光标模式
                  let mode = metronomeData.cursorMode;
                  if (["follow"].includes(state.modeType)) {
                    mode = metronomeData.cursorMode === 1 ? 3 : 1;
                  } else {
                    mode = metronomeData.cursorMode === 3 ? 1 : metronomeData.cursorMode + 1;
                  }
                  metronomeData.cursorMode = mode;
                }}
              >
                <img class={styles.iconBtn} src={headImg(metronomeData.cursorMode === 1 ? "cursor-icon-1.svg" : metronomeData.cursorMode === 2 ? "cursor-icon-2.svg" : metronomeData.cursorMode === 3 ? "cursor-icon-3.svg" : "")} />
                <span class={styles.iconContent}>
                  {metronomeData.cursorMode === 1 ? "音符指针" : metronomeData.cursorMode === 2 ? "节拍指针" : metronomeData.cursorMode === 3 ? "关闭指针" : ""}
                  {metronomeData.cursorTips && (
                    <>
                      <i class={styles.arrowIcon}></i>
                      <div class={[styles["botton-tips"], metronomeData.cursorMode === 3 ? styles.tipSpec : ""]}>{metronomeData.cursorTips}</div>
                    </>
                  )}
                </span>
              </div>
            ) : null} */}
            <div
              style={{ display: playTypeBtn.value.display ? "" : "none" }}
              class={["driver-2", styles.btn, playTypeBtn.value.disabled && styles.disabled, styles.playType]}
              onClick={() => {
                const oldPlayType = state.playType;
                headTopData.oldPlayType = oldPlayType;
                const oldPlaySource = state.playSource;
                if (state.playType === "play") {
                  state.playType = "sing";
                  state.playSource = state.fanSong ? "music" : state.banSong ? "background" : "mingSong";
                } else {
                  state.playType = "play";
                  state.playSource = state.music ? "music" : "background";
                }
                isClickMode = true;
                // 有指法并且显示指法的时候 切换到演唱模式 需要影藏指法
                let isRefresh = false;
                if (state.isShowFingering && state.fingeringInfo.name && (state.setting.displayFingering || displayFingeringCache)) {
                  if (state.playType === "sing") {
                    state.setting.displayFingering = false;
                    displayFingeringCache = true;
                  } else {
                    state.setting.displayFingering = displayFingeringCache;
                    displayFingeringCache = false;
                  }
                  // 如果是竖屏指法和一行谱的时候 改变指法值的时候state 会调用刷新 refreshMusicSvg 所以下面不调用
                  if (state.fingeringInfo.direction === "vertical" && !state.isSingleLine) {
                    isRefresh = true;
                  }
                }
                // 有歌词的时候，切换播放模式，需要重新渲染谱面  指法不刷新谱面的时候
                if (state.xmlHasLyric && !isRefresh) {
                  refreshMusicSvg();
                } else if (!isRefresh) {
                  handlerModeChange(oldPlayType, oldPlaySource, true);
                }
              }}
            >
              <img style={{ display: state.playType === "play" ? "" : "none" }} class={styles.iconBtn} src={headImg(`perform.png`)} />
              <img style={{ display: state.playType === "play" ? "none" : "" }} class={styles.iconBtn} src={headImg(`sing.png`)} />
              <span>{state.playType === "play" ? "演奏" : "演唱"}</span>
            </div>
            <div
              id={state.platform === IPlatform.PC ? "teacherTop-1" : "studnetT-1"}
              style={{ display: originBtn.value.display ? "" : "none" }}
              class={["driver-3", styles.btn, originBtn.value.disabled && styles.disabled, state.playType === "play" ? styles.playSource : styles.songSource]}
              onClick={() => {
                const oldPlayType = state.playType;
                const oldPlaySource = state.playSource;
                if (state.playType === "play") {
                  state.playSource = state.playSource === "music" ? "background" : "music";
                } else {
                  if (state.playSource === "music") {
                    state.playSource = state.banSong ? "background" : "mingSong";
                  } else if (state.playSource === "background") {
                    state.playSource = state.mingSong ? "mingSong" : "music";
                  } else {
                    state.playSource = state.fanSong ? "music" : "background";
                  }
                }
                handlerModeChange(oldPlayType, oldPlaySource);
                showToast({
                  message: state.playType === "play" ? (state.playSource === "music" ? "已切换为原声" : "已切换为伴奏") : state.playSource === "music" ? "已切换为范唱" : state.playSource === "background" ? "已切换为伴唱" : "已切换为唱名",
                  position: "top",
                  className: "selectionToast",
                });
              }}
            >
              <img style={{ display: state.playSource === "music" ? "" : "none" }} class={styles.iconBtn} src={state.playType === "play" ? headImg(`music.png`) : headImg(`music1.png`)} />
              <img style={{ display: state.playSource === "background" ? "" : "none" }} class={styles.iconBtn} src={state.playType === "play" ? headImg(`background.png`) : headImg(`background1.png`)} />
              <img style={{ display: state.playSource === "mingSong" ? "" : "none" }} class={styles.iconBtn} src={headImg(`mingsong.png`)} />
              <span>{state.playSource === "music" ? (state.playType === "play" ? "原声" : "范唱") : state.playSource === "background" ? (state.playType === "play" ? "伴奏" : "伴唱") : "唱名"}</span>
            </div>
            <div
              id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"}
              style={{ display: selectBtn.value.display ? "" : "none" }}
              class={["driver-4", styles.btn, selectBtn.value.disabled && styles.disabled, styles.section, state.sectionStatus && styles.isSection]}
              onClick={() => handleChangeSection()}
            >
              <img style={{ display: state.section.length === 0 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section0.png`)} />
              <img style={{ display: state.section.length === 1 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section1.png`)} />
              <img style={{ display: state.section.length === 2 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section2.png`)} />
              <span>选段</span>
            </div>
            {
              <>
                <div
                  style={{ display: metronomeBtn.value.display ? "" : "none" }}
                  class={["driver-5", styles.btn, styles.metronomeBtn, metronomeBtn.value.disabled && styles.disabled, headData.speedShow && styles.isSpeed, styles.speed]}
                  onClick={async () => {
                    headData.speedShow = !headData.speedShow;
                  }}
                >
                  <img style={{ display: metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickon.png")} />
                  <img style={{ display: !metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickoff.png")} />
                  <span style={{ whiteSpace: "nowrap" }}>节拍</span>
                  <div class={styles.speedCon}>
                    <img src={headImg("speed.png")} />
                    <div>{Math.floor(state.speed)}</div>
                  </div>
                </div>
                {
                  <Popup v-model:show={headData.speedShow} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
                    <Speed />
                    {state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide} />}
                  </Popup>
                }
              </>
            }
            {/* {state.enableNotation ? (
              <Popover trigger="manual" v-model:show={headData.musicTypeShow} class={state.platform === IPlatform.PC && styles.pcTransPop} placement={state.platform === IPlatform.PC ? "top-end" : "bottom-end"} overlay={false} offset={state.platform === IPlatform.PC ? [0, 40] : [0, 8]}>
                {{
                  reference: () => (
                    <div
                      id={state.platform === IPlatform.PC ? "teacherTop-5" : "studnetT-5"}
                      style={{ display: converBtn.value.display ? "" : "none" }}
                      class={[styles.btn, converBtn.value.disabled && styles.disabled]}
                      onClick={(e: Event) => {
                        e.stopPropagation();
                        headData.musicTypeShow = !headData.musicTypeShow;
                      }}
                    >
                      <img class={styles.iconBtn} src={headImg("icon_zhuanpu.svg")} />
                      <span>{state.musicRenderType === "staff" ? "转简谱" : "转五线谱"}</span>
                    </div>
                  ),
                  default: () => <MusicType />,
                }}
              </Popover>
            ) : null} */}
            {state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
              <div
                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled, toggleMusicSheet.show && styles.isMusicSheet, styles.musicSheet, "driver-10"]}
                onClick={() => {
                  toggleMusicSheet.toggle(true);
                }}
              >
                <img class={styles.iconBtn} src={headImg(`shenggui.png`)} />
                <span>声部</span>
              </div>
            )}
            <div
              id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"}
              style={{ display: settingBtn.value.display ? "" : "none" }}
              class={["driver-6", styles.btn, settingBtn.value.disabled && styles.disabled, headTopData.settingMode && styles.isSettingMode, styles.settingMode]}
              onClick={() => (headTopData.settingMode = true)}
            >
              <img class={styles.iconBtn} src={headImg("icon_menu.png")} />
              <span>设置</span>
            </div>
          </div>
        </div>

        {/* 播放按钮 */}
        <div
          id="studnetT-7"
          style={{ display: playBtn.value.display ? "" : "none" }}
          class={[
            // 引导使用的类
            "driver-1",
            styles.playBtn,
            playBtn.value.disabled && styles.disabled,
            // state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.playLeftButton : state.platform === IPlatform.PC && state.musicScoreBtnDirection === "right" ? styles.playRightButton : "",
          ]}
          onClick={() => togglePlay(state.playState === "play" ? "paused" : "play")}
        >
          <div class={styles.btnWrap}>
            <img style={{ display: state.playState === "play" ? "none" : "" }} class={styles.iconBtn} src={headImg("icon_play.png")} />
            <img style={{ display: state.playState === "play" ? "" : "none" }} class={styles.iconBtn} src={headImg("icon_pause.png")} />
            <Circle style={{ opacity: state.playState === "play" ? 1 : 0 }} class={styles.progress} stroke-width={60} stroke-linecap={"square"} currentRate={state.playProgress} rate={100} color="#FFED78" layer-color="rgba(0,0,0,0)" />
          </div>
        </div>

        {/* 重播按钮 */}
        <div
          id="tips-step-9"
          style={{ display: resetBtn.value.display ? "" : "none" }}
          class={[styles.resetBtn, resetBtn.value.disabled && styles.disabled]}
          onClick={() => handleResetPlay()}
        >
          <img class={styles.iconBtn} src={headImg("icon_reset.png")} />
        </div>

        <Popup v-model:show={headTopData.settingMode} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
          <Settting />
          {state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide} />}
        </Popup>

        {/* 模式切换 */}
        {/* <ModeTypeMode /> */}
        <ModeView></ModeView>

        {/* isAllBtns */}
        {/* {isAllBtns.value && !query.isCbs && showGuideIndex.value && <TeacherTop></TeacherTop>}
        {isAllBtnsStudent.value && !query.isCbs && showGuideIndex.value && <StudentTop></StudentTop>} */}

        {/* 练习模式功能引导 加载音频完成 不是会员 */}
        {state.modeType === "practise" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && showWebGuide.value && (
          <PractiseDriver
            statusAll={{
              subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
              modelTypeStatus: toggleBtn.value.display,
              playType: playTypeBtn.value.display,
              originPlayType: state.playType === "play" ? true : false,
              backTitle: !(state.playState == "play" || followData.start || evaluatingData.startBegin),
              titleType: smoothAnimationState.isShow.value ? "TEXT" : isMusicList.value ? "IMG" : "NONE",
            }}
          />
        )}
        {/* 跟练模式功能引导 加载音频完成 不是会员 */}
        {state.modeType === "follow" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && showWebGuide.value && (
          <FollowDriver
            statusAll={{
              subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
            }}
          />
        )}
        {/* 评测模式功能引导 加载音频完成 不是会员 */}
        {state.modeType === "evaluating" && headTopData.modeType !== "init" && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && showWebGuide.value && (
          <EvaluatingDriver
            statusAll={{
              subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
            }}
          />
        )}
      </>
    );
  },
});