<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
      v-if="newsList.length"
      v-model="loading"
      :finished="finished"
      offset="10"
      loading-text="加载中"
      finished-text="没有更多了"
      @load="onload"
    >
      <van-swipe-cell v-for="item in newsList" :key="item.id" :title="item">
        <div @click="() => toUrl(item)">
          <keep-alive>
            <component :is="item.assemblyName" :item="item"></component>
          </keep-alive>
        </div>
      </van-swipe-cell>
    </van-list>
    <van-empty v-else description="内容没找到" />
  </van-pull-refresh>
</template>

<script>
import { articleList } from "@/api/article/article.js";
import listItemBig from "../ListItem/ListItemBig";
import listItem from "../ListItem/ListItem";
import {
  PullRefresh as vanPullRefresh,
  SwipeCell as vanSwipeCell,
  Empty as vanEmpty,
  List as vanList
} from "vant";
import "vant/lib/pull-refresh/style";
import "vant/lib/swipe-cell/style";
import "vant/lib/empty/style";
import "vant/lib/list/style";
let date = new Date(new Date() - 2000);
export default {
  name: "app",
  props: {
    comId: {
      type: Number,
      default: -1
    }
  },
  data: function() {
    return {
      active: "partyAffairs",
      newsList: [],
      loading: true,
      finished: false,
      isLoading: false,
      isGeting: false
    };
  },
  methods: {
    onRefresh() {
      if (this.isGeting) return;
      this.newsList = [];
      this.loading = true;
      this.onload();
    },
    onload() {
      if (this.isGeting) return;
      let lastId = this.newsList[this.newsList.length - 1];
      let params = {};
      lastId && (params.lastId = lastId.id);
      this.createData(params);
    },
    toUrl(item) {
      let url = item.videoFlag === "V" ? "videoDetail" : "newsDetail";
      url += ".html?id=" + item.id;
      window.parent
        ? (window.parent.location.href = url)
        : (window.location.href = url);
    },
    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,
        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;
    },
    createData(options) {
      this.isGeting = true;
      let newDate = new Date();
      if (newDate - date <= 200) {
        this.isLoading = false;
        this.loading = false;
        this.isGeting = false;
        return;
      }
      date = newDate;
      articleList(options, this.comId).then(res => {
        const list = this.newList(res || []);
        this.newsList = [...this.newsList, ...list];
        this.isLoading = false;
        this.loading = false;
        this.isGeting = false;
      });
    }
  },
  computed: {},
  mounted() {
    this.createData({});
  },
  beforeDestroy: function() {},
  components: {
    vanList,
    vanSwipeCell,
    listItem,
    listItemBig,
    vanEmpty,
    vanPullRefresh
  }
};
</script>
<style lang="scss"></style>
