<template>
  <div class="news-box">
    <btn-tabs class="tabs-box" :data="tabsData"></btn-tabs>
    <ul class="content-max-width">
      <template v-for="(item, index) in list">
        <li :key="index">
          <item :data="item"></item>
        </li>
      </template>
    </ul>
    <div class="pagination">
      <el-pagination
        :page-size="pages.page_size"
        layout="prev, pager, next, jumper"
        :total="pages.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import item from './components/listItem'
import btnTabs from '@/components/tabs/btnTabs'
import action from '@action'
export default {
  components: {
    item,
    btnTabs
  },
  data() {
    return {
      articleClassify: this.$store.state.classify,
      tabsData: {
        options: ['新闻动态', '活动公告']
      },
      list: [],
      pages: {}
    }    
  },
  created() {
  },
  mounted() {
    this.newsList()
  },
  methods: {
    newsList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (!Object.keys(this.$store.state.classify).length) {
        setTimeout(() => {
          this.articleClassify = this.$store.state.classify
          this.newsList()
        }, 2000)
      } else {
        const findId = this.articleClassify.children.find(item => {
          return item.display_name === '新闻动态'
        })
        console.log(findId.id)
        action.articleAction.getArticle({ category_id: findId.id }).then(res => {
          this.list = res.data.list
          this.pages = res.data.pages
          loading.close()
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content-max-width{
  width: 1112px;
  margin: 0 auto;
}
.news-box{
  .tabs-box{
    padding: 24px 0 30px;
  }
}
.pagination{
  padding: 24px 0;
  display: flex;
  justify-content: center;
}
</style>
