<!--
 * @Author: walker.liu
 * @Date: 2022-06-06 16:42:28
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
-->
<template>
  <chart-box :title="$t('analysis.TwitterSummary')" :hasHeader="false">
    <a
      v-if="url"
      class="twitter-timeline narrow-scrollbar"
      theme="dark"
      data-chrome="noheader nofooter transparent"
      data-height="314"
      data-aria-polite="assertive"
      :href="url"
      id="twitter-iframe"
    ></a>
    <div v-else-if="loading" class="loading-box">
      <t-loading :text="$t('Search.Loading')" size="26px"></t-loading>
    </div>
    <table-empty
      v-else
      class="empty-twitter"
      childTop="70px"
      msg="No Twitter Info"
      style="height: 314px"
    ></table-empty>
  </chart-box>
</template>
<script setup lang="tsx">
import ChartBox from './ChartBox.vue';
const props = defineProps({
  token: String,
  url: String,
});
const loading = ref(true);
watch(
  () => props.url,
  (v) => {
    if (v) {
      loading.value = false;
      // 接收twitter链接
      changeTwitter(v);
    }
  }
);
watch(
  () => props.token,
  (v) => {
    loading.value = true;
    setTimeout(() => {
      if (!props.url) {
        loading.value = false;
      }
    }, 3000);
  }
);
onMounted(() => {
  setTimeout(() => {
    if (!props.url) {
      loading.value = false;
    }
  }, 5000);
});
const changeTwitter = (url) => {
  // twitter_url.value = url;
  // window.__twttr.widgets.init = false;
  // window.__twttr.widgets.loaded = false;
  // window.twttr.widgets.load();
  let script: any = document.getElementById('twitter-script');
  if (script) {
    script.remove();
    let win: any = window;
    win.__twttr && (win.__twttr.widgets.init = false);
    win.__twttr && (win.__twttr.widgets.loaded = false);
    // window.twttr.widgets.load();
  }
  let timestamp = new Date().getTime();
  getScript('/widgets.js?t=' + timestamp).then(() => {
    let iframeBox = document.getElementById('twitter-iframe');
    // 优化代码 用户频繁点击一直执行删除推文（解决页面嵌入多个推文）
    while (iframeBox.lastChild) {
      iframeBox.removeChild(iframeBox.lastChild);
    }
    let element = document.createElement('a');
    element.setAttribute('href', url);
    element.setAttribute('class', 'twitter-timeline narrow-scrollbar');
    element.setAttribute('theme', 'dark');
    element.setAttribute('data-chrome', 'noheader nofooter transparent');
    element.setAttribute('data-height', '314');
    element.setAttribute('data-width', '348px');
    element.setAttribute('data-aria-polite', 'assertive');
    iframeBox?.appendChild(element);
  });
};
const getScript = (path) => {
  return new Promise((resolve, reject) => {
    let head = document.getElementsByTagName('head')[0];
    let script: any = document.createElement('script');
    script.src = path;
    script.type = 'text/javascript';
    script.id = 'twitter-script';
    head.appendChild(script);
    script.onload = script.onreadystatechange = function () {
      /*判断是否加载成功*/
      if (
        !this.readyState ||
        this.readyState === 'loaded' ||
        this.readyState === 'complete'
      ) {
        script.onload = script.onreadystatechange = null;
        return resolve;
      } else {
        return reject;
      }
    };
  });
};
// const socialInfo = computed(() => store.getters['token/getSocialInfo'](props.token));
</script>
<style lang="less" scoped>
@import '@/style/flex.less';
.empty-twitter {
  height: 312px;
}
.loading-box {
  height: 314px;
  .dja();
}
</style>
