import { defineComponent, ref } from 'vue';
import { useUserStore } from '/src/store/modules/users';
import styles from './index.module.less';
import { NSpin } from 'naive-ui';

export default defineComponent({
  name: 'imGroup',
  setup() {
    const userStore = useUserStore();
    const isLoading = ref(false);
    const iframeRef = ref();
    const isLoaded = ref(false);
    // const renderError = ref(false);
    // const renderSuccess = ref(false);
    const origin = /(localhost|192)/.test(location.host)
      ? 'https://test.kt.colexiu.com'
      : /online.lexiaoya.cn/.test(location.href)
      ? 'https://kt.colexiu.com'
      : location.origin;
    const src = `${origin}/classroom-im/?v=${+new Date()}&userID=${
      userStore.getUserInfo.imUserId
    }&Authorization=${userStore.getToken}&t=${+new Date()}`;

    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>
    );
  }
});