resource-admin/src/views/music-library/music-sheet/modal/music-operation.tsx

import type { SelectOption } from 'naive-ui'
import {
  NAlert,
  NButton,
  NCascader,
  NCheckbox,
  NCheckboxGroup,
  NForm,
  NFormItemGi,
  NGi,
  NGrid,
  NInput,
  NInputNumber,
  NModal,
  NRadio,
  NRadioGroup,
  NSelect,
  NSpace,
  NSpin,
  useDialog,
  useMessage
} from 'naive-ui'
import { defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue'
import { musicSheetCategoriesQueryTree, musicSheetDetail, musicSheetSave } from '../../api'
import UploadFile from '@/components/upload-file'
import styles from './index.module.less'
import deepClone from '@/utils/deep.clone'
import axios from 'axios'
import { appKey, clientType, musicSheetSourceType, musicSheetType } from '@/utils/constant'
import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
import { musicalInstrumentPage } from '@views/system-manage/subject-manage/api'
import { subjectPage } from '@views/system-manage/api'
import MusicSheetOwnerDialog from '@views/music-library/music-sheet/modal/musicSheetOwnerDialog'
import { sysApplicationPage } from '@views/menu-manage/api'
import { filterPointCategory } from '@views/teaching-manage/unit-test'
import { api_uploadFile } from '@/plugins/uploadFile'
import MusicCreateImg from './music-create-img'

/**
 * 获取指定元素下一个Note元素
 * @param ele 指定元素
 * @param selectors 选择器
 */
const getNextNote = (ele: any, selectors: any) => {
  let index = 0
  const parentEle = ele.closest(selectors)
  let pointer = parentEle
  const measure = parentEle?.closest('measure')
  let siblingNote = null
  // 查找到相邻的第一个note元素
  while (!siblingNote && index < (measure?.childNodes.length || 50)) {
    index++
    if (pointer?.nextElementSibling?.tagName === 'note') {
      siblingNote = pointer?.nextElementSibling
    }
    pointer = pointer?.nextElementSibling
  }
  return siblingNote
}

export const onlyVisible = (xml: any, partIndex: any) => {
  if (!xml) return ''
  const xmlParse = new DOMParser().parseFromString(xml, 'text/xml')
  const partList =
    xmlParse.getElementsByTagName('part-list')?.[0]?.getElementsByTagName('score-part') || []
  const parts = xmlParse.getElementsByTagName('part')
  const visiblePartInfo = partList[partIndex]
  if (visiblePartInfo) {
    const id = visiblePartInfo.getAttribute('id')
    Array.from(parts).forEach((part) => {
      if (part && part.getAttribute('id') !== id) {
        part.parentNode?.removeChild(part)
        // 不等于第一行才添加避免重复添加
      }

      // 最后一个小节的结束线元素不在最后 调整
      if (part && part.getAttribute('id') === id) {
        const barlines = part.getElementsByTagName('barline')
        const lastParent = barlines[barlines.length - 1]?.parentElement
        if (lastParent?.lastElementChild?.tagName !== 'barline') {
          const children: any[] = (lastParent?.children as any) || []
          for (let el of children) {
            if (el.tagName === 'barline') {
              // 将结束线元素放到最后
              lastParent?.appendChild(el)
              break
            }
          }
        }
      }
    })
    Array.from(partList).forEach((part) => {
      if (part && part.getAttribute('id') !== id) {
        part.parentNode?.removeChild(part)
      }
    })
    // 处理装饰音问题
    const notes = xmlParse.getElementsByTagName('note')
    const getNextvNoteDuration = (i: any) => {
      let nextNote = notes[i + 1]
      // 可能存在多个装饰音问题，取下一个非装饰音时值
      for (let index = i; index < notes.length; index++) {
        const note = notes[index]
        if (!note.getElementsByTagName('grace')?.length) {
          nextNote = note
          break
        }
      }
      return nextNote?.getElementsByTagName('duration')[0]
    }
    Array.from(notes).forEach((note, i) => {
      const graces = note.getElementsByTagName('grace')
      if (graces && graces.length) {
        note.appendChild(getNextvNoteDuration(i)?.cloneNode(true))
      }
    })
  }
  return new XMLSerializer().serializeToString(xmlParse)
}

const speedInfo = {
  'rall.': 1.333333333,
  'poco rit.': 1.333333333,
  'rit.': 1.333333333,
  'molto rit.': 1.333333333,
  'molto rall': 1.333333333,
  molto: 1.333333333,
  lentando: 1.333333333,
  allargando: 1.333333333,
  morendo: 1.333333333,
  'accel.': 0.8,
  calando: 2,
  'poco accel.': 0.8,
  'gradually slowing': 1.333333333,
  slowing: 1.333333333,
  slow: 1.333333333,
  slowly: 1.333333333,
  faster: 1.333333333
}

/**
 * 按照xml进行减慢速度的计算
 * @param xml 始终按照第一分谱进行减慢速度的计算
 */
export function getGradualLengthByXml(xml: string) {
  const firstPartXml = onlyVisible(xml, 0)
  const xmlParse = new DOMParser().parseFromString(firstPartXml, 'text/xml')
  const measures = Array.from(xmlParse.querySelectorAll('measure'))
  const notes = Array.from(xmlParse.querySelectorAll('note'))
  const words = Array.from(xmlParse.querySelectorAll('words'))
  const metronomes = Array.from(xmlParse.querySelectorAll('metronome'))

  const eles = []

  for (const ele of [...words, ...metronomes]) {
    const note = getNextNote(ele, 'direction')
    // console.log(ele, note)
    if (note) {
      const measure = note?.closest('measure')
      const measureNotes = Array.from(measure.querySelectorAll('note'))

      const noteInMeasureIndex = Array.from(measure.childNodes)
          .filter((item: any) => item.nodeName === 'note')
          .findIndex((item) => item === note)

      let allDuration = 0
      let leftDuration = 0
      for (let i = 0; i < measureNotes.length; i++) {
        const n: any = measureNotes[i]
        const duration = +(n.querySelector('duration')?.textContent || '0')
        allDuration += duration
        if (i < noteInMeasureIndex) {
          leftDuration = allDuration
        }
      }
      eles.push({
        ele,
        index: notes.indexOf(note),
        noteInMeasureIndex,
        textContent: ele.textContent,
        measureIndex: measures.indexOf(measure), //,measure?.getAttribute('number')
        type: ele.tagName,
        allDuration,
        leftDuration
      })
    }
  }

  // 结尾处手动插入一个音符节点
  eles.push({
    ele: notes[notes.length - 1],
    index: notes.length,
    noteInMeasureIndex: 0,
    textContent: '',
    type: 'metronome',
    allDuration: 1,
    leftDuration: 1,
    measureIndex: measures.length
  })

  const gradualNotes: any[] = []
  eles.sort((a, b) => a.index - b.index)
  const keys = Object.keys(speedInfo).map((w) => w.toLocaleLowerCase())
  let isLastNoteAndNotClosed = false
  for (const ele of eles) {
    const textContent: any = ele.textContent?.toLocaleLowerCase().trim()
    if (ele === eles[eles.length - 1]) {
      if (gradualNotes[gradualNotes.length - 1]?.length === 1) {
        isLastNoteAndNotClosed = true
      }
    }

    const isKeyWork = keys.find((k) => {
      const ks = k.split(' ')
      return textContent && ks.includes(textContent)
    })
    if (
        ele.type === 'metronome' ||
        (ele.type === 'words' && (textContent.startsWith('a tempo') || isKeyWork)) ||
        isLastNoteAndNotClosed
    ) {
      const indexOf = gradualNotes.findIndex((item) => item.length === 1)
      if (indexOf > -1 && ele.index > gradualNotes[indexOf]?.[0].start) {
        gradualNotes[indexOf][1] = {
          start: ele.index,
          measureIndex: ele.measureIndex,
          noteInMeasureIndex: ele.noteInMeasureIndex,
          allDuration: ele.allDuration,
          leftDuration: ele.leftDuration,
          type: textContent
        }
      }
    }
    if (ele.type === 'words' && isKeyWork) {
      gradualNotes.push([
        {
          start: ele.index,
          measureIndex: ele.measureIndex,
          noteInMeasureIndex: ele.noteInMeasureIndex,
          allDuration: ele.allDuration,
          leftDuration: ele.leftDuration,
          type: textContent
        }
      ])
    }
  }
  return gradualNotes
}

export default defineComponent({
  name: 'music-operation',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object as PropType<any>,
      default: () => {
      }
    },
    tagList: {
      type: Array as PropType<Array<SelectOption>>,
      default: () => []
    },
    subjectList: {
      type: Array as PropType<Array<SelectOption>>,
      default: () => []
    },
    // musicSheetCategories: {
    //   type: Array as PropType<Array<SelectOption>>,
    //   default: () => []
    // }
  },
  emits: ['close', 'getList'],

  setup(props, {slots, attrs, emit}) {
    const forms = reactive({
      graduals: {} as any, // 渐变速度
      playMode: 'MP3', // 播放类型
      xmlFileUrl: null, // XML
      midiUrl: null, // mid
      name: null, // 曲目名称
      // musicTag: [] as any, // 曲目标签
      composer: null, // 音乐人
      playSpeed: null as any, // 曲谱速度
      // showFingering: null as any, // 是否显示指法
      // canEvaluate: null as any, // 是否评测
      // notation: null as any, // 能否转和简谱
      // auditVersion: null as any, // 审核版本
      // sortNumber: null, // 排序
      musicCover: null, // 曲谱封面
      remark: null, // 曲谱描述
      musicSheetSoundList: [] as any, // 原音
      // musicSheetCategoriesId: null,
      status: false,
      musicSheetType: 'SINGLE', // 曲目类型
      sourceType: null as any, //来源类型/作者属性(PLATFORM: 平台; ORG: 机构; PERSON: 个人)
      // userId: null, // 所属人
      appAuditFlag: 0, // 是否审核版本
      midiFileUrl: null, // 伴奏文件 MIDI文件(保留字段)
      subjectIds: [] as any, // 可用声部
      musicalInstrumentIdList: [] as any,  //可用乐器
      musicCategoryId: null,  //曲目分类
      musicSheetAccompanimentList: [] as any,  //曲目伴奏
      audioType: 'HOMEMODE', // 伴奏类型
      isPlayBeat: true, // 是否播放节拍器
      isUseSystemBeat: true, // 是否使用系统节拍器(0:否;1:是)
      repeatedBeats: false, // 是否重复节拍时长
      evaluationStandard: 'FREQUENCY', // 评分标准 节奏 AMPLITUDE 音准 FREQUENCY 分贝 DECIBELS
      multiTracksSelection: [] as any, // 声轨
      musicSheetExtend: {} as any, //所属人信息
      musicImg: '', // 五线谱图片
      musicSvg: '', //首调图片
      musicJianSvg: '' // 简谱固定调
    })
    const state = reactive({
      loading: false,
      previewMode: false,//是否是预览模式
      tagList: [...props.tagList] as any, // 标签列表
      xmlFirstSpeed: null as any, // 第一个音轨速度
      partListNames: [] as any, // 所有音轨声部列表
      musicSheetCategories: [] as any,
      musicSheetAccompanimentUrls: '' as any,
      musicSheetAccompanimentUrlList: [] as any,
      instrumentData: [],
      instrumentList: [],
      subjectList: [] as any,
      showMusicSheetOwnerDialog: false, //所属人弹框
      // musicSheetOwnerData: {}, //所属人信息
      multiTracks: null,
      appData: [], // 应用列表
      ownerName: null as any, // 所属人名称描述

      productOpen: false, // 是否打开自动生成图片
      productItem: {} as any,
      productIfameSrc: '',
      isAutoSave: false // 是否自动保存
    })
    const gradualData = reactive({
      list: [] as any[],
      gradualRefs: [] as any[]
    })

    const btnLoading = ref(false)
    const formsRef = ref()
    const message = useMessage()
    const dialog = useDialog()

    // 提交记录
    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) {
          return
        }
        if (!state.isAutoSave) {
          state.isAutoSave = true
          state.productOpen = true
          return
        }
        try {
          //extConfigJson: {"repeatedBeats":0,"gradualTimes":{"75":"02:38:60","77":"02:43:39"}}
          const obj = {
            ...forms,
            musicTag: '-1',
            multiTracksSelection: forms.multiTracksSelection.join(','),
            musicSheetSoundList: forms.musicSheetSoundList.filter((next: any) => {
              return !!next.audioFileUrl && forms.multiTracksSelection.includes(next.track)
            }),
            musicalInstrumentIds: forms.musicalInstrumentIdList.join(','),
            extConfigJson: JSON.stringify({
              repeatedBeats: forms.repeatedBeats ? 1 : 0,
              gradualTimes: forms.graduals
            }),
            subjectIds: forms.subjectIds.join(',')
          }
          if (forms.audioType == 'MIDI') {
            obj.musicSheetSoundList = []
          }
          btnLoading.value = true
          if (props.type === 'add') {
            await musicSheetSave(obj)
            message.success('添加成功')
          } else if (props.type === 'edit') {
            await musicSheetSave({ ...obj, id: props.data.id })
            message.success('修改成功')
          }
          emit('getList')
          emit('close')
        } catch (e) {
          console.log(e)
        }
        setTimeout(() => {
          btnLoading.value = false
        }, 100)
      })
    }

    // 上传XML，初始化音轨 音轨速度 乐器、声部
    const readFileInputEventAsArrayBuffer = (file: any) => {
      const xmlRead = new FileReader()
      xmlRead.onload = (res) => {
        try {
          gradualData.list = getGradualLengthByXml(res?.target?.result as any).filter(
            (item: any) => item.length === 2
          )
        } catch (error) {}
        state.partListNames = getPartListNames(res?.target?.result as any) as any
        parseInstrumentAndSubject(res?.target?.result as any)
        // 这里是如果没有当前音轨就重新写
        for (let j = 0; j < state.partListNames.length; j++) {
          if (!forms.musicSheetSoundList[j]) {
            forms.musicSheetSoundList.push({ audioFileUrl: null, track: null })
          }
          forms.musicSheetSoundList[j].track = state.partListNames[j].value
        }

        // 循环添加所在音轨的原音
        for (
          let index = forms.musicSheetSoundList.length;
          index < state.partListNames.length;
          index++
        ) {
          const part = state.partListNames[index].value
          const sysData = {
            ...forms.musicSheetSoundList[0],
            track: part
          }
          if (!sysData.speed) {
            sysData.speed = state.xmlFirstSpeed
          }
          createSys(sysData)
        }

        if (forms.musicSheetSoundList.length == 0) {
          forms.musicSheetSoundList.push({ audioFileUrl: '', track: '' })
        }
      }
      xmlRead.readAsText(file)
    }

    const parseInstrumentAndSubject = (xml: any) => {
      if (!xml) return
      const xmlParse = new DOMParser().parseFromString(xml, 'text/xml')
      // 乐器
      const instrumentCodeList: any = [];
      const instrumentEle = xmlParse.getElementsByTagName('virtual-instrument');
      for (let index = 0; index < instrumentEle.length; index++) {
        const note = instrumentEle[index]
        const instrumentCode = note.getElementsByTagName('virtual-name')?.[0]?.textContent || '';
        if (instrumentCode && !instrumentCodeList.includes(instrumentCode)) {
          instrumentCodeList.push(instrumentCode);
        }
      }
      const codeIdMap = new Map<string, string>();
      state.instrumentData.forEach((data: any) => {
        codeIdMap.set(data.code, data.id + '');
      })
      forms.musicalInstrumentIdList = [];
      instrumentCodeList.forEach((code: string) => {
        if (codeIdMap.has(code)) {
          forms.musicalInstrumentIdList.push(codeIdMap.get(code));
        }
      })

      // 声部
      if (forms.musicalInstrumentIdList.length > 0) {
        showBackSubject(forms.musicalInstrumentIdList);
      }
    }

    // 获取xml中所有轨道 乐器
    const getPartListNames = (xml: any) => {
      if (!xml) return []
      const xmlParse = new DOMParser().parseFromString(xml, 'text/xml')
      const partList =
        xmlParse.getElementsByTagName('part-list')?.[0]?.getElementsByTagName('score-part') || []
      const partListNames = Array.from(partList).map((item) => {
        const part = item.getElementsByTagName('part-name')?.[0].textContent || ''
        return {
          value: part,
          label: part
        }
      })

      if (partListNames.length > 0) {
        forms.musicSheetSoundList = forms.musicSheetSoundList.slice(0, partListNames.length)
      }

      state.xmlFirstSpeed = xmlParse.getElementsByTagName('per-minute')?.[0]?.textContent || ''
      if (!forms.playSpeed) {
        if (state.xmlFirstSpeed) {
          forms.playSpeed = Number.parseInt(state.xmlFirstSpeed)
        } else {
          // 速度默认给100
          forms.playSpeed = 100
        }
      }

      // 乐器
      const instrumentCodeList: any = []
      const instrumentEle = xmlParse.getElementsByTagName('virtual-instrument')
      for (let index = 0; index < instrumentEle.length; index++) {
        const note = instrumentEle[index]
        const instrumentCode = note.getElementsByTagName('virtual-name')?.[0]?.textContent || ''
        if (instrumentCode && !instrumentCodeList.includes(instrumentCode)) {
          instrumentCodeList.push(instrumentCode)
        }
      }
      const codeIdMap = new Map<string, string>()
      state.instrumentData.forEach((data: any) => {
        codeIdMap.set(data.code, data.id + '')
      })
      forms.musicalInstrumentIdList = []
      instrumentCodeList.forEach((code: string) => {
        if (codeIdMap.has(code)) {
          forms.musicalInstrumentIdList.push(codeIdMap.get(code))
        }
      })

      // 声部
      if (forms.musicalInstrumentIdList.length > 0) {
        showBackSubject(forms.musicalInstrumentIdList)
      }
      return partListNames
    }

    // 判断选择的音轨是否在选中
    const initPartsListStatus = (track: string): any => {
      const _names = state.partListNames.filter(
        (n: any) => n.value?.toLocaleUpperCase?.() != 'COMMON'
      )
      const partListNames = deepClone(_names) || []
      partListNames.forEach((item: any) => {
        const index = forms.musicSheetSoundList.findIndex((ground: any) => item.value == ground.track)
        if (index > -1 && track == item.value) {
          item.disabled = false
        } else {
          item.disabled = true
        }
        // if (index > -1 && track != item.value) {
        //   item.disabled = true
        // } else {
        //   item.disabled = false
        // }
      })
      return partListNames || []
    }

    // 反显声部
    const showBackSubject = async (musicalInstrumentIdList: []) => {
      try {
        const { data } = await subjectPage({
          page: 1,
          rows: 999,
          musicalInstrumentIdList: musicalInstrumentIdList
        })
        const tempList = data.rows || []
        tempList.forEach((item: any) => {
          forms.subjectIds.push(item.id + '')
        })
      } catch {}
    }

    // 添加原音
    const createSys = (initData?: any) => {
      forms.musicSheetSoundList.push({
        audioFileUrl: null, // 原音
        track: null, // 轨道
        ...initData
      })
    }
    // 删除原音
    const removeSys = (index: number) => {
      dialog.warning({
        title: '警告',
        content: `是否确认删除此原音？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          forms.musicSheetSoundList.splice(index, 1)
        }
      })
    }

    const checkMultiTracks = (value: string) => {
      if (!value) {
        return
      }
      if (value === 'all') {
        forms.multiTracksSelection = []
        state.partListNames.forEach((next: any) => {
          forms.multiTracksSelection.push(next.value)
        })
      } else if (value === 'invert') {
        state.partListNames.forEach((next: any) => {
          const indexOf = forms.multiTracksSelection.indexOf(next.value)
          if (indexOf > -1) {
            forms.multiTracksSelection.splice(indexOf, 1)
          } else {
            forms.multiTracksSelection.push(next.value)
          }
        })
      } else if (value === 'allUncheck') {
        forms.multiTracksSelection = []
      }
    }

    const setOwnerName = () => {
      if (forms.sourceType == 'PLATFORM') {
        state.ownerName = ''
        return
      }
      if (!forms.musicSheetExtend || !forms.sourceType || !forms.musicSheetExtend?.userId) {
        return
      }
      const appId = forms.musicSheetExtend.applicationId
      const app = state.appData.filter((next: any) => {
        return next.id == appId
      }) as any
      if (app.length > 0) {
        state.ownerName = app[0].appName
      }
      if (forms.sourceType == 'ORG') {
        state.ownerName += '-' + forms.musicSheetExtend.organizationRole
      } else if (forms.sourceType == 'PERSON') {
        state.ownerName +=
          '-' +
          getMapValueByKey(forms.musicSheetExtend.clientType, new Map(Object.entries(clientType)))
        if (forms.musicSheetExtend.userName) {
          state.ownerName += '-' + forms.musicSheetExtend.userName
        }
        if (forms.musicSheetExtend.phone) {
          state.ownerName += '(' + forms.musicSheetExtend.phone + ')'
        }
      }
    }

    onMounted(async () => {
      state.loading = true
      if (props.type === 'preview') {
        state.previewMode = true
      }
      // 获取乐器信息
      {
        if (state.instrumentList && state.instrumentList.length > 0) {
          return
        }
        try {
          const { data } = await musicalInstrumentPage({ page: 1, rows: 999 })
          const tempList = data.rows || []
          state.instrumentData = tempList
          tempList.forEach((item: any) => {
            item.label = item.name
            item.value = item.id + ''
            item.disabled = !item.enableFlag
          })
          state.instrumentList = tempList
        } catch {}
      }
      state.subjectList = deepClone(props.subjectList)
      state.subjectList.forEach((subject: any) => {
        subject.disabled = !subject.enableFlag
      })

      // 初始化应用
      {
        const appKeys = Object.keys(appKey)

        const { data } = await sysApplicationPage({ page: 1, rows: 999, parentId: 0 })
        const tempList = data.rows || []
        const filter = tempList.filter((next: any) => {
          return appKeys.includes(next.appKey)
        })
        filter.forEach((item: any) => {
          item.label = item.appName
          item.value = item.id
        })
        state.appData = filter
      }

      // 获取分类信息
      {
        try {
          const { data } = await musicSheetCategoriesQueryTree({ enable: true })
          state.musicSheetCategories = filterPointCategory(data, 'musicSheetCategoriesList')
        } catch (e) {}
      }

      if (props.type === 'edit' || props.type === 'preview') {
        const detail = props.data
        try {
          const { data } = await musicSheetDetail({ id: detail.id })
          forms.audioType = data.audioType
          forms.musicSheetAccompanimentList = data.musicSheetAccompanimentList
          data.musicSheetAccompanimentList?.forEach((next: any) => {
            state.musicSheetAccompanimentUrlList.push(next.audioFileUrl)
          })
          forms.playMode = data.playMode
          forms.xmlFileUrl = data.xmlFileUrl
          forms.midiUrl = data.midiUrl
          forms.name = data.name
          // forms.musicTag = data.musicTag?.split(',')
          forms.composer = data.composer
          forms.playSpeed = data.playSpeed
          // forms.showFingering = Number(data.showFingering)
          // forms.canEvaluate = Number(data.canEvaluate)
          // forms.notation = Number(data.notation)
          // forms.auditVersion = Number(data.auditVersion)
          // forms.sortNumber = data.sortNumber
          forms.musicCover = data.musicCover
          forms.remark = data.remark
          forms.status = data.status
          forms.musicCategoryId = data.musicCategoryId

          forms.musicSheetType = data.musicSheetType || 'SINGLE'
          forms.evaluationStandard = data.evaluationStandard
          forms.musicalInstrumentIdList = data.musicalInstrumentIds.split(',') || []

          forms.subjectIds = data.subjectIds?.split(',') || []
          forms.sourceType = data.sourceType
          forms.musicSheetExtend = data.musicSheetExtend
          forms.repeatedBeats = data.isPlayBeat


          // 获取渐变 和 是否多声部
          try {
            const extConfigJson = data.extConfigJson ? JSON.parse(data.extConfigJson) : {}
            forms.graduals = extConfigJson.gradualTimes || {}
          } catch (error) {}
          setOwnerName()
          axios.get(data.xmlFileUrl).then((res: any) => {
            if (res?.data) {
              gradualData.list = getGradualLengthByXml(res?.data as any).filter(
                (item: any) => item.length === 2
              )
              state.partListNames = getPartListNames(res?.data as any) as any

              // 初始化音轨和原音
              forms.musicSheetSoundList = data.musicSheetSoundList || []
              forms.musicSheetSoundList.forEach((next: any) => {
                forms.multiTracksSelection.push(next.track)
              })
            }
          })
        } catch (error) {}
      } else {
        // 新增只能使用启用状态的数据
        state.subjectList = state.subjectList.filter((next: any) => {
          return next.enableFlag == true
        })
        state.instrumentList = state.instrumentList.filter((next: any) => {
          return next.enableFlag == true
        })
      }
      state.loading = false
    })

    return () => (
      <div style="background: #fff; padding-top: 12px">
        <NSpin show={state.loading}>
          <NForm
            class={styles.formContainer}
            model={forms}
            ref={formsRef}
            label-placement="left"
            label-width="130"
            disabled={state.previewMode}
          >
            <NAlert showIcon={false} style={{ marginBottom: '12px' }}>
              曲目信息
            </NAlert>
            <NGrid cols={2}>
              <NFormItemGi
                  label="曲目名称"
                  path="name"
                  rule={[
                    {
                      required: true,
                      message: '请输入曲目名称',
                      trigger: ['input', 'blur']
                    }
                  ]}
              >
                <NInput
                  v-model:value={forms.name}
                  placeholder="请输入曲目名称"
                  maxlength={25}
                  showCount
                />
              </NFormItemGi>
              <NFormItemGi
                  label="音乐人"
                  path="composer"
                  rule={[
                    {
                      required: true,
                      message: '请输入音乐人',
                      trigger: ['input', 'blur']
                    }
                  ]}
              >
                <NInput
                  v-model:value={forms.composer}
                  placeholder="请输入音乐人名称"
                  showCount
                  maxlength={14}
                />
              </NFormItemGi>
            </NGrid>
            <NGrid cols={2}>
              <NFormItemGi label="曲目描述" path="remark">
                <NInput
                  placeholder="请输入曲目描述"
                  type="textarea"
                  rows={4}
                  showCount
                  maxlength={200}
                  v-model:value={forms.remark}
                />
              </NFormItemGi>
              <NFormItemGi
                label="曲目封面"
                path="musicCover"
                rule={[
                  {
                    required: true,
                    message: '请上传曲目封面',
                    trigger:['input','blur']
                  }
                ]}
              >
                <UploadFile
                  desc={'封面图'}
                  disabled={state.previewMode}
                  accept=".jpg,.jpeg,.png"
                  tips="请上传大小1M以内的JPG、PNG图片"
                  size={1}
                  v-model:fileList={forms.musicCover}
                  cropper
                  bucketName="cbs"
                  options={{
                    autoCrop: true, //是否默认生成截图框
                    enlarge: 2, //  图片放大倍数
                    autoCropWidth: 200, //默框高度
                    fixedBox: true, //是否固定截图框大认生成截图框宽度
                    autoCropHeight: 200, //默认生成截图小 不允许改变
                    previewsCircle: false, //预览图是否是原圆形
                    title: '曲目封面'
                  }}
                />
              </NFormItemGi>
            </NGrid>
            <NGrid cols={2}>
              <NFormItemGi
                label="曲目类型"
                path="musicSheetType"
                rule={[
                  {
                    required: true,
                    message: '请选择曲目类型',
                    trigger:'change'
                  }
                ]}
              >
                <NSelect
                  placeholder="请选择曲目类型"
                  v-model:value={forms.musicSheetType}
                  options={getSelectDataFromObj(musicSheetType)}
                />
              </NFormItemGi>

              <NFormItemGi
                label="作者属性"
                path="sourceType"
                rule={[
                  {
                    required: true,
                    message: '请选择作者属性',
                    trigger:'change'
                  }
                ]}
              >
                <NSelect
                  v-model:value={forms.sourceType}
                  options={getSelectDataFromObj(musicSheetSourceType)}
                  placeholder="请选择作者属性"
                  onUpdateValue={() => {
                    // 发送变化，清理选择的所属人信息
                    forms.musicSheetExtend = {}
                    state.ownerName = null
                    // forms.musicSheetExtend.userId = null
                    // forms.musicSheetExtend.userName = null
                    // forms.musicSheetExtend.applicationId = null
                    // forms.musicSheetExtend.organizationRoleId = null
                  }}
                />
              </NFormItemGi>
            </NGrid>
            <NGrid cols={2}>
              {forms.sourceType === 'PERSON' && (
                <NFormItemGi
                  label="所属人"
                  path="musicSheetExtend.userId"
                  rule={[
                    {
                      required: true,
                      message: '请选择曲目所属人',
                      trigger:['input','change']
                    }
                  ]}
                >
                  <NButton
                    disabled={state.previewMode || !forms.sourceType}
                    type="primary"
                    size="small"
                    text
                    //v-auth="orchestraSubsidyStandard/update1597887579789053953"
                    onClick={() => {
                      state.showMusicSheetOwnerDialog = true
                    }}
                  >
                    {state.ownerName ? state.ownerName : '请选择所属人'}
                  </NButton>
                </NFormItemGi>
              )}
              {forms.sourceType === 'ORG' && (
                <NFormItemGi
                  label="所属人"
                  path="musicSheetExtend.organizationRoleId"
                  rule={[
                    {
                      required: true,
                      message: '请选择曲目所属机构',
                      trigger:['input','change']
                    }
                  ]}
                >
                  <NButton
                    disabled={state.previewMode || !forms.sourceType}
                    type="primary"
                    size="small"
                    text
                    //v-auth="orchestraSubsidyStandard/update1597887579789053953"
                    onClick={() => {
                      state.showMusicSheetOwnerDialog = true
                    }}
                  >
                    {state.ownerName ? state.ownerName : '请选择所属机构'}
                  </NButton>
                </NFormItemGi>
              )}
              <NFormItemGi
                label="速度"
                path="playSpeed"
                rule={[
                  {
                    required: false,
                    message: '请输入速度'
                  }
                ]}
              >
                <NInputNumber
                  placeholder="请输入速度"
                  v-model:value={forms.playSpeed}
                  style="width:100%"
                />
              </NFormItemGi>
            </NGrid>
            <NGrid cols={2}>
              <NFormItemGi
                label="审核版本"
                path="appAuditFlag"
                rule={[
                  {
                    required: true,
                    message: '请选择审核版本',
                    trigger:'change',
                    type:'number'
                  }
                ]}
              >
                <NSelect
                  options={
                    [
                      {
                        label: '是',
                        value: 1
                      },
                      {
                        label: '否',
                        value: 0
                      }
                    ] as any
                  }
                  v-model:value={forms.appAuditFlag}
                />
              </NFormItemGi>
              <NFormItemGi label="曲目分类" path="musicCategoryId"
                           rule={[
                             {
                               required: true,
                               message: '请选择曲目分类',
                               trigger: ['change']
                             }
                           ]}
              >
                <NCascader
                  valueField="id"
                  labelField="name"
                  children-field="musicSheetCategoriesList"
                  placeholder="请选择分类"
                  v-model:value={forms.musicCategoryId}
                  options={state.musicSheetCategories}
                  clearable
                />
              </NFormItemGi>
            </NGrid>
            <NGrid cols={2}>
              <NFormItemGi label="重复节拍时长" path="repeatedBeats"
                           rule={[
                             {
                               required: false,
                               message: '请选择是否重复节拍时长'
                             }
                           ]}
              >
                <NRadioGroup v-model:value={forms.repeatedBeats}>
                  <NRadio value={true}>是</NRadio>
                  <NRadio value={false}>否</NRadio>
                </NRadioGroup>
              </NFormItemGi>
              <NFormItemGi
                label="评分标准"
                path="evaluationStandard"
                rule={[
                  {
                    required: true
                  }
                ]}
              >
                <NRadioGroup v-model:value={forms.evaluationStandard}>
                  <NRadio value={'FREQUENCY'}>标准评测</NRadio>
                  <NRadio value={'AMPLITUDE'}>打击乐(振幅)</NRadio>
                  <NRadio value={'DECIBELS'}>节奏(分贝)</NRadio>
                </NRadioGroup>
              </NFormItemGi>
            </NGrid>
            <NAlert showIcon={false} style={{ marginBottom: '12px' }}>
              曲目上传
            </NAlert>
            <NGrid cols={2}>
              <NFormItemGi
                label="播放模式"
                path="playMode"
                rule={[
                  {
                    required: true,
                    message: '请选择播放模式'
                  }
                ]}
              >
                <NRadioGroup
                  v-model:value={forms.playMode}
                  onUpdateValue={(value: string | number | boolean) => {
                    if (value === 'MP3') {
                      forms.playMode = 'MP3'
                    } else {
                      forms.playMode = 'MIDI'
                    }
                  }}
                >
                  <NRadio value="MP3">MP3</NRadio>
                  <NRadio value="MIDI">MID</NRadio>
                </NRadioGroup>
              </NFormItemGi>
              {forms.playMode === 'MP3' && (
                <NFormItemGi
                  label="伴奏类型"
                  path="audioType"
                  rule={[
                    {
                      required: true,
                      message: '请选择伴奏类型'
                    }
                  ]}
                >
                  <NRadioGroup v-model:value={forms.audioType}>
                    <NRadio value={'HOMEMODE'}>自制伴奏</NRadio>
                    <NRadio value={'COMMON'}>普通伴奏</NRadio>
                  </NRadioGroup>
                </NFormItemGi>
              )}
            </NGrid>
            <NGrid cols={2}>
              {forms.playMode === 'MP3' && (
                <NFormItemGi
                  label="上传伴奏"
                  path="musicSheetAccompanimentList"
                  rule={[
                    {
                      required: false,
                      message: '请选择上传.mp3'
                    }
                  ]}
                >
                  <UploadFile
                    disabled={state.previewMode}
                    size={10}
                    v-model:imageList={state.musicSheetAccompanimentUrlList}
                    tips="仅支持上传.mp3格式文件"
                    listType="image"
                    accept=".mp3"
                    bucketName="cloud-coach"
                    text="点击上传伴奏文件"
                    max={10}
                    desc={'上传伴奏文件'}
                    onUpload:success={(file) => {
                      state.musicSheetAccompanimentUrls = [
                        state.musicSheetAccompanimentUrls,
                        file.url
                      ]
                        .filter(Boolean)
                        .join(',')
                      state.musicSheetAccompanimentUrlList = state.musicSheetAccompanimentUrls
                        ?.split(',')
                        .filter(Boolean)
                      forms.musicSheetAccompanimentList = []
                      for (let i = 0; i < state.musicSheetAccompanimentUrlList.length; i++) {
                        forms.musicSheetAccompanimentList.push({
                          audioFileUrl: state.musicSheetAccompanimentUrlList[i],
                          sortNumber: i + 1
                        })
                      }
                    }}
                    onRemove={() => {
                      state.musicSheetAccompanimentUrlList = []
                      state.musicSheetAccompanimentUrls = ''
                    }}
                    // onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
                    multiple={true}
                  />
                </NFormItemGi>
              )}
              {forms.playMode === 'MIDI' && (
                <NFormItemGi
                  label="上传MID"
                  path="midiFileUrl"
                  rule={[
                    {
                      required: true,
                      message: '请选择上传.MID格式文件'
                    }
                  ]}
                >
                  <UploadFile
                    desc={'MIDI文件'}
                    disabled={state.previewMode}
                    size={10}
                    v-model:fileList={forms.midiFileUrl}
                    tips="仅支持上传.MID格式文件"
                    listType="image"
                    accept=".mid"
                    bucketName="cloud-coach"
                    text="点击上传MID文件"
                    // onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
                  />
                </NFormItemGi>
              )}
              <NFormItemGi
                label="上传XML"
                path="xmlFileUrl"
                rule={[
                  {
                    required: true,
                    message: '请选择上传XML',
                    trigger: ['change', 'input']
                  }
                ]}
              >
                <UploadFile
                  desc={'XML文件'}
                  disabled={state.previewMode}
                  size={10}
                  key={'xmlFileUrl'}
                  v-model:fileList={forms.xmlFileUrl}
                  tips="仅支持上传.xml/.mxml格式文件"
                  listType="image"
                  accept=".xml,.mxml"
                  bucketName="cloud-coach"
                  text="点击上传XML文件"
                  onReadFileInputEventAsArrayBuffer={readFileInputEventAsArrayBuffer}
                  onRemove={() => {
                    forms.multiTracksSelection = []
                    state.partListNames = []
                    forms.musicSheetSoundList = []
                    forms.musicalInstrumentIdList = []
                    forms.subjectIds = []
                  }}
                />
              </NFormItemGi>
            </NGrid>

            <NGrid cols={2}>
              <NFormItemGi
                label="可用声部"
                path="subjectIds"
                rule={[
                  {
                    required: true,
                    message: '请选择可用声部',
                    trigger: 'change',
                    type: 'array'
                  }
                ]}
              >
                <NSelect
                  v-model:value={forms.subjectIds}
                  options={state.subjectList}
                  multiple
                  filterable
                  clearable
                  placeholder="请选择可用声部"
                  maxTagCount={2}
                />
              </NFormItemGi>
              <NFormItemGi
                label="可用乐器"
                path="musicalInstrumentIdList"
                rule={[
                  {
                    required: true,
                    message: '请选择可用乐器',
                    trigger: 'change',
                    type: 'array'
                  }
                ]}
              >
                <NSelect
                  placeholder="请选择可用乐器"
                  options={state.instrumentList}
                  v-model:value={forms.musicalInstrumentIdList}
                  clearable
                  multiple
                  maxTagCount={2}
                />
              </NFormItemGi>
            </NGrid>

            {forms.musicSheetType && (
              <NGrid cols={1}>
                <NFormItemGi
                  label={`${forms.musicSheetType === 'SINGLE' ? '页面渲染声轨' : '用户可切换声轨'}`}
                  path="multiTracksSelection"
                  rule={[
                    {
                      required: true,
                      message: `请选择${
                        forms.musicSheetType === 'SINGLE' ? '页面渲染声轨' : '用户可切换声轨'
                      }`,
                      trigger:'change',
                      type:'array'
                    }
                  ]}
                >
                  <NGrid style="padding-top: 4px;">
                    <NGi span={24}>
                      <NRadioGroup
                        v-model:value={state.multiTracks}
                        onUpdateValue={(value) => {
                          checkMultiTracks(value)
                        }}
                      >
                        <NRadio value={'all'}>全选</NRadio>
                        <NRadio value={'allUncheck'}>重置</NRadio>
                        <NRadio value={'invert'}>反选</NRadio>
                      </NRadioGroup>
                    </NGi>
                    <NGi span={24} style={'margin-top:5px'}>
                      <NFormItemGi
                        label=""
                        path="multiTracksSelection"
                        rule={[
                          {
                            required: false
                          }
                        ]}
                      >
                        <NCheckboxGroup v-model:value={forms.multiTracksSelection}>
                          <NGrid yGap={2} cols={4}>
                            {state.partListNames.map((item: any) => (
                              <NGi>
                                <NCheckbox value={item.value} label={item.label} />
                              </NGi>
                            ))}
                          </NGrid>
                        </NCheckboxGroup>
                      </NFormItemGi>
                    </NGi>
                  </NGrid>
                </NFormItemGi>
              </NGrid>
            )}
            <NGrid cols={2}>
              <NFormItemGi
                label="是否播放节拍器"
                path="isPlayBeat"
                rule={[
                  {
                    required: true,
                    message: '请选择是否播放节拍器'
                  }
                ]}
              >
                <NRadioGroup v-model:value={forms.isPlayBeat}>
                  <NRadio value={true}>是</NRadio>
                  <NRadio value={false}>否</NRadio>
                </NRadioGroup>
              </NFormItemGi>
              {forms.isPlayBeat && (
                <NFormItemGi
                  label="播放方式"
                  path="audioType"
                  rule={[
                    {
                      required: true,
                      message: '请选择播放方式'
                    }
                  ]}
                >
                  <NRadioGroup v-model:value={forms.isUseSystemBeat}>
                    <NRadio value={true}>系统节拍器</NRadio>
                    <NRadio value={false}>MP3节拍器</NRadio>
                  </NRadioGroup>
                </NFormItemGi>
              )}
            </NGrid>
            {/* 只有播放类型为mp3时才会有原音 */}
            {forms.playMode === 'MP3' && forms.musicSheetSoundList.length > 0 && (
              <>
                {forms.musicSheetSoundList.map((item: any, index: number) => (
                  <>
                    {item.track?.toLocaleUpperCase?.() != 'COMMON' &&
                      forms.multiTracksSelection.indexOf(item.track) > -1 && (
                        <NGrid
                          class={styles.audioSection}
                          // v-show={forms.multiTracksSelection.indexOf(item.track) > -1}
                        >
                          <NFormItemGi
                            span={12}
                            label="原音"
                            path={`musicSheetSoundList[${index}].audioFileUrl`}
                            rule={[
                              {
                                // required: forms.multiTracksSelection.indexOf(forms.musicSheetSoundList[index].audioFileUrl) > -1,
                                required: true,
                                message: `请上传${
                                  item.track ? item.track + '的' : '第' + (index + 1) + '个'
                                }原音`
                              }
                            ]}
                          >
                            <UploadFile
                              desc={'原音文件'}
                              disabled={state.previewMode}
                              size={100}
                              v-model:fileList={item.audioFileUrl}
                              tips="仅支持上传.mp3格式文件"
                              listType="image"
                              accept=".mp3"
                              bucketName="cloud-coach"
                            />
                          </NFormItemGi>
                          {state.partListNames.length > 1 && (
                            <NFormItemGi
                              span={12}
                              label="所属轨道"
                              path={`musicSheetSoundList[${index}].track`}
                              rule={[
                                {
                                  required: true,
                                  message: '请选择所属轨道'
                                }
                              ]}
                            >
                              <NSelect
                                placeholder="请选择所属轨道"
                                v-model:value={item.track}
                                options={initPartsListStatus(item.track)}
                              />
                            </NFormItemGi>
                          )}
                        </NGrid>
                      )}
                  </>
                ))}

                <NButton
                  type="primary"
                  dashed
                  block
                  disabled={state.partListNames.length <= forms.musicSheetSoundList.length}
                  style={{
                    marginBottom: '24px'
                  }}
                  onClick={createSys}
                >
                  添加原音
                </NButton>
              </>
            )}
          </NForm>
        </NSpin>
        {props.type !== 'preview' && (
          <NSpace justify="end" style="padding-top:12px">
            <NButton type="default" onClick={() => emit('close')}>
              取消
            </NButton>
            <NButton
              type="primary"
              onClick={() => onSubmit()}
              loading={btnLoading.value}
              disabled={btnLoading.value}
            >
              确认
            </NButton>
          </NSpace>
        )}

        <NModal
          v-model:show={state.showMusicSheetOwnerDialog}
          preset="dialog"
          showIcon={false}
          maskClosable={false}
          title="所属人"
          style={{ width: '800px' }}
        >
          <MusicSheetOwnerDialog
            musicSheetExtend={forms.musicSheetExtend}
            sourceType={forms.sourceType}
            appData={state.appData}
            onClose={() => {
              state.showMusicSheetOwnerDialog = false
            }}
            onChoseMusicSheetOwnerData={(musicSheetOwnerData) => {
              forms.musicSheetExtend = {
                ...musicSheetOwnerData
              }
              setOwnerName()
            }}
          />
        </NModal>

        <NModal
          class={styles.productModal}
          title="自动生成曲谱图片"
          v-model:show={state.productOpen}
          preset="dialog"
          closeOnEsc={false}
          maskClosable={false}
          showIcon={false}
        >
          <MusicCreateImg
            xmlFileUrl={forms.xmlFileUrl || ''}
            onClose={() => (state.productOpen = false)}
            onConfirm={async (item: any) => {
              // 保存
              try {
                forms.musicImg = item.musicImg
                forms.musicSvg = item.musicSvg
                forms.musicJianSvg = item.musicJianSvg
                onSubmit()
              } catch (e: any) {
                //
                console.log(e, 'e')
              }
              setTimeout(() => {
                state.isAutoSave = false
              }, 50)
            }}
          />
        </NModal>
      </div>
    )
  }
})