orchestra-music-score/src/subpages/colexiu/buttons/evaluating.tsx

import { Button, Toast, Popup } from 'vant'
import { defineComponent, onBeforeUnmount, onMounted, Ref, ref, Teleport, Transition, reactive } from 'vue'
import '@dotlottie/player-component'
import detailState, { isRhythmicExercises } from '/src/pages/detail/state'
import SettingState from '/src/pages/detail/setting-state'
import {
  IPostMessage,
  listenerMessage,
  postMessage,
  promisefiyPostMessage,
  removeListenerMessage,
  CallBack
} from '/src/helpers/native-message'
import { browser } from '/src/helpers/utils'
import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
import { getBoundingBoxByverticalNote, getNoteByMeasuresSlursStart, getParentNote } from '/src/pages/detail/helpers'
import { handleCheckEvaluatStatus, useClientType, useOriginSearch } from '../uses'
import { startButtonShow } from './index'
import { getLeveByScoreMeasure } from '/src/pages/detail/evaluating/helper'
import Evaluating, { evaluatingShow } from '../popups/evaluating'
// @ts-ignore
import styles from './index.module.less'
import { Vue3Lottie } from 'vue3-lottie'
import startData from './data/start_new.json'
import startingData from './data/starting_new.json'
import { unitTestData } from '../unitTest'
import iconEvaluatingStart from './icons/icon-evaluatingStart.png'
import qs from 'query-string'
import CheckDelayPopup from "/src/pages/detail/CheckDelayPopup";
import Headphone, { HeadphoneData } from "/src/pages/detail/Headphone";


/** 初始化评测音频 */
export const evaluatCreateMusicPlayer = () => {
	return new Promise((resolve) => {
		// 初始化曲谱音频 和效音音频
		postMessage(
      {
        api: "createMusicPlayer",
        content: {
          musicSrc: runtime.songs.background || runtime.songs.music, // 曲谱音频url
          tuneSrc: "https://oss.dayaedu.com/cloud-coach/1686725501654check_music1_(1).mp3", //效音音频url
        },
      },
      () => {
        if (browserInfo.ios) {
          resolve(true);
        }
      }
    );
		// 安卓不需要
		if(!browserInfo.ios){
			resolve(true)
		}
	})
}

const searchParams: any = qs.parse(location.search)

/**
 * 节拍器时长
 * 评测模式时，应该传节拍器时长
 * 阶段评测时，判断是否从第一小节开始，并且曲子本身含有节拍器，需要传节拍器时长，否则传0
 */
let actualBeatLength = 0

let backtime = 0

const initBehaviorId = '' + new Date().valueOf()
const evaluating = ref(false)
const playStatus: Ref<'connecting' | 'play' | 'stop'> = ref('stop')
const endloading = ref(false)
const connentLoading = ref(false)
const playUrl: Ref<string> = ref('')
const endResult = ref(null)
const browserInfo = browser()
const scoreList: any[] = []

/** 延迟数据 */
const delayData =  reactive({
  /** 是否强制检测 */
  isForce: true,
  /** 弹窗 */
  open: false,
  /** 延迟次数 */
  count: 0,
  /** 延迟时间 */
  time: 0,
  /** 耳机状态 */
  erji: false,
  /** 检测状态 */
  checkStatus: 'init' as 'init' | 'ing' | 'error',
  step: 1,
  earPhoneType: "" as "" | "有线耳机" | "蓝牙耳机",
})
  /** 获取耳机状态 */
  const getWiredStatus = (): Promise<boolean> => {
    return new Promise((resolve) => {
      const timer = setTimeout(() => {
        resolve(false);
      }, 1000)
      postMessage({
        api: "isWiredHeadsetOn",
      }, (res) => {
        delayData.earPhoneType = res?.content?.type || "";
        const checkIsWired = res?.content?.checkIsWired ? true : false;
        if (checkIsWired) {
          if (delayData.step <= 5) {
            delayData.step = 3
          }
        } else {
          if (delayData.step === 2 || delayData.step === 3) {
            delayData.step = 4
          }
        }
        clearTimeout(timer)
        resolve(checkIsWired);
      });
    });
  }

  const closeErji = () => {
    //
  }

  /** 获取设备延迟 */
  const getDeviceDelay = (): Promise<number> => {
    return new Promise((resolve) => {
      const timer = setTimeout(() => {
        resolve(0);
      }, 1000)
      postMessage({
        api: "getDeviceDelay",
      }, (res) => {
        const delay = res?.content?.value > 0 ? res?.content?.value : 0;
        clearTimeout(timer)
        resolve(delay);
      });
    });
  }
  /** 设备延迟检测结束 */
  const handleCheckDelayEnd = () => {
    if (delayData.erji) {
      closeErji();
    } else {
      // this.erjiShow = true;
      HeadphoneData.toggle();
    }
  }
  /** 评测效验 */
  const checkEvaluating = async () => {
    delayData.erji = await getWiredStatus();
    delayData.time = await getDeviceDelay();
    // 没有设备延迟数据,显示检测组件,并持续检测耳机状态
    if (!delayData.time || delayData.isForce) {
      delayData.open = (runtime.delayCheckFirst && searchParams.evaluatingRecord || !SettingState.sett.tuning) ? false : true
      delayData.count = 0;
      if (runtime.delayCheckFirst && searchParams.evaluatingRecord) {
        // closeErji()
      }
      return;
    }
    handleCheckDelayEnd()
  }  


		/** 持续检测耳机状态 */
    const checkWiredStatus = () => {
      console.log('耳机状态',delayData.checkStatus)
			// 设备检测结束,停止获取耳机状态
			if (delayData.checkStatus !== 'ing' || delayData.open === false) {
				return
			}
			setTimeout(async () => {
				delayData.erji = await getWiredStatus();
				if (delayData.erji) {
					delayData.count = 0;
					delayData.time = 0;
					delayData.checkStatus = 'error'
				}
				checkWiredStatus();
			}, 1000)
		}  
		/** 切换效音 */
		const handleToggleTune = (state: 'start' | 'stop' | 'finishTune') => {
			if (state === 'start') {
        delayData.step = 5
				// 开始效音
				postMessage({
					api: "startTune",
					content: {
						count: delayData.count + '',
					}
				}, (res) => {
          // 用户没有授权，需要重置状态
          if (res?.content?.reson) {
            delayData.step = 1
            delayData.checkStatus = 'init'
          } else {
            setTimeout(() => {
              handleToggleTune('stop')
            }, 1500)
          }
        })
			} else if (state === 'stop') {
				// 结束效音，触发时机： 1.监听后台效音返回 2.点击跳过效音或关闭效音
				postMessage({
					api: "endTune"
				})
			} else if (state === 'finishTune') {
        delayData.step = 6
				// 效音完成
				postMessage({
					api: "finishTune",
				}, (res) => {
					const result = res?.content?.result //1成功 0失败
					// Toast('检测延迟完成')
					// setTimeout(() => {
					// 	delayData.open = false
					// }, 500)
				})
			}
			
		}    
		/** 开始效音 */
		const startTune = () => {
			// 带了耳机,停止播放效音
			if (delayData.erji) return;
			handleToggleTune('start')
		}     
		/** 停止设备延迟检测 */
		const handleStopCheckDelay = () => {
			runtime.delayCheckFirst = true
			delayData.open = false
			delayData.checkStatus = 'init'
      delayData.step = 1
			handleToggleTune('stop')
			// this.close();
		} 
		/** 开始检测设备延迟 */
		const handleStartCheckDelay = async () => {
			if (delayData.checkStatus === 'ing') return;
      delayData.step = 2
			delayData.erji = await getWiredStatus();
			if (delayData.erji) {
				delayData.checkStatus = 'error'
				return;
			}
			delayData.checkStatus = 'ing';
      setTimeout(() => {
        startTune()
      }, 2000)
			checkWiredStatus();
		}

// frequency 频率, amplitude 振幅, decibels 分贝
type TCriteria = "frequency" | "amplitude" | "decibels";
/** 获取评测标准 */
const getEvaluationCriteria = () => {
	let criteria: TCriteria = "frequency";
	// 声部打击乐
	if ([23, 113, 121].includes(detailState.subjectId)) {
		criteria = "amplitude";
	} else if (isRhythmicExercises()) {
		// 分类为节奏练习
		criteria = "decibels";
	}
	return criteria;
};

/**
 * 默认按照442计算的音符频率，此处转化为按照设置进行调整
 * @param num 频率
 * @returns 转化后频率
 */
const formatPitch = (num?: number): number => {
  if (!num) {
    return -1
  }
  if (SettingState.sett.hertz && SettingState.sett.hertz !== 442) {
    return (num / 442) * SettingState.sett.hertz
  }
  return num
}
let starTime = 0
const formatTimes = () => {
  const rate = runtime.speed / detailState.baseSpeed //1
  actualBeatLength = Math.round(detailState.times[0].fixtime * 1000 / rate)
  const difftime = detailState.times?.[0]?.difftime || 0
  let ListenMode = false
  let dontEvaluatingMode = false
  let skip = false
  const datas = []
  let times = detailState.times
  // 阶段评测前一个节拍的标示
  let preLyricsContent = ''
  let preTimes = []
  if (unitTestData.isSelectMeasureMode) {
    const startIndex = detailState.times.findIndex(
      (n: any) => n.NoteToGraphicalNoteObjectId == detailState.section[0].NoteToGraphicalNoteObjectId
    )
    const endIndex = detailState.times.findIndex(
      (n: any) => n.NoteToGraphicalNoteObjectId == detailState.section[1].NoteToGraphicalNoteObjectId
    )
    times = detailState.times.filter((n: any, index: number) => {
      return index >= startIndex && index <= endIndex
    })
    preTimes = detailState.times.filter((n: any, index: number) => {
      return index < startIndex
    })
    starTime = times[0].sourceRelativeTime || times[0].relativeTime
    actualBeatLength = startIndex == 0 && !detailState.needTick ? actualBeatLength : 0
    // console.log("🚀 ~ times", times, '开始小节', startIndex, actualBeatLength)
  }
  // 找到阶段评测，开始小节前面最近的是play或者listen的小节
  if (preTimes.length) {
    for (let index = preTimes.length-1; index >= 0; index--) {
      const item = preTimes[index]
      const note = getNoteByMeasuresSlursStart(item)
      if (note.formatLyricsEntries.contains('Play') || note.formatLyricsEntries.contains('Play...')) {
        preLyricsContent = 'Play'
        break
      }
      if (note.formatLyricsEntries.contains('Listen')) {
        preLyricsContent = 'Listen'
        break
      }
    }
    preLyricsContent = preLyricsContent ? preLyricsContent : 'Play'
  }
  let measureIndex = -1
  let recordMeasure = -1
  for (let index = 0; index < times.length; index++) {
    const item = times[index]
    const note = getNoteByMeasuresSlursStart(item)
    const rate = runtime.speed / detailState.baseSpeed //1
    const start = difftime + (item.sourceRelativeTime || item.relativeTime) - starTime
    const end = difftime + (item.sourceRelaEndtime || item.relaEndtime) - starTime
    // console.log(start, end, starTime)
    const isStaccato =
      typeof note.voiceEntry.isStaccato === 'function' ? note.voiceEntry.isStaccato() : note.voiceEntry.isStaccato
    const noteRate = isStaccato ? 0.5 : 1
    // console.log('注脚', note.formatLyricsEntries)
    // 如果阶段评测，开始小节没有注脚，则取前面最近的小节的注脚
    if (index == 0 && !note.formatLyricsEntries.length) {
      ListenMode = preLyricsContent === 'Play' ? false : preLyricsContent === 'Listen' ? true : false
    }
    if (note.formatLyricsEntries.contains('Play') || note.formatLyricsEntries.contains('Play...')) {
      ListenMode = false
    }
    if (note.formatLyricsEntries.contains('Listen')) {
      ListenMode = true
    }
    if (note.formatLyricsEntries.contains('纯律结束')) {
      dontEvaluatingMode = false
    }
    if (note.formatLyricsEntries.contains('纯律')) {
      dontEvaluatingMode = true
    }
    const nextNote = detailState.times[index + 1]
    if (skip && (note.stave || !note.noteElement.isRestFlag || (nextNote && !nextNote.noteElement.isRestFlag))) {
      skip = false
    }
    if (note.noteElement.isRestFlag && !!note.stave && !!nextNote && nextNote.noteElement.isRestFlag) {
      skip = true
    }
    if (note.measureOpenIndex != recordMeasure) {
      measureIndex++
      recordMeasure = note.measureOpenIndex
    }
    // console.log(note.measureOpenIndex , measureIndex, note.noteElement.sourceMeasure.measureListIndex)
    const data = {
      timeStamp: (start * 1000) / rate,
      duration: ((end * 1000) / rate - (start * 1000) / rate) * noteRate,
      frequency: formatPitch(item.noteElement?.pitch?.frequency),
      nextFrequency: formatPitch(item.noteElement?.pitch?.nextFrequency),
      prevFrequency: formatPitch(item.noteElement?.pitch?.prevFrequency),
      measureIndex: measureIndex, //note.measureOpenIndex,
      measureRenderIndex: note.noteElement.sourceMeasure.measureListIndex,
      dontEvaluating: ListenMode || dontEvaluatingMode || item.skipMode,
      musicalNotesIndex: index, //item.i,
      denominator: note.noteElement?.Length.denominator,
      isOrnament: !!note?.voiceEntry?.ornamentContainer,
    }
    // console.log('时间1111', data)
    datas.push(data)
  }
  return datas
}
const connect = async () => {
  const search = useOriginSearch()
  connentLoading.value = true
  const behaviorId = sessionStorage.getItem('behaviorId') || search.behaviorId || initBehaviorId
  const rate = runtime.speed / detailState.baseSpeed //1

  const content = {
    musicXmlInfos: formatTimes(),
    subjectId: detailState.subjectId ? detailState.subjectId : detailState.isPercussion ? 1 : detailState.subjectId,
    detailId: detailState.activeDetail?.id,
    examSongId: search.id,
    xmlUrl: detailState?.activeDetail?.xmlUrl,
    partIndex: detailState.partIndex,
    behaviorId,
    platform: 'WEB',
    clientId: 'STUDENT',
    hertz: SettingState.sett.hertz,
    feature: 'EVALUATION',
    practiceSource: (search.resourceType && search.resourceType === 'practice') ? 'UNIT_TEST_PRACTICE' : search.unitId ? 'UNIT_TEST' : 'PRACTICE',
    // 这里定义的是数字但是因为是通过input输入所以强制转化一次
    reactionTimeMs: parseFloat('' + SettingState.eva.reactionTimeMs) || 0,
    speed: runtime.speed,
    heardLevel: SettingState.eva.difficulty,
    // beatLength: Math.round((RuntimeUtils.getFixTime(detailState.times[0].beatSpeed) * 1000) / rate),
    beatLength: actualBeatLength,
    evaluationCriteria: getEvaluationCriteria(),
  }
  // console.log("🚀 ~ content:", content, rate)
  const clientType = useClientType()
  if (clientType === 'student') {
    content.clientId = 'STUDENT'
  } else if (clientType === 'teacher') {
    content.clientId = 'TEACHER'
  } else {
    content.clientId = 'BACKEND'
  }
  if (browserInfo.android) {
    content.platform = 'ANDROID'
  }
  if (browserInfo.ios) {
    content.platform = 'IOS'
  }
  const evt = await promisefiyPostMessage({
    api: 'startEvaluating',
    content: content,
  })
  if (evt?.content?.reson) {
    Toast.fail({
      message: evt?.content?.reson,
    })
    connentLoading.value = false
    throw evt
  }
  connentLoading.value = false
}

const sendOffsetTime = (offsetTime: number) => {
  postMessage(
    {
      api: 'proxyServiceMessage',
      content: {
        header: {
          commond: 'audioPlayStart',
          type: 'SOUND_COMPARE',
        },
        body: {
          offsetTime,
        },
      },
    },
    () => {
      backtime = 0
    }
  )
}

const cancelTheEvaluation = () => {
  const search = useOriginSearch()
  setTimeout(() => {
    postMessage({ api: 'endEvaluating', content: { musicScoreId: search.id } })
    playStatus.value = 'stop'
    RuntimeUtils.pause()
    RuntimeUtils.resetPlayStatus()
    RuntimeUtils.clearIntervalTimeline()
    RuntimeUtils.setCurrentTime(0)
    Toast.clear()
  }, 500);
}

const stopPlay = () => {
  console.log('调用stopPlay')
  if (!connentLoading.value) {
    cancelTheEvaluation()
  }
  startButtonShow.value = true
  connentLoading.value = false
  evaluating.value = false
}
export const evaluatStopPlay = stopPlay

const startPlay = () => {
  console.log('连接服务成功,开始播放', new Date().getTime() - runtime.clickTime)
  // if (!SettingState.eva.mute) {
  //   RuntimeUtils.changeAllMode()
  // } else {
  //   RuntimeUtils.changeMode('background')
  // }
  startButtonShow.value = false
  RuntimeUtils.setPlayState()
}

const setPlayer = async () => {
  // 连接中,禁止重复连接
  if (connentLoading.value) return
  runtime.clickTime = new Date().getTime()
  RuntimeUtils.resetPlayStatus()
  if (detailState.isPauseRecording) {
    evaluating.value = false
    startPlay()
    return
  }
  detailState.evaluatings = {}
  const hint = Toast({
    duration: 0,
    message: '服务连接中...',
    type: 'loading',
  })
  try {
    await connect()
    startPlay()
    setTimeout(() => {
      console.log('关闭弹窗')
      Toast.clear()
      hint.close()
    }, 100)
  } catch (error) {
    runtime.evaluatingStatus = false
    Toast.clear()
  }
}

const togglePlay = () => {
  if (detailState.isPauseRecording) {
    evaluating.value = false
    startPlay()
    return
  }
  if (evaluating.value) {
    stopPlay()
  } else {
    setPlayer()
  }
}

const timeupdate = () => {
  console.log('播放事件被触发', playUrl.value, evaluating.value)
  if (playUrl.value) {
    const nowTime = new Date().getTime()
    // console.log('播放开始的时间', nowTime)
    // synced = true
    let time = runtime.audiosInstance?.audios[playUrl.value].currentTime
    // 只有选段模式，并且开始小节非第一小节时，才执行以下计算
    const sectionIdx = detailState.section.length ? detailState.section[0].i : 0
    if (unitTestData.isSelectMeasureMode && sectionIdx > 0 ) {
      time = time - detailState.section[0].time
    }
    console.log('已播放时长: ', time * 1000)
    console.log('不减掉已播放时间: ', nowTime - backtime)
    const delayTime = nowTime - backtime - time * 1000
    console.log('真正播放延迟', delayTime, time, unitTestData.isSelectMeasureMode, sectionIdx)
    // 蓝牙耳机延迟一点发送消息确保在录音后面
    setTimeout(() => {
      sendOffsetTime(delayTime)
    }, 220)
  }
}

/**
 * 播放器停止事件
 */
const playerStop = () => {
  // alert('stop' + this.endloading)
  console.log('playerStop播放器停止事件', endloading.value)
  if (endloading.value) {
    return
  }
  playStatus.value = 'stop'
  endloading.value = true
  startButtonShow.value = true
  RuntimeUtils.resetPlayStatus()
  RuntimeUtils.clearIntervalTimeline()
  RuntimeUtils.setCurrentTime(0)
  Toast({
    duration: 0,
    message: '评分中...',
    type: 'loading',
  })
  setTimeout(() => {
    postMessage(
      {
        api: 'endEvaluating',
        content: {
          musicScoreId: useOriginSearch().id,
        },
      },
      (evt) => {
        console.log('调用endEvaluating结束', evt)
        endloading.value = false
        evaluating.value = false
        // RuntimeUtils.setCaptureMode()
      }
    )
    RuntimeUtils.endCapture()
  }, 500);
}
export const evaluatPlayerStop = playerStop

const endevent = (evt: Event) => {
  // 如果是单元测验和课后训练 播放结束
  if (unitTestData.isSelectMeasureMode && playStatus.value === 'play') {
    playerStop()
    canSubmit.value = true
    return
  }
  if ((evt.target as HTMLAudioElement)?.src === playUrl.value && playStatus.value === 'play') {
    playerStop()
    canSubmit.value = true
  }
  if (detailState.isAppPlay) {
    playerStop()
    canSubmit.value = true
  }
}

/**正式开始评测 */
const evaluatStart = () => {
  playStatus.value = 'play'
  if (detailState.isPauseRecording) {
    postMessage(
      {
        api: 'resumeRecording',
      },
      () => {
        evaluating.value = true
        detailState.isPauseRecording = false
        RuntimeUtils.setCaptureMode()
      }
    )
    return
  } else {
    RuntimeUtils.setCaptureMode()
  }
  console.log('开始录音', new Date().getTime())
  
  postMessage(
    {
      api: 'startRecording',
      content: {
        accompanimentState: SettingState.eva.mute ? 1 : 0
      }
    },
    () => {
      // console.log('开始录音app回调时间', Date.now())
      backtime = Date.now()
      evaluating.value = true
      if (detailState.activeDetail?.midiUrl) {
        console.log('midiUrl', detailState.activeDetail?.midiUrl)
        setTimeout(() => {
          sendOffsetTime(0)
        }, 220)
      }
    }
  )
  RuntimeUtils.startCapture()
}

/**
 * 酷乐秀活动接口，Url中有设置并且仅在学生端提评分交数据
 * 管乐团单元测验, url中有单元测验ID仅在学生端提评分交数据
 */
const submitEvaluationScore = async (data: any) => {
  const search = useOriginSearch()
  if (search.unitId) {
    if (!canSubmit.value) {
      Toast('完整演奏结束才算测验分数！')
      return
    }
    (endResult.value as any)?.score && scoreList.push((endResult.value as any)?.score)
    /** 有单元测验时,存储分数缓存 */
    postMessage({
      api: 'setCache',
      content: {
        key: 'h5-orchestra-unit',
        value: JSON.stringify({
          musicId: search.id || '',
          unitId: search.unitId || '',
          questionId: search.questionId || '',
          score: canSubmit.value ? (endResult.value as any)?.score || 0 : 0,
        }),
      },
    })
    canSubmit.value = false
  }
}

/** 活动使用，只有在全部评测完成后才能提交，避免只是一小节就高分的情况 */
const canSubmit = ref(false)

/**接受websocket返回的信息 */
const sendResult = (evt?: IPostMessage) => {
  const { body, header } = evt?.content || {}
  console.log('评测返回', body)
  if (body && header) {
    const data = evt?.content?.body
    if (evt?.content.header.commond === 'overall') {
      // console.log(evt)
      detailState.isHideEvaluatReportSaveBtn = false;
      Toast.clear()
      endResult.value = data
      evaluatingShow.value = true
      submitEvaluationScore(data)
    } else if (evt?.content.header.commond === 'checkDone') {
      // 此处已经在校音中单独监听不做处理
    } else if (evt?.content.header.commond === 'checking') {
      // 此处已经在校音中单独监听不做处理
    } else if (evt?.content.header.commond === "recordEnd") {
      if (delayData.checkStatus !== 'ing') return
        delayData.count++;
      if (delayData.count >= 2) {
        handleToggleTune('finishTune');
        return;
      }
      setTimeout(() => {
        startTune()
      }, 100)
    } else {
      const getBeforeNote = (index: number) => {
        while (index >= 0) {
          const item = detailState.times[index]
          if (item.stave) {
            return item
          }
          index--
        }
      }
      const setEvaluatings = (note: any, data: any, dontTransition = false) => {
        const startNote = getBoundingBoxByverticalNote(note)
        // console.log(detailState.evaluatings, startNote)
        detailState.evaluatings = {
          ...detailState.evaluatings,
          [startNote.measureIndex]: {
            ...startNote,
            ...getLeveByScoreMeasure(data.score),
            score: data.score,
            dontTransition,
          },
        }
      }

      for (let index = 0; index < detailState.times.length; index++) {
        let time = detailState.times[index]
        if (data.measureRenderIndex == time.noteElement.sourceMeasure.measureListIndex) {
          if (!time.stave) {
            const ntime = getBeforeNote(index)
            // console.log('ntime', ntime)
            if (ntime) {
              time = ntime
            }
          }
          if (!time.noteElement.tie) {
            setEvaluatings(time, data)
          } else {
            for (const item of time.noteElement.tie.notes) {
              const note = getParentNote(item)
              if (!note) continue
              setEvaluatings(
                note,
                data,
                item.NoteToGraphicalNoteObjectId !== time.noteElement.tie.StartNote?.NoteToGraphicalNoteObjectId
              )
            }
          }
          break
        }
      }
    }
  }
}

const onProgress = () => {
  // console.log(runtime.currentTimeNum, detailState.times[detailState.times.length - 1]?.time - 2, detailState.times)
  if (runtime.currentTimeNum >= detailState.times[detailState.times.length - 1]?.time - 2) {
    canSubmit.value = true
  }
}

const cloudMetronome = (evt: any) => {
  startButtonShow.value = true
}

/** 监听评测弹窗是否隐藏保存演奏按钮 */
const hideComplexButton = (callback: CallBack, listen?: boolean) => {
	if (listen) {
		listenerMessage("hideComplexButton", callback);
	} else {
		removeListenerMessage("hideComplexButton", callback);
	}
};

// 隐藏存演奏按钮
const handleComplexButton = (res?: IPostMessage) => {
	console.log('监听是否隐藏保存按钮', res)
	if (res?.content) {
		const { header, body } = res.content;
		detailState.isHideEvaluatReportSaveBtn = true
	}
};

// 离开之前再提交一次最高分数
export const submitMaxScore = () => {
  const search = useOriginSearch()
  if (search.unitId && scoreList.length) {
    console.log('最高分',scoreList,Math.max(...scoreList))
    postMessage({
      api: 'setCache',
      content: {
        key: 'h5-orchestra-unit',
        value: JSON.stringify({
          musicId: search.id || '',
          unitId: search.unitId || '',
          questionId: search.questionId || '',
          score: Math.max(...scoreList),
        }),
      },
    })
  }
}
/**
 * 木管(长笛 萨克斯 单簧管)乐器一级的2、3、6测评要放原音音频
 * 铜管乐器一级的1a，1b，5，6测评要放原音音频
 */
const getMusicMode = (): RuntimeUtils.IMode => {
	const muguan = [2, 4, 5, 6];
	const tongguan = [12, 13, 14, 15, 17];
	if (muguan.includes(detailState.subjectId) && (detailState.activeDetail?.examSongName || "").search(/[^\u0000-\u00FF](1-2|1-3|1-6)/gi) > -1) {
		return "music";
	}
	if (tongguan.includes(detailState.subjectId) && (detailState.activeDetail?.examSongName || "").search(/[^\u0000-\u00FF](1-1-1|1-1-2|1-5|1-6)/gi) > -1) {
		return "music";
	}
	if ([23, 113, 121].includes(detailState.subjectId)) {
		return "music";
	}
	return "background";
};

export default defineComponent({
  name: 'ColexiuButtonEvaluating',
  setup(props, { expose }) {
    onMounted(async () => {
      console.log('进入评测模块')
      if (!SettingState.eva.mute) {
        RuntimeUtils.changeAllMode();
      } else {
        RuntimeUtils.changeMode('background', 'all')
      }
      handleCheckEvaluatStatus()
      // 如果为单元测验和课后训练,不清楚选段数据
      if (!unitTestData.isSelectMeasureMode) {
        detailState.section = []
        detailState.sectionStatus = false
      }
      playUrl.value = runtime.songs.background || (runtime.songs.music as string)
      // runtime.audiosInstance?.audios[playUrl.value]?.addEventListener('play', timeupdate)
      // runtime.audiosInstance?.audios[playUrl.value]?.addEventListener('timeupdate', onProgress)
      // RuntimeUtils.event.on('next-click', playerStop)
      RuntimeUtils.event.on('ended', endevent)
      listenerMessage('sendResult', sendResult)
      // listenerMessage('cancelEvaluating', cancelTheEvaluation)
      listenerMessage('cloudTimeUpdae', onProgress)
      RuntimeUtils.event.on('tickDestroy', cloudMetronome)
      RuntimeUtils.event.on('tickEnd', evaluatStart)
      hideComplexButton(handleComplexButton, true);
      // 开始效验
		  checkEvaluating()
    })

    onBeforeUnmount(() => {
      // runtime.audiosInstance?.audios[playUrl.value]?.removeEventListener('play', timeupdate)
      // runtime.audiosInstance?.audios[playUrl.value]?.removeEventListener('timeupdate', onProgress)
      // RuntimeUtils.event.off('next-click', playerStop)
      RuntimeUtils.event.off('ended', endevent)
      RuntimeUtils.event.off('tickDestroy', cloudMetronome)
      removeListenerMessage('sendResult', sendResult)
      // removeListenerMessage('cancelEvaluating', cancelTheEvaluation)
      removeListenerMessage('cloudTimeUpdae', onProgress)
      hideComplexButton(() => {}, false);
      RuntimeUtils.event.off('tickEnd', evaluatStart)
      submitMaxScore()
    })

    expose({
      setPlayer,
      startPlay,
      stopPlay,
      togglePlay,
      playerStop,
      evaluating,
      connentLoading,
      playStatus,
      cancelTheEvaluation,
    })

    return () => {
      return (
        <Teleport to="body" key="StartEvaluating">
          {/* 评测完成结果显示 */}
          <Evaluating data={endResult.value} />

          <Transition name="finish">
            {startButtonShow.value && (
              <div
                style={{
                  backgroundImage: `url(${iconEvaluatingStart})`,
                  'transform': detailState.isSpecialShapedScreen ? `translateX(${detailState.notchHeight / 4}px)`  : '',
                }}
                class={[styles.evaluatStartBtn]}
                onClick={() => {
                  setPlayer()
                }}
              ></div>
            )}
          </Transition>

          {!evaluating.value ? (
            <div class={styles.dialogueBox} key="start">
              <div class={styles.dialogue}>
                <div>
                  演奏前请调整好乐器，保证最佳演奏状态。<span class={styles.triangle}></span>
                </div>
              </div>
              <Vue3Lottie class={styles.dialogueIcon} animationData={startData}></Vue3Lottie>
            </div>
          ) : (
            <div class={styles.dialogueBox} key="starting">
              <div class={styles.inRadio}>收音中...</div>
              <Vue3Lottie class={styles.inRadioIcon} animationData={startingData}></Vue3Lottie>
            </div>
          )}

        {/* 延迟检测窗口 */}
				<Popup 
					teleport="body"
					class="popup-scale" 
					transition="van-scale" 
					overlay={false}
					show={delayData.open}
					onClose={() => handleCheckDelayEnd()}
				>
					<CheckDelayPopup 
						delayData={delayData}
						onStartCheckDelay={() => handleStartCheckDelay()}
						onClose={() => handleStopCheckDelay()} 
					/>
				</Popup>
        </Teleport>
      )
    }
  },
})