classroom-instruments/src/views/attend-class/model/train-update/index.tsx

import {
  PropType,
  computed,
  defineComponent,
  onMounted,
  reactive,
  ref
} from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NForm,
  NFormItem,
  NInputGroup,
  NInputGroupLabel,
  NInputNumber,
  NSpace,
  NTooltip,
  useMessage
} from 'naive-ui';
import {
  lessonPreTrainingAdd,
  lessonPreTrainingUpdate
} from '/src/views/prepare-lessons/api';

export default defineComponent({
  name: 'train-update',
  props: {
    /** 初始数据 */
    item: {
      type: Object,
      default: () => ({})
    },
    /** 操作类型 */
    type: {
      type: String as PropType<'train' | 'homework'>,
      default: 'train'
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    // 'practice' | 'evaluation'
    const message = useMessage();
    const forms = reactive({
      id: null as any,
      uploading: false,
      baseMaxScore: 99,
      type: 'PRACTICE',
      musicId: '',
      musicName: '',
      coursewareKnowledgeDetailId: '', // 章节编号
      minScore: null as any,
      maxScore: null as any,
      subjectId: '',
      coverImg: '',
      audioPlayTypeArray: [] as any,
      practiceSpeed: null as any, // 练习速度
      practiceTimes: null as any, // 练习时长
      difficulty: 'BEGINNER', // 评测难度
      evaluationSpeed: null as any, // 评测速度
      evaluationScore: null as any // 评测分数
    });
    const formsRef = ref();

    const onSubmit = async () => {
      formsRef.value?.validate(async (err: any) => {
        if (err) {
          return;
        }
        forms.uploading = true;
        try {
          const params = {
            trainingType: forms.type,
            musicId: forms.musicId,
            musicName: forms.musicName,
            audioPlayTypeArray: forms.audioPlayTypeArray,
            coursewareKnowledgeDetailId: forms.coursewareKnowledgeDetailId,
            subjectId: forms.subjectId,
            id: forms.id,
            coverImg: forms.coverImg,
            trainingConfigJson: ''
          };
          const configJson: any = {};
          configJson.practiceChapterBegin = forms.minScore;
          configJson.practiceChapterEnd = forms.maxScore;
          if (forms.type === 'PRACTICE') {
            configJson.practiceSpeed = forms.practiceSpeed;
            configJson.trainingTimes = forms.practiceTimes;
          } else {
            configJson.evaluateDifficult = forms.difficulty;
            configJson.evaluateSpeed = forms.evaluationSpeed;
            configJson.trainingTimes = forms.evaluationScore;
          }
          configJson.practiceChapterMax = forms.baseMaxScore;
          params.trainingConfigJson = configJson;
          // if (props.type === 'train') {
          // if (forms.id) {
          //   await lessonPreTrainingUpdate(params);
          //   message.success('修改成功');
          // } else {
          //   await lessonPreTrainingAdd(params);
          //   message.success('添加成功');
          // }
          // }

          emit('close');
          emit('confirm', params);
        } catch {
          //
        }
        forms.uploading = false;
      });
    };

    onMounted(() => {
      const item = props.item;
      if (item.trainId) {
        forms.id = item.trainId;
        forms.practiceSpeed = Number(item.practiceSpeed);
        forms.type = item.trainingType;
        forms.minScore = item.practiceChapterBegin;
        forms.maxScore = item.practiceChapterEnd;
        if (item.trainingType === 'PRACTICE') {
          forms.practiceTimes = item.trainingTimes;
        } else {
          forms.evaluationScore = item.trainingTimes;
        }
        forms.difficulty = item.evaluateDifficult || 'BEGINNER';
        forms.evaluationSpeed = item.evaluateSpeed;
      } else {
        forms.minScore = 1;
        forms.maxScore = item.practiceChapterMax ? item.practiceChapterMax : 1;
      }
      forms.audioPlayTypeArray = item.audioPlayTypeArray || [];

      forms.baseMaxScore = item.practiceChapterMax || 99;
      forms.musicId = item.id;
      forms.musicName = item.musicName;
      forms.coursewareKnowledgeDetailId = item.coursewareKnowledgeDetailId;
      forms.subjectId = item.subjectId;
      forms.coverImg = item.coverImg;
    });
    return () => (
      <div class={styles.trainUpdate}>
        <NForm
          ref={formsRef}
          model={forms}
          labelAlign="right"
          labelPlacement="left">
          <NFormItem
            label="训练方式"
            path="type"
            rule={[{ required: true, message: '请选择训练方式' }]}>
            <NSpace>
              <NButton
                secondary
                class={[
                  styles.switch,
                  forms.type === 'PRACTICE' ? styles.active : ''
                ]}
                onClick={() => (forms.type = 'PRACTICE')}>
                练习
              </NButton>

              {!props.item.containAccompaniment ? (
                <NTooltip showArrow={false}>
                  {{
                    trigger: () => (
                      <NButton disabled secondary class={[styles.switch]}>
                        评测
                      </NButton>
                    ),
                    default: () => '该曲目暂不支持评测'
                  }}
                </NTooltip>
              ) : (
                <NButton
                  secondary
                  class={[
                    styles.switch,
                    forms.type === 'EVALUATION' ? styles.active : ''
                  ]}
                  onClick={() => (forms.type = 'EVALUATION')}>
                  评测
                </NButton>
              )}
            </NSpace>
          </NFormItem>
          <div class={styles.scoreGroup}>
            <NFormItem
              label={forms.type === 'PRACTICE' ? '练习小节' : '评测小节'}
              path="minScore"
              rule={[
                {
                  required: true,
                  message: '请输入最小练习小节',
                  trigger: ['blur', 'change'],
                  type: 'number'
                }
              ]}>
              <NInputNumber
                v-model:value={forms.minScore}
                showButton={false}
                min={1}
                max={forms.baseMaxScore}
                precision={0}
                placeholder="最小练习小节"
                onUpdate:value={() => {
                  forms.maxScore = null;
                }}
                clearable
              />
            </NFormItem>
            <div
              style={{
                '--n-feedback-height': '24px',
                display: 'flex',
                alignItems: 'center',
                margin: '-2px 2% 0 2%',
                marginBottom: 'var(--n-feedback-height)'
              }}>
              -
            </div>
            <NFormItem
              path="maxScore"
              rule={[
                {
                  required: true,
                  message: '请输入最大练习小节',
                  trigger: ['blur', 'change'],
                  type: 'number'
                }
              ]}>
              <NInputNumber
                v-model:value={forms.maxScore}
                showButton={false}
                precision={0}
                min={forms.minScore || 1}
                max={forms.baseMaxScore}
                placeholder="最大练习小节"
                clearable
              />
            </NFormItem>
          </div>
          {forms.type === 'PRACTICE' && (
            <>
              <NFormItem
                label="练习速度"
                path="practiceSpeed"
                rule={[
                  {
                    required: true,
                    message: '请输入练习速度',
                    trigger: ['blur', 'change'],
                    type: 'number'
                  }
                ]}>
                <NInputNumber
                  min={60}
                  max={270}
                  precision={0}
                  showButton={false}
                  style={{ width: '100%' }}
                  v-model:value={forms.practiceSpeed}
                  placeholder="练习速度范围60~270"
                  clearable
                />
              </NFormItem>
              <NFormItem
                label="练习时长"
                path="practiceTimes"
                rule={[
                  {
                    required: true,
                    message: '请输入练习时长',
                    trigger: ['blur', 'change'],
                    type: 'number'
                  }
                ]}>
                <NInputGroup>
                  <NInputNumber
                    min={0}
                    max={1000}
                    showButton={false}
                    precision={0}
                    style={{ width: '100%' }}
                    v-model:value={forms.practiceTimes}
                    placeholder="请输入练习时长"
                    clearable
                  />
                  <NInputGroupLabel>分钟</NInputGroupLabel>
                </NInputGroup>
              </NFormItem>
            </>
          )}

          {forms.type === 'EVALUATION' && (
            <>
              <NFormItem
                label="评测难度"
                path="type"
                rule={[{ required: true, message: '请选择评测难度' }]}>
                <NSpace class={styles.difficultySpace}>
                  <NButton
                    secondary
                    class={[
                      styles.switch,
                      forms.difficulty === 'BEGINNER' ? styles.active : ''
                    ]}
                    onClick={() => (forms.difficulty = 'BEGINNER')}>
                    入门级
                  </NButton>
                  <NButton
                    secondary
                    class={[
                      styles.switch,
                      forms.difficulty === 'ADVANCED' ? styles.active : ''
                    ]}
                    onClick={() => (forms.difficulty = 'ADVANCED')}>
                    进阶级
                  </NButton>
                  <NButton
                    secondary
                    class={[
                      styles.switch,
                      forms.difficulty === 'PERFORMER' ? styles.active : ''
                    ]}
                    onClick={() => (forms.difficulty = 'PERFORMER')}>
                    大师级
                  </NButton>
                </NSpace>
              </NFormItem>
              {/* <NFormItem
                label="评测速度"
                path="evaluationSpeed"
                rule={[
                  {
                    required: true,
                    message: '请输入评测速度',
                    trigger: ['blur', 'change'],
                    type: 'number'
                  }
                ]}>
                <NInputNumber
                  min={60}
                  max={270}
                  showButton={false}
                  style={{ width: '100%' }}
                  v-model:value={forms.evaluationSpeed}
                  placeholder="评测速度范围60~270"
                  clearable
                />
              </NFormItem> */}
              <NFormItem
                label="合格分数"
                path="evaluationScore"
                rule={[
                  {
                    required: true,
                    message: '请输入合格分数',
                    trigger: ['blur', 'change'],
                    type: 'number'
                  }
                ]}>
                <NInputGroup>
                  <NInputNumber
                    min={0}
                    max={100}
                    precision={0}
                    showButton={false}
                    style={{ width: '100%' }}
                    v-model:value={forms.evaluationScore}
                    placeholder="请输入合格分数"
                    clearable
                  />
                  <NInputGroupLabel>分</NInputGroupLabel>
                </NInputGroup>
              </NFormItem>
            </>
          )}

          <NSpace class={styles.updateBtnGroup}>
            <NButton strong type="default" round onClick={() => emit('close')}>
              取消
            </NButton>
            <NButton strong type="primary" round onClick={() => onSubmit()}>
              确认
            </NButton>
          </NSpace>
        </NForm>
      </div>
    );
  }
});