import { defineComponent } from 'vue'
import { useUserStore } from '@/store/modules/user'

export default defineComponent({
  name: 'musicPreView',
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    // const userStore = useUserStore()
    // const token = userStore.getToken
    // const prefix = /(localhost|192)/.test(location.host)
    //   ? 'https://ponline.colexiu.com'
    //   : location.origin
    // const src =
    //   prefix +
    //   `/orchestra-music-score/?_t=${Date.now()}&id=${
    //     props.item.id
    //   }&modelType=practice&modeType=json&Authorization=${token}`

    const userStore = useUserStore()
    const token = userStore.getToken
    const apiUrls = {
      dev: 'https://dev.kt.colexiu.com',
      test: 'https://test.lexiaoya.cn',
      online: 'https://mec.colexiu.com'
    }

    const environment = location.origin.includes('//dev')
      ? 'dev'
      : location.origin.includes('//test')
      ? 'test'
      : location.origin.includes('//mec.colexiu')
      ? 'online'
      : 'dev'
    const apiUrl = apiUrls[environment]
    // const prefix = /(localhost|192)/.test(location.host) ? 'http://dev.resource.colexiu.com/' : location.origin
    const prefix = /(localhost|192)/.test(location.host) ? 'https://dev.kt.colexiu.com/' : apiUrl
    let src =
      prefix +
      `/instrument/?_t=${Date.now()}&id=${
        props.item.id
      }&modelType=practise&modeType=json&Authorization=${token}&isCbs=true`
    return () => (
      <div>
        <iframe width={'667px'} height={'375px'} frameborder="0" src={src}></iframe>
      </div>
    )
  }
})
