import { defineComponent, ref, watch } 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: () => ({})
    },
    activeStatus: {
      type: Boolean,
      default: false
    }
  },
  emits: ['setIframe'],
  setup(props, { emit }) {
    const userStore = useUserStore();
    const iframeRef = ref();
    const isLoaded = ref(false);

    let src = `${vaildMusicScoreUrl()}/instrument?v=${new Date().getTime()}/#/view-figner?Authorization=${
      userStore.getToken
    }&code=${props.item.content}&platform=pc&type=listenMode&linkSource=class`;
    if (/(localhost)/.test(location.host)) {
      src = `http://localhost:3000/instrument.html#/view-figner?Authorization=${userStore.getToken}&code=${props.item.content}&platform=pc&type=listenMode&linkSource=class`;
    }
    // if (props.item.dataJson) {
    //   src += '&dataJson=' + props.item.dataJson;
    // }

    console.log(src, 'src');
    watch(
      () => props.activeStatus,
      () => {
        if (!props.activeStatus) {
          iframeRef.value?.contentWindow?.postMessage(
            {
              api: 'setPlayState',
              data: {
                code: props.item.content
              }
            },
            '*'
          );
        }
      }
    );
    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>
    );
  }
});
