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

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

import iconBack from "./image/icon-back.svg";
import Title from "./title";
import { headImg } from "./image";
import icons from "./image/headerTop.json";
import { Badge, Circle, Popover } from "vant";
import { metronomeData } from "../../helpers/metronome";
import Speed from "./speed";
import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
import { Popup } from "@varlet/ui";
import Settting from "./settting";
import ModeTypeMode from "./mode-type-mode";
import state, { handleChangeSection, handleResetPlay, handleRessetState, togglePlay } from "/src/state";
import { getAudioCurrentTime } from "/src/view/audio-list";
import { toggleFollow } from "/src/view/follow-practice";
import { api_back } from "/src/helpers/communication";
import MusicType from "./music-type";

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

export default defineComponent({
	name: "header-top",
	setup() {
		const headerData = reactive({
			settingMode: false,
			modeMode: true, // 模式弹框
		});
		const headRef = ref();

		const toggleEvaluat = () => {
			handleStartEvaluat();
		};

		/** 切换模式 */
		const handleChangeModeType = (value: "practise" | "follow" | "evaluating") => {
			if (value === "evaluating") {
				toggleEvaluat();
			} else if (value === "follow") {
				toggleFollow();
			}
			headerData.modeMode = false;
		};
		const disabledList = ["evaluating"];

		/** 按钮禁用 */

		/** 重播按钮显示条件 */
		const resetBtnDisplay = computed(() => {
			const currentTime = getAudioCurrentTime();
			const playState = state.playState;
			const modeType = state.modeType;
			return currentTime !== 0 && playState !== "play" && modeType === "practise";
		});
		/** 播放按钮显示条件 */
		const playBtnDisplay = computed(() => {
			const modeType = state.modeType;
			return modeType === "practise";
		});
		/** 指法显示条件 */
		const fingeringDisplay = computed(() => {
			return state.fingeringInfo.name;
		});

		/** 返回 */
		const handleBack = () => {
			api_back();
		};

		return () => (
			<div ref={headRef} class={styles.headerTop}>
				<div class={styles.back} onClick={handleBack}>
					<img src={iconBack} />
				</div>
				<Title text={state.examSongName} rightView={false} />

				<div class={styles.headRight} style={{ display: headerData.modeMode ? "none" : "" }}>
					<div
						class={styles.btn}
						onClick={() => {
							handleRessetState();
							headerData.modeMode = true;
						}}
					>
						<img class={styles.iconBtn} src={headImg(`modeType.svg`)} />
						<span>模式</span>
					</div>

					<div
						class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
						id="tips-step-6"
						onClick={() => {
							state.playSource = state.playSource === "music" ? "background" : "music";
						}}
					>
						<img class={styles.iconBtn} src={state.playSource === "music" ? icons.music : icons.background} />
						<span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
					</div>
					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} id="tips-step-4" onClick={() => handleChangeSection()}>
						<img class={styles.iconBtn} src={headImg(`section${state.section.length}.svg`)} />
						<span>选段</span>
					</div>
					<div
						style={{ display: fingeringDisplay.value ? "" : "none" }}
						class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
						onClick={() => {
							state.setting.displayFingering = !state.setting.displayFingering;
						}}
					>
						<img class={styles.iconBtn} src={state.setting.displayFingering ? icons.fingeringOn : icons.fingeringOff} />
						<span>指法</span>
					</div>

					{/* <div
						class={[styles.btn]}
						onClick={async () => {
							metronomeData.lineShow = !metronomeData.lineShow;
						}}
					>
						<img class={styles.iconBtn} src={headImg("iconStep.png")} />
						<span>{metronomeData.lineShow ? "高级" : "初级"}</span>
					</div> */}
					{/* <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.png")} />
						<img style={{ display: !metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickon.png")} />
						<span style={{ whiteSpace: "nowrap" }}>节拍器</span>
					</div> */}

					<Popover trigger="manual" v-model:show={headData.speedShow} placement="bottom" overlay={false}>
						{{
							reference: () => (
								<div
									id="tips-step-8"
									class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
									onClick={(e: Event) => {
										e.stopPropagation();
										headData.speedShow = !headData.speedShow;
									}}
								>
									<Badge class={styles.badge} content={state.speed}>
										<img class={styles.iconBtn} src={headImg("speed.svg")} />
									</Badge>
									<span>速度</span>
								</div>
							),
							default: () => <Speed />,
						}}
					</Popover>
					<Popover trigger="manual" v-model:show={headData.musicTypeShow} placement="bottom-end" overlay={false}>
						{{
							reference: () => (
								<div
									class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
									onClick={(e: Event) => {
										e.stopPropagation();
										headData.musicTypeShow = !headData.musicTypeShow;
									}}
								>
									<img class={styles.iconBtn} src={headImg("icon-zhuanpu.svg")} />
									<span>转简谱</span>
								</div>
							),
							default: () => <MusicType />,
						}}
					</Popover>

					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} onClick={() => (headerData.settingMode = true)}>
						<img class={styles.iconBtn} src={headImg("menu.svg")} />
						<span>设置</span>
					</div>

					<div
						style={{ display: playBtnDisplay.value ? "" : "none" }}
						class={[styles.btn, styles.playBtn, disabledList.includes(state.modeType) && styles.disable]}
						id="tips-step-5"
						onClick={() => togglePlay()}
					>
						<div class={styles.btnWrap}>
							<img class={styles.iconBtn} src={state.playState === "paused" ? icons.play : icons.pause} />
							<Circle
								style={{ opacity: state.playState === "play" ? 1 : 0 }}
								class={styles.progress}
								stroke-width={80}
								currentRate={state.playProgress}
								rate={100}
								color="#FFC830"
							/>
						</div>
					</div>
					<div
						style={{ display: resetBtnDisplay.value ? "" : "none" }}
						class={[styles.btn, styles.resetBtn, disabledList.includes(state.modeType) && styles.disable]}
						id="tips-step-7"
						onClick={() => handleResetPlay()}
					>
						<img class={styles.iconBtn} src={headImg("replay.svg")} />
					</div>
				</div>

				<Popup teleport="body" defaultStyle={false} v-model:show={headerData.settingMode}>
					<Settting onClose={() => (headerData.settingMode = false)} />
				</Popup>
				<Popup teleport="body" position="bottom" closeOnClickOverlay={false} overlay={false} defaultStyle={false} v-model:show={headerData.modeMode}>
					<ModeTypeMode onClose={(value) => handleChangeModeType(value)} />
				</Popup>
			</div>
		);
	},
});