import { defineComponent, onMounted, ref } from "vue"
import styles from "./index.module.less"
import { audioData, changeCombineAudio } from "/src/view/audio-list"
import openImg from "./imgs/open.png"
import lockImg from "./imgs/lock.png"
import state from "/src/state"

export default defineComponent({
   name: "combineAudio",
   setup(props, { emit }) {
      const elementsData = ref<{ index: number; top: number; left: number }[]>([])
      onMounted(() => {
         const parent = document.querySelector("#osmdCanvasPage1")
         const elements = document.querySelectorAll("g[data-trackIdx]")
         const combineMusicsIndexs = Object.keys(audioData.combineMusics)
         elements.forEach(element => {
            const dataTrackIdx = element.getAttribute("data-trackIdx")
            // 当有 dataTrackIdx 并且有原音的时候 显示
            if (dataTrackIdx && combineMusicsIndexs.includes(dataTrackIdx)) {
               const elementRect = element.getBoundingClientRect()
               const height = elementRect.height
               let top = elementRect.top + height / 2 - 11
               let left = elementRect.left - 22 - 10
               elementsData.value.push({
                  index: parseInt(dataTrackIdx),
                  top: top,
                  left: left
               })
            }
         })
      })
      return () => (
         <>
            <div class={[styles.combineAudio, state.playState === "play" && styles.play]}>
               {elementsData.value.map(item => {
                  return (
                     <img
                        class={styles.combineAudioImg}
                        onClick={() => {
                           changeCombineAudio(item.index)
                        }}
                        style={{
                           top: item.top + "px",
                           left: item.left + "px"
                        }}
                        src={audioData.combineIndex === item.index ? openImg : lockImg}
                     />
                  )
               })}
            </div>
         </>
      )
   }
})