<template>
  <div class="news-box">
    <haedBanner></haedBanner>
    <!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
    <btn-tabs class="tabs-box content-max-width" @tabsChange='tabsChange' :data="tabsData"></btn-tabs>
    <ul class="content-max-width">
      <template v-for="(item, index) in list">
        <li :key="index">
          <item :data="item" :index="tabsDataIndex"></item>
        </li>
      </template>
    </ul>
    <div class="pagination">
      <el-pagination
        :page-size="pages.page_size"
        layout="prev, pager, next, jumper"
        :total="5">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import haedBanner from '@/components/headBanner'
import item from './components/listItem'
import btnTabs from '@/components/tabs/btnTabs'
import breadcrumb from '@/components/breadcrumb'
import action from '@action'
export default {
  components: {
    item,
    btnTabs,
    breadcrumb,
    haedBanner
  },
  data() {
    return {
      articleClassify: this.$store.state.classify,
      tabsData: {
        options: ['通知公告', '工作动态'],
        index: 0
      },
      tabsDataIndex: 0,
      list: [],
      pages: {},
      crumbData: [
        {
          path: '/',
          name: '首页'
        },
        {
          name: '工作动态'
        }
      ]
    }    
  },
  created() {
    if (this.$route.query.type) {
      this.tabsData.index = this.$route.query.type
      this.tabsDataIndex = this.$route.query.type
    }
    this.newsList()
  },
  mounted() {
  },
  methods: {
    tabsChange(n) {
      this.tabsDataIndex = n
      this.newsList()
    },
    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[0].children.find(item => {
          return item.display_name === (this.tabsDataIndex ? '工作动态' : '新闻动态')
        })
        console.log(findId.id)
        action.articleAction.getArticle({ category_id: findId.id }).then(res => {
          this.list = res.data.list
          this.pages = res.data.pages
          this.$nextTick(() => {
            this.$forceUpdate()
          })
          loading.close()
        })
      }
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal){
        if (this.$route.query.type !== undefined || this.$route.query.type !== 'undefined') {
          this.tabsData.index = parseInt(this.$route.query.type)
          this.tabsDataIndex = parseInt(this.$route.query.type)
          this.newsList()
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
img{
  width: 100%;
  display: block;
  // height: 240px;
}
.crumb{
  padding-top: 24px;
}
.content-max-width{
  width: 1112px;
  margin: 0 auto;
}
.news-box{
  .tabs-box{
    padding: 60px 0 0;
  }
}
.pagination{
  padding: 24px 0;
  display: flex;
  justify-content: center;
}
</style>
