import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import { useUserStore } from '/src/store/modules/users';
import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
import { iframeDislableKeyboard } from '/src/utils';

export default defineComponent({
  name: 'song-modal',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    /** 从哪里使用 */
    from: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const userStore = useUserStore();
    const iframeRef = ref();
    const isLoaded = ref(false);
    let src = `${vaildMusicScoreUrl()}/instrument?v=${+new Date()}&modelType=practise&id=${
      props.item.content
    }&Authorization=${userStore.getToken}&platform=pc&zoom=0.8`;
    if (props.item.instrumentId) {
      src += '&instrumentId=' + props.item.instrumentId;
    }
    return () => (
      <div class={styles.musicScore}>
        <iframe
          ref={iframeRef}
          onLoad={(val: any) => {
            // emit('setIframe', iframeRef.value);
            isLoaded.value = true;
            iframeDislableKeyboard(val.target);
          }}
          class={[styles.container, 'musicIframe']}
          frameborder="0"
          src={src}></iframe>
      </div>
    );
  }
});