<template>
  <div>
    <img src="https://webapp-pub.ezijing.com/project/x-new/banner.png" class="banner" />
    <div class="news-box content-max-width">
      <el-radio-group v-model="radioActive" class="my-radio-group">
        <el-radio-button label="20">通知公告</el-radio-button>
        <el-radio-button label="12">工作动态</el-radio-button>
      </el-radio-group>
      <ul class="content-max-width" v-if="list.length">
        <li :key="index" v-for="(item, index) in list">
          <listItem :data="item"></listItem>
        </li>
      </ul>
      <noData v-else></noData>
      <div class="pagination">
        <el-pagination
          hide-on-single-page
          :page-size="pages.page_size"
          layout="prev, pager, next, jumper"
          :current-page="pages.current_page"
          :total="pages.total"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>
<script>
import listItem from './components/listItem.vue'
import noData from '@/components/noData.vue'

import { getArticle } from '@/api/article'
export default {
  components: { listItem, noData },
  data() {
    return {
      radioActive: '20',
      list: [],
      pages: { current_page: 1 },
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.radioActive = route.query.category_id ?? '20'
      },
      immediate: true,
    },
    radioActive: {
      handler() {
        this.fetchList()
      },
      immediate: true,
    },
  },
  methods: {
    async fetchList() {
      const res = await getArticle({ category_id: this.radioActive, current_page: this.pages.current_page })
      this.list = res.data.list
      this.pages = res.data.pages
    },
    handleCurrentChange(val) {
      this.pages.current_page = val
      this.fetchList()
    },
  },
}
</script>
<style lang="scss" scoped>
.my-radio-group {
  margin-bottom: 40px;
  background-color: #fff;
  border-radius: 20px !important;
  ::v-deep .el-radio-button__inner {
    font-size: 20px;
    min-width: 150px;
    padding: 10px 20px;
    border: 0 !important;
    border-radius: 20px !important;
  }
}
img {
  width: 100%;
  display: block;
}
.content-max-width {
  width: 1112px;
  margin: 0 auto;
}
.news-box {
  padding-top: 60px;
}
.pagination {
  padding: 24px 0;
  display: flex;
  justify-content: center;
}
</style>
