classroom-app/src/views/tempo-practice/setting-modal/index.tsx

import { computed, defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import { Button, showToast } from 'vant';
import {
  barLineList,
  beatList,
  elementList,
  renderScore,
  setting,
  tempo4,
  tempo8
} from '../setting';
import { getImage } from '../images/music';
import { hendleEndTick } from '../tick';
import { hendleEndBeat } from '../beat-tick';
import deepClone from '@/helpers/deep-clone';
import { useRoute } from 'vue-router';

export default defineComponent({
  emits: ['close'],
  name: 'setting-modal',
  setup(props, { emit }) {
    const route = useRoute();
    const state = reactive({
      win: route.query.win,
      element: 'jianpu' as 'jianpu' | 'staff', // 元素
      beat: '4-4' as '4-2' | '4-3' | '4-4' | '8-3' | '8-6', // 拍号
      barLine: '1' as '1' | '2' | '4', // 小节数
      tempo: ['1', '2', '3'] as any[] // 节奏形筛选
    });

    const tempoList = computed(() => {
      if (['4-2', '4-3', '4-4'].includes(state.beat)) {
        return tempo4;
      } else if (['8-3', '8-6'].includes(state.beat)) {
        return tempo8;
      }
      return tempo4;
    });

    const onChangeTempo = (item: any) => {
      const index = state.tempo.indexOf(item);
      if (index !== -1) {
        state.tempo.splice(index, 1);
      } else {
        state.tempo.push(item);
      }
    };

    const handleStop = () => {
      setting.playState = 'pause';
      if (setting.playType === 'beat') {
        hendleEndTick();
      } else {
        hendleEndBeat();
      }
    };

    const onSubmit = () => {
      if (state.tempo.length <= 0) {
        showToast('节奏型不能为空');
        return;
      }
      let status = false; // 是否有更改
      if (
        setting.element !== state.element ||
        setting.beat !== state.beat ||
        setting.barLine !== state.barLine ||
        setting.tempo.join(',') !== state.tempo.join(',')
      ) {
        status = true;
      }

      // 判断是否有数据变化
      handleStop();
      if (status) {
        setting.element = state.element;
        setting.beat = state.beat;
        setting.barLine = state.barLine;
        setting.tempo = state.tempo;
        renderScore();
      }

      emit('close');
    };

    return () => (
      <div
        class={[styles.settingContainer, state.win === 'pc' ? styles.pcS : '']}>
        <div class={styles.title}></div>
        <i
          class={styles.iconClose}
          onClick={() => {
            emit('close');
            setTimeout(() => {
              state.element = setting.element;
              state.beat = setting.beat;
              state.barLine = setting.barLine;
              state.tempo = setting.tempo;
            }, 300);
          }}></i>

        <div class={styles.settingContent}>
          <div class={styles.settingParams}>
            <div class={styles.parmaTitle}>元素</div>
            <div class={styles.paramContent}>
              {Object.keys(elementList).map((item: any) => (
                <Button
                  round
                  class={[styles.btn, state.element === item && styles.active]}
                  onClick={() => {
                    state.element = item;
                  }}>
                  {elementList[item]}
                </Button>
              ))}
            </div>
            <div class={styles.parmaTitle}>拍号</div>
            <div class={styles.paramContent}>
              {Object.keys(beatList).map((item: any) => (
                <Button
                  round
                  class={[styles.btn, state.beat === item && styles.active]}
                  onClick={() => {
                    state.beat = item;
                    if (['4-2', '4-3', '4-4'].includes(state.beat)) {
                      state.tempo = ['1', '2', '3'];
                    } else if (['8-3', '8-6'].includes(state.beat)) {
                      state.tempo = ['15', '16', '17'];
                    }
                  }}>
                  {beatList[item]}
                </Button>
              ))}
            </div>
            <div class={styles.parmaTitle}>每页显示小节数量</div>
            <div class={styles.paramContent}>
              {Object.keys(barLineList).map((item: any) => (
                <Button
                  round
                  class={[styles.btn, state.barLine === item && styles.active]}
                  onClick={() => {
                    state.barLine = item;
                  }}>
                  {barLineList[item]}
                </Button>
              ))}
            </div>
            <div class={styles.parmaTitle}>节奏型筛选</div>
            <div class={[styles.paramContent, styles.tempo]}>
              {Object.keys(tempoList.value).map((item: any) => (
                <>
                  <img
                    onClick={() => onChangeTempo(item)}
                    class={state.tempo.includes(item) && styles.active}
                    src={getImage(
                      (state.element === 'jianpu' ? 'j-' : 'f-') +
                        tempoList.value[item]
                    )}
                  />
                </>
              ))}
            </div>
          </div>
        </div>
        <div class={styles.btnGroup}>
          <Button class={styles.btnSubmit} onClick={onSubmit}></Button>
        </div>
      </div>
    );
  }
});