import { defineComponent } from 'vue'
import MusicScore from '/src/components/music-score/index-test'
import { onlyVisible } from '/src/pages/detail/helpers'
import request from 'umi-request'

// @ts-ignore
const modules = import.meta.glob('/src/xml-test/*.xml?raw')
console.log(modules)
export default defineComponent({
  name: 'RenderTest',
  data() {
    return {
      scores: [] as string[]
    }
  },
  async mounted() {
    const scores = [] as string[]
    for (const xml of Object.keys(modules)) {
      const res = await request(xml)
      scores.push(onlyVisible(res, 0))
    }
    console.log(scores)
    this.scores = scores
  },
  render() {
    return (
      this.scores.map((score, i) => (
        <MusicScore
          key={i}
          score={score}
          opotions={{
            drawMetronomeMarks: true,
            drawTitle: true,
          }}
          EngravingRules={{
            DYContainerId: 'dy-container1',
            DYSVGContainerId: 'dy-svg-container1',
          }}
        />
      ))
    )
  }
})
