<template>
  <div id="partyStudy" class="app">
    <van-sticky :offset-top="0">
      <van-nav-bar :title="dataInfo.name" left-arrow @click-left="goBack" />
    </van-sticky>
    <van-tabs v-model="active">
      <van-tab title="理论创新">
        <van-pull-refresh
          v-model="isLoadingTextList"
          @refresh="onRefreshTextList"
        >
          <van-list
            v-if="textList.length"
            v-model="loadingTextList"
            :finished="finishedTextList"
            offset="10"
            loading-text="加载中"
            finished-text="没有更多了"
            @load="
              () => getTextList({ lastId: textList[textList.length - 1].id })
            "
          >
            <div
              v-for="item in textList"
              :key="'text' + item.id"
              @click="() => toUrl(item)"
            >
              <keep-alive>
                <component :is="item.assemblyName" :item="item"></component>
              </keep-alive>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="视频学习">
        <van-pull-refresh
          v-model="isLoadingVideoList"
          @refresh="onRefreshVideoList"
        >
          <van-list
            v-if="videoList.length"
            v-model="loadingVideoList"
            :finished="finishedVideoList"
            offset="10"
            loading-text="加载中"
            finished-text="没有更多了"
            @load="
              () => getVideoList({ lastId: videoList[videoList.length - 1].id })
            "
          >
            <div
              v-for="item in videoList"
              :key="'video' + item.id"
              @click="() => toUrl(item)"
            >
              <keep-alive>
                <component :is="item.assemblyName" :item="item"></component>
              </keep-alive>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="有声读物">
        <van-pull-refresh
          v-model="isLoadingAudioList"
          @refresh="onRefreshAudiolList"
        >
          <van-list
            v-if="audioList.length"
            v-model="loadingAudioList"
            :finished="finishedAudioList"
            offset="10"
            loading-text="加载中"
            finished-text="没有更多了"
            @load="
              () => getAudioList({ lastId: audioList[audioList.length - 1].id })
            "
          >
            <div
              v-for="item in audioList"
              :key="'audio' + item.id"
              @click="() => toUrl(item)"
            >
              <keep-alive>
                <component :is="item.assemblyName" :item="item"></component>
              </keep-alive>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  PullRefresh as vanPullRefresh,
  NavBar as vanNavBar,
  Sticky as vanSticky,
  Tabs as vanTabs,
  List as vanList,
  Tab as vanTab
} from "vant";
import "vant/lib/pull-refresh/style";
import "vant/lib/nav-bar/style";
import "vant/lib/sticky/style";
import "vant/lib/tabs/style";
import "vant/lib/list/style";
import "vant/lib/tab/style";
import listItemBig from "../../components/ListItem/ListItemBig";
import listItem from "../../components/ListItem/ListItem";
import { currentUrlToParams } from "@/utils/common.js";
import { articleList } from "@/api/article/article.js";
const baseData = {
  video: 8,
  audio: 13,
  text: 14
};
export default {
  name: "app",
  data: function() {
    return {
      isLoadingTextList: false,
      loadingTextList: false,
      finishedTextList: false,
      isLoadingVideoList: false,
      loadingVideoList: false,
      isLoadingAudioList: false,
      loadingAudioList: false,
      finishedAudioList: false,
      finishedVideoList: false,
      active: "理论创新",
      dataInfo: {},
      textList: [],
      videoList: [],
      audioList: []
    };
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    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);
    },
    onRefreshTextList() {
      this.textList = [];
      this.isLoadingTextList = true;
      this.finishedTextList = false;
      this.getTextList();
    },
    onRefreshVideoList() {
      this.videoList = [];
      this.isLoadingVideoList = true;
      this.finishedVideoList = false;
      this.getVideoList();
    },
    onRefreshAudiolList() {
      this.audioList = [];
      this.isLoadingAudioList = true;
      this.finishedAudioList = false;
      this.getAudioList();
    },
    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;
    },
    getVideoList(params) {
      articleList(params || {}, baseData.video).then(res => {
        const list = this.newList(res || []);
        this.videoList = [...this.videoList, ...list];
        this.isLoadingVideoList = false;
        this.loadingVideoList = false;
        if ((res && res.length === 0) || !res) this.finishedVideoList = true;
      });
    },
    getAudioList(params) {
      articleList(params || {}, baseData.audio).then(res => {
        const list = this.newList(res || []);
        this.audioList = [...this.audioList, ...list];
        this.isLoadingAudioList = false;
        this.loadingAudioList = false;
        if ((res && res.length === 0) || !res) this.finishedAudioList = true;
      });
    },
    getTextList(params) {
      articleList(params || {}, baseData.text).then(res => {
        console.log(res);
        const list = this.newList(res || []);
        this.textList = [...this.textList, ...list];
        this.isLoadingTextList = false;
        this.loadingTextList = false;
        if ((res && res.length === 0) || !res) this.finishedTextList = true;
      });
    }
  },
  mounted() {
    this.dataInfo = currentUrlToParams();
    this.getAudioList();
    this.getTextList();
    this.getVideoList();
  },
  beforeDestroy: function() {},
  components: {
    vanPullRefresh,
    listItemBig,
    vanNavBar,
    vanSticky,
    listItem,
    vanList,
    vanTabs,
    vanTab
  }
};
</script>
<style lang="scss">
.app {
}
</style>
