import { defineComponent, ref, nextTick } from 'vue'
import styles from './musicScore.module.less'
import qs from 'query-string'

export default defineComponent({
  name: 'musicScore',
  props: {
    music: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['setIframe'],
  setup(props, { emit }) {
    const iframeRef = ref()
    const Authorization = sessionStorage.getItem('Authorization') || ''
    const origin = /(localhost|192)/.test(location.host)
      ? 'https://ponline.colexiu.com'//'http://192.168.3.114:3000'
      : location.origin
    const query = qs.stringify({
      id: props.music.content,
      modelType: 'practice',
      headerHeight: 32,
      Authorization: Authorization
    })
    let src = `${origin}/orchestra-music-score/?` + query
    console.log('src', src)
    return () => (
      <div class={styles.musicScore}>
        <iframe
          ref={iframeRef}
          onLoad={() => {
            emit('setIframe', iframeRef.value)
          }}
          class={[styles.container, 'musicIframe']}
          frameborder="0"
          src={src}
        ></iframe>
      </div>
    )
  }
})
