<template>
  <div id="AppDetail" class="app">
    <component
      v-if="id"
      :is="detailData.videoFlag"
      :item="detailData"
      :id="id"
    ></component>
  </div>
</template>

<script>
import A from "@/components/Detail/news.vue";
import V from "@/components/Detail/video.vue";
import U from "@/components/Detail/audio.vue";
import { currentUrlToParams, setToken } from "@/utils/common.js";
import { articleDetail } from "@/api/article/article.js";

export default {
  name: "app",
  data: function() {
    return {
      detailData: {},
      id: undefined
    };
  },
  methods: {},
  mounted() {
    this.$pageParams = currentUrlToParams();
    this.$pageParams.token && setToken(this.$pageParams.token);
    window.Progress = function() {
      return this.progress + "";
    };
    articleDetail(this.$pageParams.id, true).then(res => {
      this.detailData = res || {};
      this.id = this.$pageParams.id;
    });
  },
  beforeDestroy: function() {},
  components: { A, V, U }
};
</script>
<style lang="scss">
html,
body {
  height: auto !important;
  overflow: auto !important;
}
</style>
