classroom/src/views/cloudPractice/cloudPractice.tsx

import { computed, defineComponent, nextTick, onMounted, reactive, ref, shallowRef } from "vue"
import styles from "./index.module.scss"
import NavContainer from "@/businessComponents/navContainer"
import { ElEmpty, ElScrollbar } from "element-plus"
import Dictionary from "@/components/dictionary"
import MyInput from "@/components/myInput"
import { NImage, NPopselect, NSpin } from "naive-ui"
// import PlayLoading from "./component/play-loading"
import PlayItem from "./component/play-item"
import icon_default from "../../img/cloudPractice/icon_default.png"
import iconBtnPause from "../../img/cloudPractice/icon-btn-pause.png"
import iconBtnPlay from "../../img/cloudPractice/icon-btn-play.png"
import btnSubmit from "../../img/cloudPractice/btn-submit.png"
import iconTransfer from "../../img/cloudPractice/icon-transfer.png"
import { httpAjaxErrMsg } from "@/plugin/httpAjax"
import {
   queryPage2_gym,
   queryPage2_gyt,
   queryPage2_klx,
   querySubjectIds_gym,
   querySubjectIds_gyt,
   querySubjectIds_klx,
   queryTree_gym,
   queryTree_gyt,
   queryTree_klx,
   selectCondition_klx
} from "@/api/cloudPractice.api"
// import { getToken } from "@/libs/auth"
// import { URL_TEACH_GYM } from "@/config"
import axios from "axios"
import { getInstrumentName } from "@/libs/instruments"
import { formatXML, getCustomInfo, onlyVisible } from "./instrument"
import { useFunction } from "./useData"
import userStore from "@/store/modules/user"

export default defineComponent({
   name: "cloudPractice",
   setup() {
      const userStoreHook = userStore()
      const { goToCloud } = useFunction()
      const navs = [
         {
            name: "主页",
            url: "/"
         },
         {
            name: "云练习"
         }
      ]
      const spinRef = ref()
      const state = reactive({
         finshed: false,
         reshing: false,
         page: 1,
         rows: 20,
         iframeSrc: "",
         listActive: 0, // 当前选中的对象
         firstTreeId: null as any, // 左侧
         categoryId: null as any, // 类型
         categoryName: "" as any, // 类型名称
         categoryList: [] as any[],
         levelList: [] as any[], // 级别
         levelId: null as any,
         typeList: [] as any[], // 类型
         typeId: -1 as any,
         subjectList: [] as any[], // 声部列表
         subjectId: -1 as any,
         list: [] as any[],
         searchStatus: false,
         queryStr: "", // 搜索条件
         partList: [] as any[],
         partNames: [] as any[],
         selectedPartName: "" as any,
         selectedPartIndex: 0,
         partXmlIndex: 0,
         playState: "pause" as "play" | "pause", // 播放状态
         showPlayer: false // 是否显示播放器
      })
      const partColumns = ref<any>([])

      /** 选中的item */
      const activeItem = computed(() => {
         const list = state.list[state.listActive] || {}
         let tempList: any = {}

         if (userStoreHook.roles === "GYM") {
            const item = list.background?.[0]
            const audioFileUrl = item?.musicSheetType === "CONCERT" ? item?.metronomeUrl : item?.metronomeMp3Url || item?.mp3Url
            tempList = {
               id: item?.id,
               name: item?.examSongName,
               background: list?.background,
               xmlUrl: item?.xmlUrl,
               musicSheetType: item?.musicSheetType,
               audioFileUrl,
               isComberRender: false
            }
         } else if (userStoreHook.roles === "GYT") {
            tempList = {
               id: list?.id,
               name: list?.musicSheetName,
               background: list?.background,
               xmlUrl: list?.xmlFileUrl,
               musicSheetType: list?.musicSheetType,
               audioFileUrl: list?.audioFileUrl,
               isComberRender: list?.musicSubject === "1"
            }
         } else if (userStoreHook.roles === "KLX") {
            const item: any = list.background?.[0]
            tempList = {
               id: list?.id,
               name: list?.musicSheetName,
               background: list?.background,
               xmlUrl: list?.xmlFileUrl,
               musicSheetType: list?.musicSheetType,
               audioFileUrl: item?.audioFileUrl,
               isComberRender: false
            }
         }
         return tempList
      })

      const songPrevNextStatus = computed(() => {
         let prev = true,
            next = true
         if (state.listActive === 0) {
            prev = false
         }

         if (state.listActive >= state.list.length - 1) {
            next = false
         }

         return {
            prev,
            next
         }
      })

      const loading = ref(false)
      const staffLoading = ref(false)
      const storeData = shallowRef<any[]>([])
      const handleSearchList_gym = async () => {
         loading.value = true
         await httpAjaxErrMsg(queryTree_gym).then(res => {
            loading.value = false
            if (res.code === 200) {
               storeData.value = res.data || []

               setDefaultData()
            }
         })
      }

      const handleGetSubject_gym = async () => {
         loading.value = true
         // , { categoriesId: state.categoryId || state.firstTreeId }
         await httpAjaxErrMsg(querySubjectIds_gym).then(res => {
            loading.value = false
            if (res.code === 200) {
               const result = res.data || []

               state.subjectList = result.map((item: any) => {
                  return {
                     label: item.name,
                     value: item.id
                  }
               })

               state.subjectList.unshift({
                  label: "全部声部",
                  value: -1
               })

               const userSubjectId = userStoreHook.userInfo.subjectId
               if (userSubjectId) {
                  const tempSubjectId = userSubjectId.split(",")[0]
                  state.subjectList.forEach((item: any) => {
                     // 判断是否存在声部编号
                     if (item.value === Number(tempSubjectId)) {
                        state.subjectId = Number(tempSubjectId)
                     }
                  })
               }
            }
         })
      }

      const handleGetList_gym = async () => {
         loading.value = true
         const params = {
            page: state.page,
            rows: state.rows,
            subjectId: state.subjectId === -1 ? null : state.subjectId,
            categoriesId: state.typeId === -1 ? state.levelId : state.typeId,
            search: state.queryStr
         }

         await httpAjaxErrMsg(queryPage2_gym, params).then(res => {
            loading.value = false
            if (res.code === 200) {
               const result = res.data || []

               if (state.reshing) {
                  state.list = []
                  state.reshing = false
               }

               if (Array.isArray(result.rows)) {
                  state.list = [...state.list, ...result.rows]
                  state.finshed = state.page >= result.totalPage
               } else {
                  state.finshed = true
               }
            }
         })
      }

      /** 管乐团数据查询 */
      const handleSearchList_gyt = async () => {
         loading.value = true
         await httpAjaxErrMsg(queryTree_gyt, {
            enable: true,
            page: 1,
            parentId: 0,
            rows: 10
         }).then(res => {
            loading.value = false
            if (res.code === 200) {
               storeData.value = res.data || []

               setDefaultData()
            }
         })
      }

      const handleGetSubject_gyt = async () => {
         loading.value = true
         await httpAjaxErrMsg(querySubjectIds_gyt, {
            enableFlag: true,
            page: 1,
            rows: 100
         }).then(res => {
            loading.value = false
            if (res.code === 200) {
               const result = res.data || []

               state.subjectList = result.map((item: any) => {
                  return {
                     label: item.name,
                     value: item.id
                  }
               })

               state.subjectList.unshift({
                  label: "全部声部",
                  value: -1
               })

               const userSubjectId = userStoreHook.userInfo.subjectId
               if (userSubjectId) {
                  const tempSubjectId = userSubjectId.split(",")[0]
                  state.subjectList.forEach((item: any) => {
                     // 判断是否存在声部编号
                     if (item.value === Number(tempSubjectId)) {
                        state.subjectId = Number(tempSubjectId)
                     }
                  })
               }
            }
         })
      }

      const handleGetList_gyt = async () => {
         loading.value = true
         const params = {
            page: state.page,
            rows: state.rows,
            musicSubject: state.subjectId === -1 ? null : state.subjectId,
            musicSheetCategoriesId: state.typeId === -1 ? state.levelId : state.typeId,
            keyword: state.queryStr,
            detailFlag: true,
            status: 1
         }
         await httpAjaxErrMsg(queryPage2_gyt, params).then(res => {
            loading.value = false
            if (res.code === 200) {
               const result = res.data || {}

               if (state.reshing) {
                  state.list = []
                  state.reshing = false
               }

               if (Array.isArray(result.rows)) {
                  result.rows.forEach((item: any) => {
                     item.name = item.musicSheetName
                  })
                  state.list = [...state.list, ...result.rows]
                  state.finshed = state.page >= result.pages
               } else {
                  state.finshed = true
               }
            }
         })
      }

      /** 酷乐秀机构数据查询 */
      const handleSearchList_klx = async () => {
         loading.value = true
         await httpAjaxErrMsg(queryTree_klx, {
            enable: true,
            page: 1,
            parentId: 0,
            rows: 10
         })
            .then(res => {
               loading.value = false
               if (res.code === 200) {
                  const result = res.data || []

                  const tempList: any = []
                  result.forEach((item: any) => {
                     if (item.musicNum > 0) {
                        const subjectCounts = item.subjectCounts ? true : false
                        const musicCounts = item.musicCounts ? true : false
                        const ensembleCounts = item.ensembleCounts ? true : false
                        const list: any = []
                        if (subjectCounts) {
                           list.push({
                              label: "基础云练",
                              value: "SUBJECT"
                           })
                        }
                        if (musicCounts) {
                           list.push({
                              label: "独奏云练",
                              value: "MUSIC"
                           })
                        }
                        if (ensembleCounts) {
                           list.push({
                              label: "合奏云练",
                              value: "ENSEMBLE"
                           })
                        }
                        tempList.push({
                           value: item.id,
                           label: item.name,
                           musicSheetCategoriesList: list
                        })
                     }
                  })
                  state.categoryList = tempList

                  setDefaultData()
               }
            })
            .catch(() => {
               state.finshed = true
            })
      }

      const handleGetSubject_klx = async () => {
         loading.value = true
         await httpAjaxErrMsg(querySubjectIds_klx, {
            queryType: "list",
            page: 1,
            rows: 100
         }).then(res => {
            loading.value = false
            if (res.code === 200) {
               const result = res.data?.rows || []
               state.subjectList = result.map((item: any) => {
                  return {
                     label: item.name,
                     value: item.id
                  }
               })

               state.subjectList.unshift({
                  label: "全部声部",
                  value: -1
               })

               const userSubjectId = userStoreHook.userInfo.subjectId
               if (userSubjectId) {
                  const tempSubjectId = userSubjectId.split(",")[0]
                  state.subjectList.forEach((item: any) => {
                     // 判断是否存在声部编号
                     if (item.value === Number(tempSubjectId)) {
                        state.subjectId = Number(tempSubjectId)
                     }
                  })
               }
            }
         })
      }

      const handleGetList_klx = async () => {
         if (!state.categoryId) return
         loading.value = true
         const params = {
            page: state.page,
            rows: state.rows,
            albumId: state.categoryId,
            subjectId: state.subjectId === -1 ? null : state.subjectId,
            subjectType: state.firstTreeId,
            level: state.levelId === -1 ? null : state.levelId,
            type: state.typeId === -1 ? null : state.typeId,
            keyword: state.queryStr
         }
         await httpAjaxErrMsg(queryPage2_klx, params).then(res => {
            loading.value = false
            if (res.code === 200) {
               const result = res.data || {}

               if (state.reshing) {
                  state.list = []
                  state.reshing = false
               }

               if (Array.isArray(result.rows)) {
                  result.rows.forEach((item: any) => {
                     item.name = item.musicSheetName
                  })
                  state.list = [...state.list, ...result.rows]
                  state.finshed = state.page >= result.totalPage
               } else {
                  state.finshed = true
               }
            }
         })
      }

      const handleSelectCondition_klx = async () => {
         if (!state.categoryId || !state.firstTreeId) return
         loading.value = true
         const params = {
            tenantAlbumId: state.categoryId,
            subjectType: state.firstTreeId
         }
         await httpAjaxErrMsg(selectCondition_klx, params).then(res => {
            loading.value = false
            if (res.code === 200) {
               const result = res.data || {}

               if (result.levelList && result.levelList.length > 0) {
                  state.levelList = result.levelList.map((item: any) => {
                     return {
                        label: item.value,
                        value: item.id
                     }
                  })

                  state.levelList.unshift({
                     label: "全部级别",
                     value: -1
                  })
                  state.levelId = -1
               }

               if (result.typeList && result.typeList.length > 0) {
                  state.typeList = result.typeList.map((item: any) => {
                     return {
                        label: item.value,
                        value: item.id
                     }
                  })

                  state.typeList.unshift({
                     label: "全部类型",
                     value: -1
                  })
                  state.typeId = -1
               }
            }
         })
      }

      /** 条件查询 */
      const handleAllSearchList = async () => {
         //  GYM,GYT,KLX 区分   查询搜索条件数据
         if (userStoreHook.roles === "GYM") {
            await handleSearchList_gym()
         } else if (userStoreHook.roles === "GYT") {
            await handleSearchList_gyt()
         } else if (userStoreHook.roles === "KLX") {
            await handleSearchList_klx()
         }
      }

      const handleAllGetSubject = async () => {
         //  GYM,GYT,KLX 区分   查询声部数据
         if (userStoreHook.roles === "GYM") {
            await handleGetSubject_gym()
         } else if (userStoreHook.roles === "GYT") {
            await handleGetSubject_gyt()
         } else if (userStoreHook.roles === "KLX") {
            await handleGetSubject_klx()
         }
      }

      const handleAllGetList = async () => {
         //  GYM,GYT,KLX 区分   查询声部数据·
         if (userStoreHook.roles === "GYM") {
            await handleGetList_gym()
         } else if (userStoreHook.roles === "GYT") {
            await handleGetList_gyt()
         } else if (userStoreHook.roles === "KLX") {
            await handleGetList_klx()
         }
      }

      /** 初始化数据 */
      const setDefaultData = async (type?: "first" | "category" | "level" | "type") => {
         if (userStoreHook.roles === "GYM") {
            initCategories_gym(type)
         } else if (userStoreHook.roles === "GYT") {
            initCategories_gyt(type)
         } else if (userStoreHook.roles === "KLX") {
            await initCategories_klx(type)
         }
      }

      const initCategories_gym = (type?: "first" | "category" | "level" | "type") => {
         if (storeData.value.length > 0 && !["category", "level", "type"].includes(type as any)) {
            let result: any = []
            if (type === "first" && state.firstTreeId) {
               result = storeData.value.find((item: any) => item.id === state.firstTreeId)?.sysMusicScoreCategoriesList || []
            } else {
               state.firstTreeId = storeData.value[0]?.id
               result = storeData.value[0]?.sysMusicScoreCategoriesList || []
            }
            state.categoryList = result.map((item: any) => {
               return {
                  label: item.name,
                  value: item.id,
                  sysMusicScoreCategoriesList: item.sysMusicScoreCategoriesList || []
               }
            })
         }
         if (state.categoryList.length > 0 && !["level", "type"].includes(type as any)) {
            let result: any = []
            if (type === "category" && state.categoryId) {
               result = state.categoryList.find((item: any) => item.value === state.categoryId)?.sysMusicScoreCategoriesList || []
            } else {
               state.categoryId = state.categoryList[0]?.value
               state.categoryName = state.categoryList[0]?.label
               result = state.categoryList[0]?.sysMusicScoreCategoriesList || []
            }
            state.levelList = result.map((item: any) => {
               return {
                  label: item.name,
                  value: item.id,
                  sysMusicScoreCategoriesList: item.sysMusicScoreCategoriesList || []
               }
            })
         }

         if (state.levelList.length > 0) {
            let result: any = []
            if (type === "level" && state.levelId) {
               result = state.levelList.find((item: any) => item.value === state.levelId)?.sysMusicScoreCategoriesList
            } else {
               state.levelId = state.levelList[0]?.value
               result = state.levelList[0]?.sysMusicScoreCategoriesList || []
            }

            state.typeList = result.map((item: any) => {
               return {
                  label: item.name,
                  value: item.id
               }
            })
            state.typeList.unshift({
               label: "全部",
               value: -1
            })
         }
      }

      const initCategories_gyt = (type?: "first" | "category" | "level" | "type") => {
         if (storeData.value.length > 0 && !["level", "type"].includes(type as any)) {
            let result: any = []
            if (type === "first" && state.firstTreeId) {
               result = storeData.value.find((item: any) => item.id === state.firstTreeId)?.musicSheetCategoriesList || []
            } else {
               state.firstTreeId = storeData.value[0]?.id
               result = storeData.value[0]?.musicSheetCategoriesList || []
            }

            state.levelList = result.map((item: any) => {
               return {
                  label: item.name,
                  value: item.id,
                  musicSheetCategoriesList: item.musicSheetCategoriesList || []
               }
            })
         }

         if (state.levelList.length > 0) {
            let result: any = []
            if (type === "level" && state.levelId) {
               result = state.levelList.find((item: any) => item.value === state.levelId)?.musicSheetCategoriesList
            } else {
               state.levelId = state.levelList[0]?.value
               result = state.levelList[0]?.musicSheetCategoriesList || []
            }

            state.typeList = result.map((item: any) => {
               return {
                  label: item.name,
                  value: item.id
               }
            })
            state.typeList.unshift({
               label: "全部",
               value: -1
            })
         }
      }

      const initCategories_klx = async (type?: "first" | "category" | "level" | "type") => {
         if (state.categoryList.length > 0 && !["level", "type", "first"].includes(type as any)) {
            let result: any = []
            if (type === "category" && state.categoryId) {
               result = state.categoryList.find((item: any) => item.value === state.categoryId)?.musicSheetCategoriesList || []
            } else {
               state.categoryId = state.categoryList[0]?.value
               state.categoryName = state.categoryList[0]?.label
               result = state.categoryList[0]?.musicSheetCategoriesList || []
            }
            storeData.value = result.map((item: any) => {
               return {
                  id: item.value,
                  name: item.label
               }
            })
         }

         if (storeData.value.length > 0 && !["level", "type"].includes(type as any)) {
            console.log(storeData.value.length, "storeData.value.length", type)
            if (type === "first" && state.firstTreeId) {
               await handleSelectCondition_klx()
            } else {
               //
               state.firstTreeId = storeData.value[0]?.id
               await handleSelectCondition_klx()
            }
         }
      }

      const __init = async () => {
         await handleAllSearchList()
         await handleAllGetSubject()
         await handleAllGetList()
         await toDetail()
         renderStaff()
      }

      __init()

      const handleResh = () => {
         if (loading.value || state.finshed) return
         state.page = state.page + 1
         handleAllGetList()
      }

      const handleGetList = async () => {
         state.listActive = 0
         state.showPlayer = false
         state.playState = "pause"
         document.querySelector(".musicList-container")?.scroll(0, 0)
         state.page = 1
         state.finshed = false
         state.reshing = true
         state.list = []
         await handleAllGetList()
      }

      const toDetail = async () => {
         const row: any = activeItem.value
         if (row.musicSheetType === "SINGLE") {
            loading.value = false
            return
         }
         console.log(row, "row")
         state.partNames = await getPartNames(row.xmlUrl)
         let partList = row.background || []
         partList = partList.filter((item: any) => !item.track?.toLocaleUpperCase()?.includes("COMMON"))
         partColumns.value = partList.map((item: any, index: number) => {
            const instrumentName = getInstrumentName(item.track)
            const xmlIndex = state.partNames.findIndex((name: any) => name === item.track)
            return {
               label: item.track + (instrumentName ? `(${instrumentName})` : ""),
               instrumentName: instrumentName,
               xmlIndex,
               value: index
            }
         })
         // 初始化数据
         const defaultShowStaff = partColumns.value[state.selectedPartIndex]
         console.log(defaultShowStaff, partList)
         state.selectedPartName = defaultShowStaff?.instrumentName
         state.partXmlIndex = defaultShowStaff?.xmlIndex

         console.log(partColumns.value, "partColumns partColumns")
      }

      const getPartNames = async (xmlUrl: string) => {
         const partNames: string[] = []
         try {
            const res: any = await axios.get(xmlUrl)
            const xml: any = new DOMParser().parseFromString(res, "text/xml")
            console.log(xml, "xmlxmlxmlxml")
            for (const item of xml.getElementsByTagName("part-name")) {
               if (item.textContent) {
                  partNames.push(item.textContent)
               }
            }
         } catch (error) {
            //
         }
         return partNames.filter((text: string) => text.toLocaleUpperCase() !== "COMMON") || []
      }

      // const musicIframeLoad = async () => {
      //    const iframeRef: any = document.getElementById("staffIframeRef")
      //    if (iframeRef && iframeRef.contentWindow?.renderXml) {
      //       staffLoading.value = true
      //       const res = await axios.get(activeItem.value.xmlUrl)
      //       const parseXmlInfo = getCustomInfo(res.data)
      //       const xml = formatXML(parseXmlInfo.parsedXML)
      //       const currentXml = onlyVisible(xml, state.selectedPartIndex)
      //       iframeRef.contentWindow.renderXml(currentXml, state.selectedPartIndex)
      //    }
      // }
      // const resetRender = async () => {
      //    const iframeRef: any = document.getElementById("staffIframeRef")
      //    if (iframeRef && iframeRef.contentWindow?.renderXml) {
      //       staffLoading.value = true
      //       const res = await axios.get(activeItem.value.xmlUrl)
      //       const parseXmlInfo = getCustomInfo(res.data)
      //       const xml = formatXML(parseXmlInfo.parsedXML)
      //       const currentXml = onlyVisible(xml, state.selectedPartIndex)
      //       iframeRef.contentWindow.renderXml(currentXml, state.selectedPartIndex)
      //    }
      // }
      const musicIframeLoad = async () => {
         const iframeRef: any = document.getElementById("staffIframeRef")
         if (iframeRef && iframeRef.contentWindow.renderXml) {
            staffLoading.value = true
            const res: any = await axios.get(activeItem.value.xmlUrl)
            const parseXmlInfo = getCustomInfo(res.data)
            const xml = formatXML(parseXmlInfo.parsedXML)
            if (activeItem.value.isComberRender) {
               iframeRef.contentWindow.renderXml(xml, state.partXmlIndex, activeItem.value.isComberRender)
            } else {
               const currentXml = onlyVisible(xml, state.partXmlIndex)
               iframeRef.contentWindow.renderXml(currentXml, state.partXmlIndex, activeItem.value.isComberRender)
            }
         }
      }
      const resetRender = async () => {
         const iframeRef: any = document.getElementById("staffIframeRef")
         if (iframeRef && iframeRef.contentWindow.renderXml) {
            staffLoading.value = true
            loading.value = true
            const res: any = await axios.get(activeItem.value.xmlUrl)
            const parseXmlInfo = getCustomInfo(res.data)
            const xml = formatXML(parseXmlInfo.parsedXML)
            if (activeItem.value.isComberRender) {
               iframeRef.contentWindow.renderXml(xml, state.partXmlIndex, activeItem.value.isComberRender)
            } else {
               const currentXml = onlyVisible(xml, state.partXmlIndex)
               iframeRef.contentWindow.renderXml(currentXml, 0, activeItem.value.isComberRender)
            }
         }
      }

      const renderStaff = async () => {
         try {
            // ${location.origin}${location.pathname}
            state.iframeSrc = `/osmd/index.html`
         } catch (error) {
            //
         }
      }

      /** 音频控制 */
      const handleChangeAudio = (type: "play" | "pause" | "pre" | "next") => {
         if (type === "play") {
            state.playState = "play"
         } else if (type === "pause") {
            state.playState = "pause"
         } else if (type === "pre") {
            if (state.list[state.listActive - 1]) {
               handlePlay(state.list[state.listActive - 1])
            }
         } else if (type === "next") {
            if (state.list[state.listActive + 1]) {
               handlePlay(state.list[state.listActive + 1])
            }
         }
      }

      /** 播放曲目 */
      const handlePlay = (item: any) => {
         const index = state.list.findIndex((_item: any) => _item.id === item.id)
         if (index > -1) {
            if (state.listActive === index) {
               state.playState = state.playState === "play" ? "pause" : "play"
            } else {
               state.playState = "play"
            }
            state.showPlayer = true
            state.listActive = index
         }
      }

      const showLoading = async (e: any) => {
         if (e.data?.api === "musicStaffRender") {
            staffLoading.value = e.data.loading
         }
      }

      onMounted(() => {
         const obv = new IntersectionObserver(entries => {
            if (entries[0].intersectionRatio > 0) {
               handleResh()
            }
         })
         obv.observe(spinRef.value)

         window.addEventListener("message", showLoading)
      })
      return () => (
         <NavContainer navs={navs}>
            <ElScrollbar class="elScrollbar">
               <div class={styles.cloudPractice}>
                  <div class={styles.leftContainer}>
                     <div class={styles.details}>
                        {storeData.value.length > 0 && (
                           <ElScrollbar class={styles.leftSection}>
                              {/* 基 础 云 练 */}
                              {storeData.value.map((item: any) => (
                                 <div
                                    class={[styles.leftSection_item, item.id === state.firstTreeId && styles.leftSection_item__active]}
                                    onClick={async () => {
                                       state.firstTreeId = item.id
                                       await setDefaultData("first")
                                       handleGetList()
                                    }}
                                 >
                                    {item.name}
                                 </div>
                              ))}
                           </ElScrollbar>
                        )}

                        <div class={[styles.musicList, "musicList-container"]}>
                           <div class={styles.searchHeader}>
                              {state.categoryList.length > 1 && (
                                 <div class={[styles.categorySection]}>
                                    <NPopselect
                                       options={state.categoryList}
                                       v-model:value={state.categoryId}
                                       onUpdate:value={async (val: any) => {
                                          const item = state.categoryList.find((item: any) => item.value === val)
                                          if (item) {
                                             state.categoryName = item.label
                                             state.categoryId = item.value
                                             await setDefaultData("category")
                                             handleGetList()
                                          }
                                       }}
                                       trigger="click"
                                       class={"PopSelect"}
                                    >
                                       <span class={styles.iconTagName}>{state.categoryName}</span>
                                    </NPopselect>
                                 </div>
                              )}

                              <div class={styles.searchMore}>
                                 <div class={styles.searchSection}>
                                    <Dictionary
                                       popperClass="classTypePopper"
                                       v-model={state.subjectId}
                                       height={42}
                                       options={state.subjectList}
                                       placeholder="全部声部"
                                       onChange={handleGetList}
                                    />
                                    {state.levelList.length ? (
                                       <Dictionary
                                          popperClass="classTypePopper"
                                          v-model={state.levelId}
                                          height={42}
                                          options={state.levelList}
                                          placeholder="级别"
                                          onChange={() => {
                                             setDefaultData("level")
                                             handleGetList()
                                          }}
                                       />
                                    ) : null}
                                    {state.typeList.length > 0 ? (
                                       <Dictionary
                                          popperClass="classTypePopper"
                                          v-model={state.typeId}
                                          height={42}
                                          options={state.typeList}
                                          propsOpt={{
                                             labelField: "name",
                                             valueField: "id"
                                          }}
                                          placeholder="分类"
                                          onChange={handleGetList}
                                       />
                                    ) : null}
                                 </div>
                                 <div
                                    class={[styles.btnSearch, state.searchStatus && styles.btnSearchActive]}
                                    onClick={() => (state.searchStatus = !state.searchStatus)}
                                 ></div>
                              </div>
                              {state.searchStatus && (
                                 <MyInput
                                    class="queryCp"
                                    v-model={state.queryStr}
                                    height={42}
                                    placeholder="请输入曲目关键词"
                                    onKeyup={(e: any) => {
                                       if (e.code === "Enter" || e.key === "Enter") {
                                          handleGetList()
                                       }
                                    }}
                                    onHandleQuery={handleGetList}
                                    clearable
                                 />
                              )}
                           </div>

                           <div class={[styles.wrapList, !state.list.length && !loading.value && styles.wrapListEmpty]}>
                              {state.list.map((item: any, index: number) => (
                                 <div
                                    class={[styles.item, index === state.listActive && styles.active]}
                                    onClick={async () => {
                                       state.listActive = index
                                       await toDetail()
                                       resetRender()
                                    }}
                                 >
                                    <div class={styles.itemInfo}>
                                       <div class={styles.img}>
                                          <NImage
                                             lazy
                                             objectFit="cover"
                                             previewDisabled={true}
                                             src={icon_default}
                                             onLoad={(e: any) => {
                                                ;(e.target as any).dataset.loaded = "true"
                                             }}
                                          />
                                          {/* <PlayLoading
                                       class={[
                                         data.listActive === index &&
                                         data.playState === 'play'
                                           ? ''
                                           : styles.showPlayLoading
                                       ]}
                                       /> */}
                                       </div>
                                       <div class={styles.title}>
                                          <div class={styles.titleName}>
                                             <ellipsisScroll title={item.name} />
                                          </div>
                                       </div>
                                    </div>
                                    <div class={styles.btnSection}>
                                       <div
                                          class={styles.btn}
                                          onClick={(e: any) => {
                                             e.stopPropagation()
                                             handlePlay(item)
                                             if (state.listActive === index && state.playState === "play") {
                                                musicIframeLoad()
                                             }
                                          }}
                                       >
                                          {state.listActive === index && (
                                             <>
                                                {state.playState === "pause" ? "播放" : "暂停"}
                                                <img src={state.playState === "pause" ? iconBtnPlay : (iconBtnPause as any)} />
                                             </>
                                          )}
                                          {state.listActive !== index && (
                                             <>
                                                播放
                                                <img src={iconBtnPlay as any} />
                                             </>
                                          )}
                                       </div>
                                    </div>
                                 </div>
                              ))}

                              {!state.list.length && !loading.value && (
                                 <ElEmpty class={styles.empty} image={require("@/img/layout/empty.png")} description="暂无结果" />
                              )}

                              <div ref={spinRef} class={[styles.loadingWrap, state.finshed && styles.showLoading]}>
                                 <NSpin show={true} stroke="#FF531C"></NSpin>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class={styles.rightContainer}>
                     {/* <i class={styles.leftArrow}></i> */}

                     <NSpin show={staffLoading.value} stroke="#FF531C">
                        <div class={styles.musicName}>{activeItem.value.name}</div>
                        <div class={[styles.staffImgs, !loading.value && !activeItem.value?.id && styles.staffImgsEmpty]}>
                           {state.iframeSrc && activeItem.value?.id && (
                              <iframe
                                 id="staffIframeRef"
                                 style={{
                                    // opacity: loading.value ? 0 : 1,
                                    width: "100%",
                                    height: "100%"
                                 }}
                                 src={state.iframeSrc}
                                 onLoad={musicIframeLoad}
                              ></iframe>
                           )}

                           {!loading.value && !activeItem.value?.id && (
                              <ElEmpty class={styles.empty} image={require("@/img/layout/empty.png")} description="暂无结果" />
                           )}
                        </div>
                     </NSpin>

                     <img
                        style={{
                           display: activeItem.value?.id ? "" : "none"
                        }}
                        class={[styles.goBtn]}
                        src={btnSubmit as any}
                        onClick={() => goToCloud(activeItem.value.id)}
                     />

                     <div
                        class={styles.rightBtns}
                        style={{ display: activeItem.value.id && activeItem.value.musicSheetType === "CONCERT" ? "" : "none" }}
                     >
                        <NPopselect
                           options={partColumns.value}
                           trigger="click"
                           v-model:value={state.selectedPartIndex}
                           scrollable
                           onUpdate:value={async (value: any) => {
                              console.log(value, "value")
                              const item = partColumns.value.find((item: any) => item.value === value)

                              state.selectedPartIndex = value
                              state.selectedPartName = item.instrumentName
                              state.partXmlIndex = item.xmlIndex
                              nextTick(() => {
                                 resetRender()
                              })
                           }}
                           class={"PopSelect"}
                        >
                           <img class={styles.transBtn} src={iconTransfer as any} />
                        </NPopselect>
                     </div>
                  </div>
               </div>
            </ElScrollbar>

            {state.list.length !== 0 && activeItem.value.audioFileUrl && (
               <PlayItem
                  show={state.showPlayer}
                  playState={state.playState}
                  songPrevNextStatus={songPrevNextStatus.value}
                  item={activeItem.value}
                  onChange={value => handleChangeAudio(value)}
                  onShow={(status: boolean) => {
                     state.showPlayer = status
                  }}
               />
            )}
         </NavContainer>
      )
   }
})