h5-colexiu/src/views/music/music-detail/index.tsx

import {
  computed,
  defineComponent,
  nextTick,
  onBeforeUnmount,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch
} from 'vue'
import umiRequest from 'umi-request'
import { useRoute, useRouter } from 'vue-router'
import request from '@/helpers/request'
import ColHeader from '@/components/col-header'
import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
import {
  Button,
  Cell,
  CellGroup,
  Checkbox,
  Dialog,
  Icon,
  Image,
  Popup,
  RadioGroup,
  Sticky,
  Tag,
  Radio,
  Toast,
  Picker
} from 'vant'
import qs from 'query-string'
import styles from './index.module.less'
// import Item from '../list/item'
import { useRect } from '@vant/use'
import { Vue3Lottie } from 'vue3-lottie'
import { getRandomKey, musicBuy } from '../music'
import { getOssUploadUrl, state } from '@/state'
// import { useEventTracking } from '@/helpers/hooks'
import ColSticky from '@/components/col-sticky'
import { browser, getHttpOrigin, moneyFormat } from '@/helpers/utils'
import { orderStatus } from '@/views/order-detail/orderStatus'
import iconShare from '@/views/music/album/icon_share.svg'
import iconAlbum from './images/icon_album.png'
import iconAlbum2 from './images/icon_album2.png'
import iconDownload from './images/icon_download.png'
import iconChange from './images/icon-change.png'
import iconAddCourse from './images/icon-add-course.png'
import iconRemoveCourse from './images/icon-remove-course.png'

import AstronautJSON from './animate/bigLoad.json'
import ColShare from '@/components/col-share'
import iconCollect from './images/icon_collect.png'
import iconCollectActive from './images/icon_collect_active.png'
import iconListen from './images/icon_listen.png'
import emtpy from './images/emtpy.png'

import activeButtonIcon from '@common/images/icon_checkbox.png'
import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
import staffDetafult from './images/staff-default.png'
import firstDefault from './images/first-default.png'
import fixedDefault from './images/fixed-default.png'
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
import Download from './download'
import { getInstrumentName } from '@/constant/instruments'
import { svgtopng } from '@/tenant/music/music-detail/formatSvgToImg'
import { useThrottleFn } from '@vueuse/core'
import {
  formatXML,
  getCustomInfo,
  onlyVisible
} from '@/tenant/music/music-detail/instrument'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `../component/images/${fileName}`
  const modules = import.meta.globEager('../component/images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'MusicDetail',
  setup() {
    const behaviorId = ref(getRandomKey())
    localStorage.setItem('behaviorId', behaviorId.value)
    const router = useRouter()
    const route = useRoute()
    const loading = ref(false)
    const aId = Number(route.query.activityId) || 0
    const studentActivityId = ref(aId)
    const isError = ref(false)
    const headers = ref(null)
    const footers = ref(null)
    const heightInfo = ref<any>('0')
    const musicDetail = ref<any>(null)
    const audioFileUrl = ref('')
    const showImg = ref([] as any)
    const firstList = ref<Array<any>>([])
    const fixedList = ref<Array<any>>([])
    const staffList = ref<Array<any>>([])

    const staffData = reactive({
      // open: false,
      // iframeSrc: '',
      // musicXml: '',
      // instrumentName: '',
      // iframeRef: null as any,
      // partIndex: 0,
      // partXmlIndex: 0,
      // tempPartList: [] as any[],
      // partList: [] as any[],
      // xmlPartList: [] as any[]

      musicId: route.query.id as any,
      isConcert: false, // 是否合奏
      details: {} as any,
      list: [], // 列表数据
      open: false,
      closed: true,
      audioReady: false,
      iframeSrc: "",
      musicXml: "",
      instrumentName: "",
      iframeRef: null as any,
      imgs: [] as any,
      musicPdfUrl: "", // 当前声轨PDF
      partList: [] as any[],
      partNames: [] as string[],
      selectedPartName: "" as any,
      selectedPartIndex: 0,
      isComberRender: false, // 是否合并谱显示
      metronomeUrl: "", // 合奏使用链接
      metronomeMp3Url: "", // 独奏使用链接
    })

    // 当前先中的数据
    const currentColumn = computed(() => {
      console.log(1, partColumns.value, staffData.selectedPartIndex)
      return partColumns.value.find((item: any) => item.value === staffData.selectedPartIndex)
    })

    const defaultImgs = ref({
      first: false,
      fixed: false,
      staff: false
    })
    const downloadStatus = ref<boolean>(false)
    const staff = reactive({
      status: false,
      radio: 'staff' // staff first fixed
    })

    const colors: any = {
      FREE: {
        color: '#01B84F',
        text: '免费'
      },
      VIP: {
        color: '#CD863E',
        text: '会员'
      },
      CHARGE: {
        color: '#3591CE',
        text: '点播'
      }
    }

    // 更改预览状态
    const onChangeStaff = (type: string) => {
      staff.radio = type
      staff.status = false
      if (type == 'first') {
        loading.value = false
        const tempPdf = staffData.details?.firstPdfUrl
        initIframe(tempPdf, 'first', staffData.musicXml)
      } else if (type == 'fixed') {
        loading.value = false
        const tempPdf = staffData.details?.jianPdfUrl
        console.log(tempPdf, 'tempPdf')
        initIframe(tempPdf, 'fixed', staffData.musicXml)
      } else {
        loading.value = false
        const tempPdf = staffData.details?.musicPdfUrl
        initIframe(tempPdf, 'staff', staffData.musicXml)
      }
    }

    const initIframe = (tempPdf: string, staff: string, xml: string) => {
      // if (tempPdf) {
      //   musicPdfUrl.value = tempPdf
      //   renderStaff()
      // } else {
      //   musicPdfUrl.value = ''
      //   // 为了处理，之前是使用pdf渲染，现在又用osmd，iframe没有重新加载
      //   if (
      //     !staffData.iframeSrc ||
      //     staffData.iframeSrc.indexOf('pdf/web') !== -1
      //   ) {
      //     renderStaff()
      //   } else {
      //     resetRenderPage(staff, xml)
      //   }
      // }
    }
    watch(
      () => staff.radio,
      (val: string) => {
        if (val == 'first') {
          showImg.value = firstList.value
        } else if (val == 'fixed') {
          showImg.value = fixedList.value
        } else {
          showImg.value = staffList.value
        }
      }
    )
    const FetchList = async (id?: any) => {
      if (loading.value) {
        return
      }
      loading.value = true
      isError.value = false
      try {
        const { data } = await request.get(state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student' + '/musicSheet/cbsDetail/' + route.query.id)
        musicDetail.value = data
        staffData.details = data



        // const res = await request.get(`/music/sheet/detail/${route.query.id}`, {
        //   prefix:
        //     state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
        // })
        // musicDetail.value = res.data
        // const background = res.data.background
        // audioFileUrl.value =
        //   background && background.length > 0 ? background[0].audioFileUrl : ''
        // // const arrImgs = res.data.musicImg ? res.data.musicImg.split(',') : []
        // showImg.value = res.data.musicImg ? res.data.musicImg.split(',') : []
        // firstList.value = res.data.firstTone
        //   ? res.data.firstTone.split(',')
        //   : []
        // fixedList.value = res.data.fixedTone
        //   ? res.data.fixedTone.split(',')
        //   : []
        // staffList.value = res.data.musicImg ? res.data.musicImg.split(',') : []

        // // 初始化默认数据是否有值
        // if (firstList.value.length > 0) {
        //   defaultImgs.value.first = true
        // }
        // if (fixedList.value.length > 0) {
        //   defaultImgs.value.fixed = true
        // }
        // if (staffList.value.length > 0) {
        //   defaultImgs.value.staff = true
        // }
        await toDetail(data)



        // if (res.data.auditStatus === 'DOING') {
        //   Dialog.confirm({
        //     message: '曲目审核中',
        //     showConfirmButton: true,
        //     showCancelButton: false,
        //     confirmButtonColor: 'var(--van-primary)'
        //   }).then(() => {
        //     if (browser().isApp) {
        //       postMessage({ api: 'goBack' })
        //     } else {
        //       router.back()
        //     }
        //   })
        // }
      } catch (error) {
        isError.value = true
      }
      loading.value = false
    }
    const player = ref<any>(null)
    const audio = ref<any>(null)
    const freeRate = ref<any>(0)
    const initAudio = async () => {
      const controls = [
        'play-large',
        'play',
        'progress',
        'captions',
        // 'fullscreen',
        'duration'
      ]
      player.value = new Plyr(audio.value, {
        controls: controls
      })

      const config = await request.get(
        '/sysConfig/queryByParamNameList',
        {
          prefix: state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
          params: {
            paramNames: 'music_sheet_free_rate'
          }
        }
      )
      freeRate.value = config.data[0]?.paramValue || 0

      // player.value.on("ready", () => {
      //   staffData.audioReady = true;
      //   nextTick(async () => {
      //     console.log('1111')
      //     renderStaff();
      //   });
      // });

      nextTick(async () => {
        renderStaff();
      });

      player.value.on('timeupdate', () => {
        // 允许播放时间
        const players = player.value
        const playTime = (players.duration * freeRate.value) / 100 || 0
        // 时间，不能播放
        if (players.currentTime >= playTime && !buyState.value.play) {
          players.stop()
          // players.pause()
        }
      })
    }
    const showLoading = async (e: any) => {
      if (e.data?.api === 'musicStaffRender') {
        const osmdImg = e.data.osmdImg
        showImg.value = []
        const imgs: any = []
        for (let i = 0; i < osmdImg.length; i++) {
          const img = await svgtopng(
            osmdImg[i].img,
            osmdImg[i].width,
            osmdImg[i].height
          )
          imgs.push(img)
        }
        showImg.value = imgs

        loading.value = e.data.loading
      }
    }
    onMounted(async () => {
      postMessage({
        api: 'setStatusBarTextColor',
        content: { statusBarTextColor: true }
      })
      await FetchList()
      const { height } = useRect(headers as any)
      const footer = useRect(footers as any)
      heightInfo.value = height + footer.height

      // // 初始化音频
      // if (audioFileUrl.value) {
      //   initAudio()
      // }

      window.addEventListener('message', showLoading)
    })
    onBeforeUnmount(() => {
      postMessage({
        api: 'setStatusBarTextColor',
        content: { statusBarTextColor: false }
      })
    })
    onUnmounted(() => {
      window.removeEventListener('message', showLoading)
    })

    const toggleFavorite = async () => {
      /**
       * 酷乐秀老师端 收藏曲目 music/sheet/favorite/id?providerType=?? 添加参数
       * @ApiModelProperty("曲目评测来源 TENANT 机构 PLATFORM 平台")
       * private String providerType;
       * 表示收藏的是机构曲目，还是平台曲目，
       */
      let apiUrl = '', providerType = ''
      if (browser().isTeacher) {
        providerType = state.projectType === 'tenant' ? 'TENANT' : 'PLATFORM'
      }
      apiUrl = `/music/sheet/favorite/${staffData.details?.bizId}`
      try {
        await request.post(apiUrl, {
          requestType: 'form',
          data: {
            providerType
          },
          prefix:
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
        })
        staffData.details.favorite = staffData.details?.favorite ? 0 : 1
        staffData.details.favoriteCount = staffData.details?.favorite
          ? staffData.details.favoriteCount + 1
          : staffData.details.favoriteCount - 1 < 0
          ? 0
          : staffData.details.favoriteCount - 1
        setTimeout(() => {
          Toast(staffData.details?.favorite ? '收藏成功' : '取消收藏成功')
        }, 100)
      } catch (error) {
        //
      }
    }

    const onAddCourse = async () => {
      try {
        const res = await request.post('/api-teacher/courseCourseware/submit', {
          data: {
            musicSheetId: staffData.details.bizId,
            clientType: 'TEACHER',
            userId: state.user.data?.userId
          }
        })
        // console.log(res)
        setTimeout(() => {
          staffData.details.coursewareId = res.data.id || ''
          Toast('已将曲目添加到课件')
          staffData.details.coursewareStatus = 1
        }, 100)
      } catch {
        //
      }
    }
    const removeCourse = async () => {
      Dialog.confirm({
        title: '提示',
        message: '您是否确定移出课件',
        confirmButtonColor: '#269a93',
        cancelButtonText: '取消',
        confirmButtonText: '确定'
      }).then(async () => {
        try {
          await request.post(
            '/api-teacher/courseCourseware/remove/' +
              staffData.details.coursewareId,
            {
              data: {}
            }
          )
          setTimeout(() => {
            Toast('移出成功')
            staffData.details.coursewareStatus = 0
          }, 100)
        } catch {
          //
        }
      })
    }

    const onBuy = async () => {
      const music = staffData.details
      orderStatus.orderObject.orderType = 'MUSIC'
      orderStatus.orderObject.orderName = music.name
      orderStatus.orderObject.orderDesc = music.name
      orderStatus.orderObject.actualPrice = music.musicPrice
      orderStatus.orderObject.recomUserId = route.query.recomUserId || 0
      orderStatus.orderObject.activityId = route.query.activityId || 0
      orderStatus.orderObject.orderNo = ''
      orderStatus.orderObject.orderList = [
        {
          orderType: 'MUSIC',
          goodsName: music.name,
          actualPrice: music.musicPrice,
          price: music.musicPrice,
          ...music
        }
      ]

      const res = await request.post('/userOrder/getPendingOrder', {
        prefix: state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
        data: {
          goodType: 'MUSIC',
          bizId: music.bizId
        }
      })

      const result = res.data
      if (result) {
        Dialog.confirm({
          title: '提示',
          message: '您有一个未支付的订单，是否继续支付？',
          confirmButtonColor: '#269a93',
          cancelButtonText: '取消订单',
          confirmButtonText: '继续支付'
        })
          .then(async () => {
            orderStatus.orderObject.orderNo = result.orderNo
            orderStatus.orderObject.actualPrice = result.actualPrice
            orderStatus.orderObject.discountPrice = result.discountPrice
            orderStatus.orderObject.paymentConfig = {
              ...result.paymentConfig,
              paymentVendor: result.paymentVendor,
              paymentVersion: result.paymentVersion
            }
            routerTo()
          })
          .catch(() => {
            Dialog.close()
            // 只用取消订单，不用做其它处理
            cancelPayment(result.orderNo)
          })
      } else {
        routerTo()
      }
    }
    const routerTo = () => {
      const music = staffData.details
      router.push({
        path: '/orderDetail',
        query: {
          orderType: 'MUSIC',
          musicId: music.bizId
        }
      })
    }
    const cancelPayment = async (orderNo: string) => {
      try {
        await request.post('/userOrder/orderCancel', {
          prefix: state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
          data: {
            orderNo
          }
        })
      } catch {}
    }

    const paymentType = computed(() => {
      let paymentType = staffData.details?.paymentType
      if (typeof paymentType === 'string') {
        paymentType = paymentType.split(',')
        return paymentType
      }
      return []
    })

    const buyState = computed(() => {
      const music = staffData.details
      return {
        hasTenantAlbum: route.query?.tenantAlbumId ? true : false, // 是否从专辑来的
        play: music.play ? true : false, // 是否可以播放
        free: music?.paymentType.includes('FREE'),
        charge: music?.paymentType.includes('CHARGE'),
        vip: music?.paymentType.includes('VIP'),
        buy: music?.orderStatus === 'PAID' // 是否已买
      }
    })

    const shareStatus = ref(false)
    const shareUrl = ref('')
    const shareDiscount = ref(0)

    const partColumns = ref<any>([]);
    // console.log(data)
    const onShare = async () => {
      try {
        const res = await request.post('/api-teacher/open/musicShareProfit', {
          data: {
            bizId: staffData.details?.bizId,
            userId: state.user.data?.userId
          }
        })
        let url =
          location.origin +
          `/teacher/#/shareMusic?id=${staffData.details?.bizId}&recomUserId=${state.user.data?.userId}&userType=${state.platformType}`
        // 判断是否有活动
        if (res.data.discount === 1) {
          url += `&activityId=${res.data.activityId}`
        }
        shareDiscount.value = res.data.discount || 0
        shareUrl.value = url
        shareStatus.value = true
        return
      } catch {}
    }

    
    /** 渲染五线谱 */
    const sortList = {
      长笛: 1,
      单簧管: 2,
      中音单簧管: 3,
      低音单簧管: 4,
      高音萨克斯风: 5,
      中音萨克斯风: 6,
      次中音萨克斯风: 7,
      低音萨克斯风: 8,
      小号: 9,
      长号: 10,
      圆号: 11,
      大号: 12,
      上低音号: 13
    }
    const instrumentSort = (list: Array<any>) => {
      list.sort((a, b) => {
        return (
          (sortList[getInstrumentName(a.track)] || 20) -
          (sortList[getInstrumentName(b.track)] || 20)
        )
      })
      return list
    }

    const getPartNames = async (xmlUrl: string) => {
      const partNames: string[] = [];
      try {
        const res = await umiRequest.get(xmlUrl, { mode: "cors" });
        const xml: any = new DOMParser().parseFromString(res, "text/xml");
        for (const item of xml.getElementsByTagName("part-name")) {
          if (item.textContent) {
            partNames.push(item.textContent?.trim());
          }
        }
      } catch (error) {}
      return partNames;
    };

    /** 获取分轨信息 */
    const getInstrumentItem = (instruments: any, name = "") => {
      name = name.toLocaleLowerCase().replace(/ /g, ""); //.replace(/\d*/gi, '')
      if (!name) return "";
      for (let key in instruments) {
        const item = instruments[key];
        const _key = item.track?.toLocaleLowerCase().replace(/ /g, ""); //.replace(/\d*/gi, '')
        if (_key === name) {
          return item;
        }
      }
      return "";
    };

    // 根据当前选中的声部和曲目筛选出对应的声轨
    function filterSoundCodes(musicalInstruments: any) {
      // 老师端，加上乐器id
      const instrumentIds = 2160 // appState.instrumentId || appState.user?.instrumentId || route.query.instrumentId
      if (instrumentIds) {
        const { code } =  musicalInstruments.find((item: any) => {
               return instrumentIds == item.id
            }) || {}
        return code
      }
      return null
   }

   // 根据当前选中的声部和曲目筛选出对应的声轨
   function filterSoundInfo(musicalInstruments: any) {
    if(musicalInstruments.length <= 0) return null
    // 老师端，加上乐器id
    const instrumentIds = 2160 //appState.instrumentId || appState.user?.instrumentId || route.query.instrumentId
    if (instrumentIds) {
      const item =  musicalInstruments.find((item: any) => {
             return instrumentIds == item.musicalInstrumentId && item.audioPlayType == 'PLAY'
          }) || null
      return item
    }
    return null
  }

  const toDetail = async (row) => {
    const partNames = await getPartNames(row.xmlFileUrl);
    staffData.partNames = partNames;
    const tempSongList = row.musicSheetSoundList || []
    let partList = tempSongList.filter((item: any) => item.audioPlayType === 'PLAY')
    staffData.list = tempSongList.filter((item: any) => item.audioPlayType === 'PLAY')
    partList = partList.filter(
      (item: any) => !item.track?.toLocaleUpperCase()?.includes("COMMON")
    );
    partColumns.value = partList.map((item: any, index: number) => {
      const xmlIndex = staffData.partNames.filter((text: string) => text.toLocaleUpperCase() !== "COMMON").findIndex(
        (name: any) => name.trim() === item.track
      );
      const defaultIndex = row.musicSheetType !== "SINGLE" && row.isScoreRender ? index + 1 : index
      return {
        text: getInstrumentName(item.track as string),
        name: getInstrumentName(item.track as string), // true
        track: item.track,
        musicPdfUrl: item.soundMusicPdfUrl,
        xmlIndex,
        value: defaultIndex,
      };
    });

    staffData.details = row || {};
    staffData.musicXml = staffData.details?.xmlFileUrl;
    staffData.isComberRender = staffData.details?.isScoreRender;
    

    let defaultShowStaff
    if(staffData.details?.musicalInstruments) {
      const soundCodes = filterSoundCodes(staffData.details?.musicalInstruments)
      if (soundCodes) {
        const soundCodesArr = soundCodes.split(",").map((code: string) => {
          return code
              .toLowerCase()
              .replace(/^\d+|\d+$/g, "")
              .trim()
        })
        defaultShowStaff = partColumns.value.find((item: any) =>
          soundCodesArr.includes(
              item.track &&
                item.track
                    .toLowerCase()
                    .replace(/^\d+|\d+$/g, "")
                    .trim()
          )
        )
        if(defaultShowStaff) {
          staffData.selectedPartIndex = defaultShowStaff.value
        }
      }
    }
    

    if (row.musicSheetType === "SINGLE") {
      staffData.musicPdfUrl = row.musicPdfUrl;
      // 生成的图片
      // staffData.imgs = row.musicImg ? row.musicImg.split(',') : []; 
    } else {
      // 初始化数据
      // 是否显示总谱
      if (staffData.isComberRender) {
        partColumns.value.unshift({
          text: "总谱",
          value: 0,
          xmlIndex: 999,
          track: "",
          name: "总谱",
        });
        // 如果是总谱则默认选中，否则选择
        console.log(defaultShowStaff, 'defaultShowStaff')
        staffData.selectedPartIndex = row.defaultScoreRender? 0 : defaultShowStaff  ? defaultShowStaff.value : 1
        if(row.defaultScoreRender) {
          staffData.musicPdfUrl = row.musicPdfUrl;
        } else {
          staffData.musicPdfUrl = defaultShowStaff.musicPdfUrl;
        }
      } else {
        const item = partColumns.value.find((item: any) => item.value === staffData.selectedPartIndex)
        console.log(item, partColumns.value, staffData.selectedPartIndex, 'selectedPartIndex')
        if (item) {
          staffData.musicPdfUrl = item.musicPdfUrl;
        } else {
          staffData.musicPdfUrl = "";
        }
      }
    }

    // 通过isScoreRender判断是否合并渲染
    // 多声轨,  不是单声部多声轨, 不是老师布置作业选择曲谱
    if (row.musicSheetType === "SINGLE") {
      staffData.isConcert = false;
      const musicSheetSoundList = staffData.details?.musicSheetSoundList  || []
      const songs = filterSoundInfo(musicSheetSoundList)
      if(songs) {
        staffData.metronomeMp3Url = songs.audioFileUrl
      } else {
        // 为了处理节奏练习
        if(musicSheetSoundList.length > 0) {
          staffData.metronomeMp3Url = musicSheetSoundList[0].audioFileUrl
        }
      }
    } else {  
      staffData.isConcert = true;
      const { audioFileUrl } = row.musicSheetAccompanimentList.find((item: any) => item.audioPlayType == 'PLAY')
      staffData.metronomeUrl = audioFileUrl
    }
    if (
      (staffData.isConcert && staffData.metronomeUrl) ||
      (!staffData.isConcert && staffData.metronomeMp3Url)
    ) {
      audioFileUrl.value = staffData.isConcert ? staffData.metronomeUrl : staffData.metronomeMp3Url
      nextTick(async () => {
        initAudio();
      });
    } else {
      renderStaff();
    }
  }


  const getPreViewCloud = (musicId: string, partIndex: number) => {
    const Authorization = sessionStorage.getItem("Authorization") || "";
    const musicScorePath = "/klx-music-score/";
    // const musicScoreUrl = getHttpOrigin() + musicScorePath;
    const musicScoreUrl = "https://dev.colexiu.com" + musicScorePath;
    // const musicScoreUrl = 'http://192.168.3.68:3000/instrument.html';
    let href = `${musicScoreUrl}?t=${Date.now()}#/?id=${musicId}&Authorization=${Authorization}&part-index=${partIndex}&isPreView=true&zoom=0.5&downPng=A4`; 
    // // 老师端加上systemType=teacher
    href += ('&systemType=' +( state.platformType === "STUDENT" ? `student` : 'teacher'));
    // if (location.pathname.includes("accompany-teacher")) {
    //   href += `&systemType=teacher`;
    // }    
    return href
  };
    const renderStaff = async () => {
      try {
        nextTick(() => {
          console.log(staffData.musicPdfUrl, 'staffData.musicPdfUrl')
          if (staffData.musicPdfUrl) {
            const url = `${location.origin}${
              location.pathname
            }pdf/web/viewer-pdf.html?file=${encodeURIComponent(
              staffData.musicPdfUrl
            )}&t=${Date.now()}`

            const iframeRef = document.querySelector('#staffIframeRef') as any
            iframeRef.contentWindow.location.replace(url)
            staffData.iframeSrc = url
          } else {
            const url = getPreViewCloud(staffData.musicId, currentColumn.value.xmlIndex)
            console.log(url, 'staffIframeRef')

            const iframeRef = document.querySelector('#staffIframeRef') as any
            iframeRef.contentWindow.location.replace(
              `${location.origin}${location.pathname}osmd/index.html`
            )
            staffData.iframeSrc = url
          }
        })
      } catch (error) {
        //
      }
    }

    const resetRender = () => {
      const iframeRef: any = document.getElementById("staffIframeRef")
      iframeRef.contentWindow.location.replace(getPreViewCloud(staffData.musicId, currentColumn.value.xmlIndex))
    }
    // const musicIframeLoad = async () => {
    //   const iframeRef: any = document.getElementById('staffIframeRef')
    //   if (iframeRef && iframeRef.contentWindow.renderXml) {
    //     const res = await umiRequest.get(staffData.musicXml, {
    //       mode: 'cors'
    //     })
    //     const parseXmlInfo = getCustomInfo(res)
    //     const xml = formatXML(parseXmlInfo.parsedXML)

    //     const currentXml = onlyVisible(xml, staffData.partXmlIndex)
    //     iframeRef.contentWindow.renderXml(currentXml, 0, staff.radio)

    //     // iframeRef.contentWindow.renderXml(
    //     //   staffData.musicXml,
    //     //   staffData.partXmlIndex
    //     // )
    //   }
    // }

    // const resetRenderPage = async (type: string, xmlUrl: string) => {
    //   const iframeRef: any = document.getElementById('staffIframeRef')
    //   if (iframeRef && iframeRef.contentWindow.renderXml) {
    //     loading.value = true
    //     const res = await umiRequest.get(staffData.musicXml, {
    //       mode: 'cors'
    //     })
    //     const parseXmlInfo = getCustomInfo(res)
    //     const xml = formatXML(parseXmlInfo.parsedXML)

    //     const currentXml = onlyVisible(xml, staffData.partXmlIndex)
    //     iframeRef.contentWindow.resetRenderPage(type, currentXml)
    //   }
    // }
    // const partColumns = computed(() => {
    //   return staffData.partList.map((item: any, index: number) => {
    //     const instrumentName =
    //       staffData.details?.musicSheetType === 'CONCERT'
    //         ? getInstrumentName(item.track)
    //         : ''
    //     return {
    //       text: item.track + (instrumentName ? `(${instrumentName})` : ''),
    //       value: index,
    //       instrumentName,
    //       musicPdfUrl: item.musicPdfUrl,
    //       firstPdfUrl: item.firstPdfUrl,
    //       jianPdfUrl: item.jianPdfUrl,
    //       xmlValue: item.index,
    //       track: item.track
    //     }
    //   })
    // })
    return () => {
      return (
        <div class={styles.detail}>
          <ColSticky position="top">
            <div ref={headers}>
              <ColHeader
                background="transparent"
                hideHeader={false}
                border={false}
                isFixed={false}
                color="#fff"
                title={staffData.details?.name}
                backIconColor="white"
                v-slots={{
                  right: () => (
                    <div
                      class={styles.shareBtn}
                      style={{
                        color: '#fff'
                      }}
                      onClick={onShare}
                    >
                      <Image src={iconShare} />
                      分享
                    </div>
                  )
                }}
              />
            </div>
          </ColSticky>

          <img class={styles.bgImg} src={staffData.details?.musicCover} />
          <div class={styles.bgContent}></div>
          <div
            class={styles.musicContainer}
            style={{
              marginTop: '16px',
              height: `calc(100vh - var(--header-height) - var(--bottom-height) - 16px)`
            }}
          >
            <div>
              <Cell
                border={false}
                center
                class={styles.musicInfo}
                v-slots={{
                  icon: () => (
                    <Image
                      class={styles.pImg}
                      src={ staffData.details?.musicCover}
                    />
                  ),
                  title: () => (
                    <div class={styles.info}>
                      <h4
                        class="van-ellipsis"
                        // onClick={() => handleGotoMusicScore( staffData.details)}
                      >
                        { staffData.details?.name}
                      </h4>
                      <p
                        style={{
                          display: 'flex',
                          alignItems: 'center'
                        }}
                      >
                        {paymentType.value.map(
                          tag =>
                            tag && (
                              <Tag
                                style={{ color: colors[tag]?.color }}
                                class={styles.tag}
                                type="success"
                                plain
                              >
                                {colors[tag].text}
                              </Tag>
                            )
                        )}
                        { staffData.details?.exquisiteFlag === 1 && (
                          <Image
                            class={styles.exquisiteFlag}
                            src={getAssetsHomeFile('icon_exquisite.png')}
                          />
                        )}

                        { staffData.details?.albumNums > 0 && (
                          <Image
                            class={styles.songAlbum}
                            src={getAssetsHomeFile('icon_album_active.png')}
                          />
                        )}
                        <span
                          class={[
                            styles.coomposer,
                            browser().isApp &&
                               staffData.details?.sourceType === 'TEACHER' &&
                              state.platformType === 'STUDENT' &&
                              styles.links
                          ]}
                          onClick={() => {
                            if (
                              browser().isApp &&
                               staffData.details?.sourceType === 'TEACHER' &&
                              state.platformType === 'STUDENT'
                            ) {
                              router.push({
                                path: '/teacherHome',
                                query: {
                                  teacherId:  staffData.details?.userId,
                                  tabs: 'music'
                                }
                              })
                            }
                          }}
                        >
                          <img class={styles.iconAlbum2} src={iconAlbum2} />
                          <span>
                            { staffData.details?.userName ||
                              '游客' + ( staffData.details?.userId || '')}
                          </span>
                        </span>
                      </p>
                    </div>
                  ),
                  value: () => (
                    <>
                      <span
                        style={{
                          visibility:
                            state.platformType === 'TEACHER'
                              ? 'visible'
                              : 'hidden'
                        }}
                        class={styles.download}
                        onClick={() => {
                          if ( staffData.details?.coursewareStatus) {
                            removeCourse()
                          } else {
                            onAddCourse()
                          }
                        }}
                      >
                        <img
                          src={
                             staffData.details?.coursewareStatus
                              ? iconRemoveCourse
                              : iconAddCourse
                          }
                        />
                        <span>
                          { staffData.details?.coursewareStatus
                            ? '移出课件'
                            : '添加课件'}
                        </span>
                      </span>
                      <span
                        class={styles.download}
                        onClick={() => toggleFavorite()}
                      >
                        <img
                          src={
                             staffData.details?.favorite
                              ? iconCollectActive
                              : iconCollect
                          }
                        />
                        <span>收藏</span>
                      </span>
                    </>
                  )
                }}
              />
              <div class={styles.functionSection}>
                <div
                  class={styles.functionItem}
                  onClick={() => {
                    router.push({
                      path: '/look-album-list',
                      query: {
                        id: staffData.details?.bizId,
                        musicSubject: staffData.details?.musicSubject
                      }
                    })
                  }}
                >
                  <img src={iconAlbum} />
                  <span>专辑</span>
                </div>
                <div
                  class={styles.functionItem}
                  style={{
                    display:
                       staffData.details?.musicSheetType === 'CONCERT'
                        ? ''
                        : 'none'
                  }}
                  onClick={() => {
                    if ( staffData.details?.musicSheetType === 'CONCERT') {
                      staffData.open = true
                    }
                  }}
                >
                  <img src={iconChange} />
                  <span>切换乐器</span>
                </div>
                {staffData.details?.notation ? (
                  <div
                    class={styles.functionItem}
                    style={{
                      display:
                         staffData.details?.musicSheetType === 'SINGLE'
                          ? ''
                          : 'none'
                    }}
                    onClick={() => {
                      staff.status = true
                    }}
                  >
                    <img src={iconChange} />
                    <span>转谱</span>
                  </div>
                ) : null}

                <div
                  class={[styles.functionItem, (loading.value ||
                    (!staffData.musicPdfUrl && staffData.imgs.length <= 0)) ? styles.disabled : '']}
                  onClick={() => {
                    console.log(loading.value, staffData.musicPdfUrl, staffData.imgs.length)
                    if((loading.value ||
                      (!staffData.musicPdfUrl && staffData.imgs.length <= 0))) return
                    if (staffData.musicPdfUrl) {
                      const songName =
                        staffData.details?.name +
                        (staffData.isConcert &&
                        currentColumn.value?.name
                          ? `(${
                              currentColumn.value
                                ?.name || ""
                            })`
                          : "");
                      promisefiyPostMessage({
                        api: "downloadFile",
                        content: {
                          downloadUrl: staffData.musicPdfUrl,
                          fileName: songName,
                        },
                      });
                    } else {
                      downloadStatus.value = true;
                    }
                  }}
                >
                  <img src={iconDownload} />
                  <span>下载</span>
                </div>
              </div>
            </div>

            <div class={styles.musicContent}>
              {staffData.details.id ? (
                <>
                  {staffData.musicPdfUrl ? (
                    <>
                      {loading.value && (
                        <>
                          <Vue3Lottie
                            animationData={AstronautJSON}
                            class={styles.finch}
                          ></Vue3Lottie>
                          <p class={styles.finchLoad}>加载中...</p>
                        </>
                      )}
                      <iframe
                        style={{
                          opacity: loading.value ? 0 : 1,
                        }}
                        id="staffIframeRef"
                        src={staffData.iframeSrc}
                        onLoad={() => {
                          // 判断是用哪个渲染的
                          loading.value = false;
                        }}
                      ></iframe>
                    </>
                  ) : (
                    <>
                      <p class={styles.musicTitle}>
                        {staffData.details?.name && (
                          <>
                            {staffData.details?.name}
                            {staffData.isConcert &&
                            currentColumn.value?.name
                              ? `(${
                                  currentColumn.value
                                    ?.name || ""
                                })`
                              : ""}
                          </>
                        )}
                      </p>
                      {loading.value && (
                        <>
                          <Vue3Lottie
                            animationData={AstronautJSON}
                            class={styles.finch}
                          ></Vue3Lottie>
                          <p class={styles.finchLoad}>加载中...</p>
                        </>
                      )}
                      <iframe
                        id="staffIframeRef"
                        style={{
                          opacity: loading.value ? 0 : 1,
                        }}
                        src={staffData.iframeSrc}
                        onLoad={() => {
                          loading.value = false;
                          // musicIframeLoad();
                        }}
                      ></iframe>
                    </>
                  )}
                </>
              ) : null}
            </div>
          </div>

          {staffData.details?.bizId && (
            <ColSticky
              position="bottom"
              background="white"
              varName="--bottom-height"
            >
              <div ref={footers}>
                <div class={styles.videoOperation}>
                  {audioFileUrl.value && (
                    <>
                      {!buyState.value.play &&
                        freeRate.value != 100 &&
                        freeRate.value != 0 && (
                          <div class={[styles.audition]}>
                            <img src={iconListen} />
                            <span>每首曲目可试听{freeRate.value}%</span>
                          </div>
                        )}

                      <div class={[styles.audio, styles.collectCell]}>
                        <audio id="player" controls ref={audio}>
                          <source src={audioFileUrl.value} type="audio/mp3" />
                        </audio>
                      </div>
                    </>
                  )}
                </div>
                {/* 判断是否是免费的，或者已经购买过，是否从专辑过来的 */}
                {buyState.value.play ||
                (state.platformType === 'TEACHER' &&
                  buyState.value.hasTenantAlbum) ? (
                  <Button
                    round
                    block
                    type="primary"
                    color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
                    onClick={() => {
                      const throttleFn = useThrottleFn(() => {
                        player.value && player.value.stop()
                        
                        // 新版云教练的谱面类型使用musicRenderType字段
                        const musicRenderType = staff.radio === 'staff' ? 'staff' : staff.radio === 'first' ? 'firstTone' :  staff.radio === 'fixed' ? 'fixedTone' : '';
                        let extraParam: any = {
                          'part-index': currentColumn.value.xmlIndex || 0,
                          // musicRenderType,
                        }
                        if (route.query.tenantAlbumId) {
                          extraParam.albumId = route.query.tenantAlbumId
                        }
                        musicBuy(staffData.details, () => {}, extraParam)
                      }, 500)
                      throttleFn()
                    }}
                  >
                    立即练习
                  </Button>
                ) : (
                  <div class={styles.colSticky}>
                    {/* 只有，有点播类型的才显示价格 */}
                    {buyState.value.charge && (
                      <div class={styles.priceSection}>
                        <span>点播价：</span>
                        <span class={styles.price}>
                          <i>¥</i>
                          {moneyFormat(staffData.details?.musicPrice)}
                        </span>
                      </div>
                    )}
                    <div class={[styles.buyBtn]}>
                      {/* 判断是否是需要收费的 */}
                      {buyState.value.charge && (
                        <Button
                          round
                          type="primary"
                          color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
                          class={styles.primary}
                          onClick={onBuy}
                        >
                          立即点播
                        </Button>
                      )}

                      {/* 判断是否有会员的 */}
                      {buyState.value.vip && (
                        <Button
                          round
                          block={!buyState.value.charge ? true : false}
                          type="primary"
                          color="linear-gradient(180deg, #F7BD8D 0%, #CD8806 100%)"
                          class={styles.memeber}
                          onClick={() => {
                            router.push({
                              path: '/memberCenter',
                              query: {
                                ...route.query
                              }
                            })
                          }}
                        >
                          {studentActivityId.value > 0 && (
                            <div class={[styles.buttonDiscount]}>专属优惠</div>
                          )}
                          开通会员
                        </Button>
                      )}
                    </div>
                  </div>
                )}
              </div>
            </ColSticky>
          )}

          <Popup
            v-model:show={shareStatus.value}
            style={{ background: 'transparent' }}
            teleport="body"
          >
            <ColShare
              teacherId={state.user.data?.userId}
              shareUrl={shareUrl.value}
              shareType="music"
            >
              <div class={styles.shareMate}>
                {shareDiscount.value === 1 && (
                  <div class={styles.tagDiscount}>专属优惠</div>
                )}

                <img
                  class={styles.icon}
                  crossorigin="anonymous"
                  src={staffData.details?.musicCover}
                />
                <div class={styles.info}>
                  <h4 class="van-multi-ellipsis--l2">
                    {staffData.details?.name}
                  </h4>
                  <p>作曲人：{staffData.details?.composer}</p>
                </div>
              </div>
            </ColShare>
          </Popup>

          <Popup v-model:show={downloadStatus.value} position="bottom" round>
            {downloadStatus.value && (
              <Download
                imgList={JSON.parse(JSON.stringify(showImg.value))}
                musicSheetName={
                  staffData.details.name +
                  (staffData.isConcert &&
                  currentColumn.value?.name
                    ? `(${
                        currentColumn.value?.name || ""
                      })`
                    : "")
                }
              />
            )}
          </Popup>

          <Popup
            v-model:show={staff.status}
            teleport="body"
            closeable
            style={{ width: '80%' }}
            round
          >
            <div class={styles.staffContainer}>
              <div class={styles.staffTitle}>选择转换曲谱</div>
              <RadioGroup v-model={staff.radio}>
                <CellGroup border={false}>
                  <Cell
                    center
                    border={false}
                    class={staff.radio === 'staff' ? styles.active : ''}
                    onClick={() => onChangeStaff('staff')}
                  >
                    {{
                      icon: () => (
                        <Image src={staffDetafult} class={styles.staffImg} />
                      ),
                      title: () => <span class={styles.name}>五线谱</span>,
                      value: () => (
                        <Radio name="staff">
                          {{
                            icon: (props: any) => (
                              <Icon
                                class={styles.boxStyle}
                                size={16}
                                name={
                                  props.checked
                                    ? activeButtonIcon
                                    : inactiveButtonIcon
                                }
                              />
                            )
                          }}
                        </Radio>
                      )
                    }}
                  </Cell>
                  <Cell
                    center
                    border={false}
                    class={staff.radio === 'first' ? styles.active : ''}
                    onClick={() => onChangeStaff('first')}
                  >
                    {{
                      icon: () => (
                        <Image src={firstDefault} class={styles.staffImg} />
                      ),
                      title: () => <span class={styles.name}>简谱-首调</span>,
                      value: () => (
                        <Radio name="first">
                          {{
                            icon: (props: any) => (
                              <Icon
                                class={styles.boxStyle}
                                size={16}
                                name={
                                  props.checked
                                    ? activeButtonIcon
                                    : inactiveButtonIcon
                                }
                              />
                            )
                          }}
                        </Radio>
                      )
                    }}
                  </Cell>
                  <Cell
                    center
                    border={false}
                    class={staff.radio === 'fixed' ? styles.active : ''}
                    onClick={() => onChangeStaff('fixed')}
                  >
                    {{
                      icon: () => (
                        <Image src={fixedDefault} class={styles.staffImg} />
                      ),
                      title: () => <span class={styles.name}>简谱-固定调</span>,
                      value: () => (
                        <Radio name="fixed">
                          {{
                            icon: (props: any) => (
                              <Icon
                                class={styles.boxStyle}
                                size={16}
                                name={
                                  props.checked
                                    ? activeButtonIcon
                                    : inactiveButtonIcon
                                }
                              />
                            )
                          }}
                        </Radio>
                      )
                    }}
                  </Cell>
                </CellGroup>
              </RadioGroup>
            </div>
          </Popup>

          <Popup
            teleport="body"
            position="bottom"
            round
            v-model:show={staffData.open}
          >
            <Picker
              columns={partColumns.value}
              onConfirm={value => {
                staffData.open = false;
                staffData.selectedPartIndex = value.value;
                staffData.imgs = [];
                nextTick(() => {
                  let tempPdf = "";
                  if (staffData.isComberRender && value.xmlIndex === 999) {
                    if (staffData.details.musicPdfUrl) {
                      tempPdf = staffData.details.musicPdfUrl;
                    }
                  } else {
                    const item = getInstrumentItem(staffData.list, value.track);
                    console.log(item, 'item---------', value.track, staffData.list)
                    if (item && item.soundMusicPdfUrl) {
                      tempPdf = item.soundMusicPdfUrl;
                    }
                  }
                  staffData.musicPdfUrl = tempPdf;
                  if (tempPdf) {
                    console.log(staffData.musicPdfUrl, 'musicPadUrl')
                    renderStaff();
                  } else {
                    loading.value = true;
                    if (staffData.musicPdfUrl) {
                      staffData.musicPdfUrl = "";
                      renderStaff();
                    } else {
                      resetRender();
                    }
                  }
                });
              }}
              onCancel={() => (staffData.open = false)}
            />
          </Popup>
        </div>
      )
    }
  }
})