
<template>
  <div class="article-container">
    <div class="article-head">
      <tab :idx="1" />
    </div>
    <articleCardListNew
      v-for="item in articleCardData.articles"
      :key="item.id"
      :card="item"
    />
    <div class="load-more-button">
      <buttonLoadMore
        :type-index="0"
        :params="articleCardData.params"
        :api-url="articleCardData.apiUrl"
        :is-atuo-request="articleCardData.isAtuoRequest"
        @buttonLoadMore="buttonLoadMore"
      />
    </div>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
// import articleCard from '@/components/articleCard/index.vue'
import tab from '@/components/article_page/tab'
import articleCardListNew from '@/components/article_card_list_new/index.vue'
import buttonLoadMore from '@/components/button_load_more/index.vue'

export default {
  components: {
    // articleCard,
    articleCardListNew,
    buttonLoadMore,
    tab
  },
  transition: 'page',
  props: {
    idx: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      articleCardData: {
        title: this.$t('home.articleNavFollowTitle'),
        params: {
          channel: 1,
          filter: null,
          extra: 'short_content'
        },
        apiUrl: 'homeTimeRanking',
        articles: [],
        isAtuoRequest: true
      }
    }
  },
  methods: {
    // 点击更多按钮返回的数据
    buttonLoadMore(res) {
      // console.log(res)
      if (res.data && res.data.list && res.data.list.length !== 0) {
        this.articleCardData.articles = this.articleCardData.articles.concat(res.data.list)
      }
    },
    handleCheckedFilterChanged() {
      this.onCheckedFilterChanged()
    },
    onCheckedFilterChanged: debounce(async function () {
      // This page drives me crazy!!!

      this.articleCardData.params.filter = this.filter

      try {
        const res = await this.$API.getBackendData(
          { url: this.articleCardData.apiUrl, params: this.articleCardData.params },
          false
        )
        if (res.code !== 0) console.error(res.message)
        else if (res.data && res.data.list && res.data.list.length !== 0) {
          this.articleCardData.articles = res.data.list
        }
      } catch (error) {
        console.error(error)
      }
    }, 500)
  }
}
</script>


<style lang="less" scoped>
.article-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
}
</style>