import { defineComponent, ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import styles from './index.module.less'
import { NSpin } from 'naive-ui'
import event from './modal/event'

export default defineComponent({
  name: 'imGroup',
  setup() {
    // const { nickname, avatar, imToken } = userStore?.info || {}
    const userStore = useUserStore()
    const { nickname, avatar, imToken, imUserId, jobType } = userStore?.info || {}
    const isLoading = ref(false)
    const iframeRef = ref()
    const isLoaded = ref(false)
    const origin = /(localhost|192)/.test(location.host)
      ? 'https://test.lexiaoya.cn'
      : /online.lexiaoya.cn/.test(location.href)
      ? 'https://kt.colexiu.com'
      : location.origin
    const src = `${origin}/classroom-im/?platform=orchestra&userID=${imUserId}&Authorization=${userStore.getToken}`

    event.on('selectImChatPersion', (params?: any) => {
      console.log(params, 'params')
      iframeRef.value.contentWindow.postMessage(params, '*')
    })

    return () => (
      <div class={styles.imGroupContainer}>
        <NSpin show={!isLoaded.value}>
          <iframe
            ref={iframeRef}
            onLoad={() => {
              isLoaded.value = true
            }}
            class={[styles.container]}
            frameborder="0"
            src={src}
          ></iframe>
        </NSpin>
      </div>
    )
  }
})
