Vue.component("webview-relation", {
  template: `
        <section class="webview-relation">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <transition-group name="webview-relation">
                            <div class="webview-relation-box"
                                v-for="(item, index) in relations"
                                :key="item.id"
                                :class="{'webview-relation-box--first webview-relation-box--first--animation' : index === 0}">
                                <span class="webview-relation-box--time">{{ item.release_date_hour }}</span>
                                <div class="webview-relation-box--text" v-html="item.content"></div>
                            </div>
                        </transition-group>
                    </div>
                </div>
            </div>
        </section>
        `,
  data() {
    return {
      relations: window.__timelineData.items
    };
  },
  methods: {
    getLastItemUrl() {
      const host = window.location.origin;
      const _IDArticle = window.__newsData.id;

      return `http://rc.tvp.info/shared/details_obj.php?object_id=${_IDArticle}&template=json/timeline.html&last=${this.relations[0].release_date_long}`;

    },
    uploadData() {
      const url = this.getLastItemUrl();

      axios.get(url, {}, {
        withCredentials: true,
        auth: {
          username: "tvprc",
          password: "T20V18Prc+V0dQQ"
        },
        headers: {
          'Content-Type': 'application/json',
        }
      })
        .then(res => {
          console.log(res.data)
          if (res.data.items.length > 0) {
            this.addRelation(res.data.items[0]);
          }
          this.refreshData();
      })
    },
    addRelation(relation) {
      return this.relations.splice(0, 0, relation);
    },
    loadTwitter() {
      return twttr.widgets.load();
    },
    refreshData() {
      return setTimeout(this.uploadData, 5000);
    }
  },
  mounted() {
    this.refreshData();
    this.loadTwitter();
  }
});