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

import { defineComponent, reactive } from "vue";
import styles from "./index.module.less"
import { headImg } from "../image";
import { headTopData } from "../index"
import { Switch, showToast, Field, Popup } from "vant";
import state, { refreshMusicSvg } from "/src/state"
import { smoothAnimationState} from "/src/page-instrument/view-detail/smoothAnimation"
import Recommendation from "../../custom-plugins/helper-model/recommendation";
import { resetRenderMusicScore } from "/src/view/music-score";

export default defineComponent({
	name: "settting",
	setup() {
        const helperData = reactive({
			screenModelShow: false, // 投屏帮助
			recommendationShow: false, // 建议
		});
        // 加减评测频率
		const operateHz = (type: number) => {
			const minFrequency = state.baseFrequency - 10, maxFrequency = state.baseFrequency + 10
			let currentFrequency = state.setting.frequency
			if (type === 1) {
				if (currentFrequency - 1 < minFrequency) return showToast({ message: `最低标准音高${minFrequency}HZ` })
				currentFrequency = currentFrequency - 1
			} else {
				if (currentFrequency + 1 > maxFrequency) return showToast({ message: `最高标准音高${maxFrequency}HZ` })
				currentFrequency = currentFrequency + 1
			}
			state.setting.frequency = currentFrequency >= 0 ? currentFrequency : 0
		}
        const formatterTimeMs = (value: any) => value = String(Math.min(3000, value));
		return () => (
			<div class={styles.settting}>
                <div class={styles.head}>
					<img class={styles.headTit} src={headImg("settingName.png")} />
					<img class={styles.closeImg} src={headImg("closeImg.png")} onClick={()=>{ headTopData.settingMode = false }} />
				</div>
                <div class={styles.content}>
                    <div class={styles.conBox}>
                        <div class={styles.cellBox}>
                            <div class={styles.tit}>指法</div>
                            <Switch v-model={state.setting.displayFingering}></Switch>
                        </div>
                        <div class={styles.cellBox}>
                            <div class={styles.tit}>循环播放</div>
                            <Switch v-model={state.setting.repeatAutoPlay}></Switch>
                        </div>
                        <div class={styles.cellBox}>
                            <div class={styles.tit}>旋律线</div>
                            <Switch v-model={smoothAnimationState.isShow.value}></Switch>
                        </div>                            
                        <div class={styles.cellBox}>
                            <div class={styles.tit}>延迟检测</div>
                            <Switch v-model={state.setting.soundEffect}></Switch>
                        </div>                       
                        <div class={styles.cellBox}>
                            <div class={styles.tit}>标准音高</div>
                            <div class={styles.frequency}>
                                <img src={headImg("cutImg.png")} class={[styles.btn]} onClick={() => operateHz(1)} />
                                <div class={styles.frequencyNum}>{state.setting.frequency}HZ</div>
                                <img src={headImg("addImg.png")} class={[styles.btn]} onClick={() => operateHz(2)} />
                            </div>
                        </div>                        
                        <div class={styles.cellBox}>
                            <div class={styles.tit}>反应时间</div>
                            <div class={styles.reactionTimeBox}>
                                <Field class={styles.reactionTime} type="digit" 
                                    placeholder="最大可输入3000毫秒"
                                    formatter={formatterTimeMs}
                                    input-align={'center'}
                                    v-model:modelValue={state.setting.reactionTimeMs} />
                                <div class={styles.timeName}>毫秒</div>    
                            </div>
                        </div>
                        <div class={styles.cellBox}>
                            <div class={styles.tit}>切换谱面</div>
                            <div class={styles.radioBox}>
                                {
                                    [{name:'单行谱',value:true},{name:'多行谱',value:false}].map(item=>{
                                        return <div class={ state.isSingleLine===item.value && styles.active } onClick={ ()=>{ 
                                            state.isSingleLine = item.value 
                                            // resetRenderMusicScore(state.musicRenderType)
                                            headTopData.settingMode = false
                                            refreshMusicSvg();
                                            // musicScoreRef.value?.refreshMusicScore()
                                        } }>{item.name}</div>
                                    })
                                }
                            </div>
                        </div>
                        <div class={styles.cellBox}>
                            <div class={styles.tit}>转谱</div>
                            <div class={styles.radioBox}>
                                {
                                    [{name:'五线谱',value:'staff'},{name:'首调',value:'firstTone'},{name:'固定谱',value:'fixedTone'}].map(item=>{
                                        return <div class={ state.musicRenderType===item.value && styles.active } onClick={ ()=>{ 
                                            state.musicRenderType = item.value as any
                                            // resetRenderMusicScore(state.musicRenderType)
                                            headTopData.settingMode = false
                                            refreshMusicSvg();
                                        } }>{item.name}</div>
                                    })
                                }
                            </div>
                        </div>
                        <div class={styles.cellBtnBox}>
                            <img  src={headImg("tpbz.png")} />
                            <img  src={headImg("yjfk.png")} onClick={() => (helperData.recommendationShow = true)} />
                        </div>
                    </div>  
                </div>
                <Popup
					v-model:show={helperData.recommendationShow}
					class="popup-custom van-scale center-closeBtn recommenBoxClass_drag"
					transition="van-scale"
					teleport="body"
                    overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}
				>
                    <Recommendation
                        onClose={() => {
                            helperData.recommendationShow = false;
                        }}
                    />
				</Popup>
			</div>
		);
	},
});