<template>
  <div id="integral" class="app">
    <van-sticky :offset-top="0">
      <van-nav-bar
        left-text="返回"
        left-arrow
        @click-left="goBack"
        title="历史记录"
      />
    </van-sticky>
    <div
      v-for="item in readList"
      :key="'read' + item.id"
      @click="() => toUrl(item)"
    >
      <keep-alive>
        <component :is="item.assemblyName" :item="item"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { getReadHistory } from "@/api/article/article.js";

import listItemBig from "../../components/ListItem/ListItemBig";
import listItem from "../../components/ListItem/ListItem";
import { NavBar as vanNavBar, Sticky as vanSticky } from "vant";
import "vant/lib/nav-bar/style";
import "vant/lib/sticky/style";
export default {
  name: "app",
  data: function() {
    return {
      readList: []
    };
  },
  methods: {
    toUrl(item) {
      let url =
        item.videoFlag === "V"
          ? "videoDetail"
          : item.videoFlag === "A"
          ? "newsDetail"
          : "audioDetail";
      url += ".html?id=" + item.id;
      window.parent
        ? (window.parent.location.href = url)
        : (window.location.href = url);
    },
    goBack() {
      history.go(-1);
    },
    formData(objData) {
      let video = Math.random() > 0.5 ? "listItemBig" : "listItem";
      if (objData.videoFlag === "V") {
        video = "listItemBig";
      }
      return {
        id: objData.id,
        url: objData.imgUrl,
        title: objData.title,
        orisource: objData.origSource,
        releaseTime: objData.publishTime,
        progress: objData.progress,
        read: objData.read,
        assemblyName: video,
        videoFlag: objData.videoFlag,
        subTitle: objData.normalizedContent
      };
    },
    newList(list) {
      const viewList = [];
      list.map(v => {
        viewList.push(this.formData(v));
      });
      return viewList;
    },
    getRead() {
      getReadHistory().then(res => {
        const list = this.newList(res || []);
        this.readList = [...this.readList, ...list];
        this.isLoadingReadList = false;
        this.loadingReadList = false;
        if ((res && res.length === 0) || !res) this.finishedReadList = true;
      });
    }
  },
  mounted() {
    this.getRead();
  },
  beforeDestroy: function() {},
  components: { listItemBig, listItem, vanNavBar, vanSticky }
};
</script>
<style lang="scss">
.app {
}
</style>
