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

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

import iconBack from "./image/icon-back.svg";
import Title from "./title";
import { headImg } from "./image";
import { Badge, Circle, Popover, Popup, showConfirmDialog, showToast } from "vant";
import Speed from "./speed";
import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
import Settting from "./settting";
import state, { IPlatform, handleChangeSection, handleResetPlay, handleRessetState, togglePlay } 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";

/** 头部数据和方法 */
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;
        showToast("资源加载中，请稍后");
        return;
      }

      // 如果是pc端, 评测模式暂不可用
      if (state.platform === IPlatform.PC) {
        showConfirmDialog({
          className: "modalTip",
          title: "温馨提示",
          message: "该功能暂未开放，敬请期待!",
          showCancelButton: false,
        });
        return;
      }
      state.playIngSpeed = state.originSpeed;
      handleStartEvaluat();
      // 开发模式，把此处打开
      // state.modeType = "evaluating"
      // evaluatingData.rendered = true;
      // evaluatingData.soundEffectMode = true;
    } else if (value === "follow") {
      toggleFollow();
    }
    headTopData.modeType = "show";
  },
});

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

export default defineComponent({
  name: "header-top",
  emits: ["close"],
  setup(props, { emit }) {
    const query = getQuery();
    // 是否显示引导
    const showGuide = ref(false);
    const showStudentGuide = ref(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 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" || ["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 originBtn = computed(() => {
      // 选择模式,跟练模式 不显示
      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.music || !state.accompany) return { display: true, disabled: true };
      }
      return {
        disabled: false,
        display: true,
      };
    });

    /** 模式切换按钮 */
    const toggleBtn = computed(() => {
      // 选择模式, url设置模式 不显示
      if (headTopData.modeType !== "show" || !headTopData.showBack) return { display: false, disabled: false };
      // 跟练开始, 评测开始 禁用
      if (followData.start || evaluatingData.startBegin) return { display: true, disabled: true };

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

    /** 播放按钮 */
    const playBtn = computed(() => {
      // 选择模式 不显示
      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,
      };
    });

    /** 重播按钮 */
    const resetBtn = computed(() => {
      // 选择模式 不显示
      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;
        }
      } 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 ((state.platform === IPlatform.PC && res?.data?.api) === "attendClassBarStatus") {
        // state.attendHideMenu = res?.data?.hideMenu;
      }

      // 上课页面，按钮方向
      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;
      }
    });

    onUnmounted(() => {
      window.removeEventListener("message", changePlay);
    });

    // 设置改变触发
    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, state.platform === IPlatform.PC && styles.headRightTop, state.platform === IPlatform.PC && !state.attendHideMenu && styles.headRightTopHide]}
          onClick={(e: Event) => {
            e.stopPropagation();
            if (state.platform === IPlatform.PC) {
              // 显示隐藏菜单
              window.parent.postMessage(
                {
                  api: "onAttendToggleMenu",
                },
                "*"
              );
            }
          }}
        >
          <div class={[styles.back, "headTopBackBtn", !headTopData.showBack && styles.hidenBack]} onClick={handleBack}>
            <img src={iconBack} />
          </div>
          {query.iscurseplay === "play" || state.platform === IPlatform.PC ? null : <Title class="pcTitle" text={state.examSongName} rightView={false} />}

          <div
            class={[styles.headRight, state.platform === IPlatform.PC && styles.pcHeadRight]}
            onClick={(e: Event) => {
              e.stopPropagation();
            }}
          >
            <div
              id={state.platform === IPlatform.PC ? "teacherTop-0" : "studnetT-0"}
              style={{ display: toggleBtn.value.display ? "" : "none" }}
              class={[styles.btn, toggleBtn.value.disabled && styles.disabled]}
              onClick={() => {
                handleRessetState();
                headTopData.modeType = "init";
              }}
            >
              <img class={styles.iconBtn} src={headImg(`modeType.svg`)} />
              <span>模式</span>
            </div>

            {/* 一行谱模式，暂不支持节拍指针 */}
            {!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}

            {state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
              <div
                class={[styles.btn, state.playState === "play" && fingeringBtn.value.disabled && styles.disabled]}
                onClick={() => {
                  toggleMusicSheet.toggle(true);
                }}
              >
                <img class={styles.iconBtn} src={headImg(`shenggui.svg`)} />
                <span>声轨</span>
              </div>
            )}
            <div
              id={state.platform === IPlatform.PC ? "teacherTop-1" : "studnetT-1"}
              style={{ display: originBtn.value.display ? "" : "none" }}
              class={[styles.btn, originBtn.value.disabled && styles.disabled]}
              onClick={() => {
                state.playSource = state.playSource === "music" ? "background" : "music";
              }}
            >
              <img style={{ display: state.playSource === "music" ? "" : "none" }} class={styles.iconBtn} src={headImg(`music.svg`)} />
              <img style={{ display: state.playSource === "music" ? "none" : "" }} class={styles.iconBtn} src={headImg(`background.svg`)} />
              <span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
            </div>
            {state.modeType !== "evaluating" && (
              <div
                class={[styles.btn]}
                onClick={async () => {
                  metronomeData.disable = !metronomeData.disable;
                  metronomeData.metro?.initPlayer();
                }}
              >
                <img style={{ display: metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickoff.svg")} />
                <img style={{ display: !metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickon.svg")} />
                <span style={{ whiteSpace: "nowrap" }}>节拍器</span>
              </div>
            )}
            <div id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"} style={{ display: selectBtn.value.display ? "" : "none" }} class={[styles.btn, selectBtn.value.disabled && styles.disabled]} onClick={() => handleChangeSection()}>
              <img style={{ display: state.section.length === 0 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section0.svg`)} />
              <img style={{ display: state.section.length === 1 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section1.svg`)} />
              <img style={{ display: state.section.length === 2 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section2.svg`)} />
              <span>选段</span>
            </div>
            <div
              id={state.platform === IPlatform.PC ? "teacherTop-3" : "studnetT-3"}
              style={{ display: fingeringBtn.value.display ? "" : "none" }}
              class={[styles.btn, fingeringBtn.value.disabled && styles.disabled]}
              onClick={() => {
                state.setting.displayFingering = !state.setting.displayFingering;
              }}
            >
              <img style={{ display: state.setting.displayFingering ? "" : "none" }} class={styles.iconBtn} src={headImg(`icon_evaluatingOn.svg`)} />
              <img style={{ display: state.setting.displayFingering ? "none" : "" }} class={styles.iconBtn} src={headImg(`icon_evaluatingOff.svg`)} />
              <span>指法</span>
            </div>

            <Popover trigger="manual" v-model:show={headData.speedShow} placement={state.platform === IPlatform.PC ? "top" : "bottom"} overlay={false} offset={state.platform === IPlatform.PC ? [8, 40] : [0, 8]}>
              {{
                reference: () => (
                  <div
                    id={state.platform === IPlatform.PC ? "teacherTop-4" : "studnetT-4"}
                    style={{ display: speedBtn.value.display ? "" : "none" }}
                    class={[styles.btn, speedBtn.value.disabled && styles.disabled]}
                    onClick={(e: Event) => {
                      e.stopPropagation();
                      headData.speedShow = !headData.speedShow;
                    }}
                  >
                    <Badge class={styles.badge} content={state.playState === "play" ? Math.floor(state.playIngSpeed) : Math.floor(state.speed)}>
                      <img class={styles.iconBtn} src={headImg("icon_speed.svg")} />
                    </Badge>
                    <span>速度</span>
                  </div>
                ),
                default: () => <Speed />,
              }}
            </Popover>
            {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}
            <div id={state.platform === IPlatform.PC ? "teacherTop-6" : "studnetT-6"} style={{ display: settingBtn.value.display ? "" : "none" }} class={[styles.btn, styles.setBtn, settingBtn.value.disabled && styles.disabled]} onClick={() => (headTopData.settingMode = true)}>
              <img class={styles.iconBtn} src={headImg("icon_menu.svg")} />
              <span>设置</span>
            </div>
          </div>
        </div>

        {/* 播放按钮 */}
        <div
          id="studnetT-7"
          style={{ display: playBtn.value.display ? "" : "none" }}
          class={[
            styles.btn,
            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 : "",
            state.platform === IPlatform.PC && !state.attendHideMenu && styles.playButtonHide,
          ]}
          onClick={() => togglePlay()}
        >
          <div class={styles.btnWrap}>
            <img style={{ display: state.playState === "play" ? "none" : "" }} class={styles.iconBtn} src={headImg(state.platform === IPlatform.PC ? "pc_icon_playbtn.png" : "icon_play.svg")} />
            <img style={{ display: state.playState === "play" ? "" : "none" }} class={styles.iconBtn} src={headImg(state.platform === IPlatform.PC ? "pc_icon_pausebtn.png" : "icon_pause.svg")} />
            <Circle style={{ opacity: state.playState === "play" ? 1 : 0 }} class={styles.progress} stroke-width={80} currentRate={state.playProgress} rate={100} color="#FFC830" />
          </div>
        </div>

        {/* 重播按钮 */}
        <div
          id="tips-step-9"
          style={{ display: resetBtn.value.display ? "" : "none" }}
          class={[
            styles.btn,
            styles.resetBtn,
            resetBtn.value.disabled && styles.disabled,
            state.platform === IPlatform.PC && state.musicScoreBtnDirection === "left" ? styles.pauseLeftButton : state.platform === IPlatform.PC && state.musicScoreBtnDirection === "right" ? styles.pauseRightButton : "",
            state.platform === IPlatform.PC && !state.attendHideMenu && styles.playButtonHide,
          ]}
          onClick={() => handleResetPlay()}
        >
          <img class={styles.iconBtn} src={headImg(state.platform === IPlatform.PC ? "pc_icon_resetbtn.png" : "icon_resetbtn.svg")} />
        </div>

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

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

        {/* // 从课堂乐器学生端课件预览默认不显示会员
        if (storeData.user.vipMember || state.paymentType === "FREE" || query.showCourseMember === "true") {
          // 学生端
          data.showStudent = true;
        } else {
          // vip
          data.showVip = true;
        } */}
        {/* isAllBtns */}
        {isAllBtns.value && !query.isCbs && showGuideIndex.value && <TeacherTop></TeacherTop>}
        {isAllBtnsStudent.value && !query.isCbs && showGuideIndex.value && <StudentTop></StudentTop>}
      </>
    );
  },
});