<template>
  <div>
    <Header></Header>
    <div class="location">
      当前位置: <router-link to="/">首页</router-link> > {{pageTitle}}
    </div>
    <div class="main">
      <Menu></Menu>
      <div class="right">
        <div class="notice-title">
          <span>{{pageTitle}}</span>
        </div>
        <div class="main-list">
          <ul>
            <li v-for="news in newsList">
              <router-link :to="{path: '/detail', query: {contentId: news.contentId}}">{{news.title}}</router-link>
              <span>{{news.publishDate}}</span>
            </li>
          </ul>
        </div>
        <div class="pager" v-if="page.totalPage > 1">
          <span @click="paging(1)">首页</span>
          <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
          <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
            <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
              {{cpage}}
            </li>
          </ul>
          <ul v-if="page.totalPage > 5">
            <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
              {{cpage}}
            </li>
            <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(page.totalPage - 5 + cpage)">
              {{page.totalPage - 5 + cpage}}
            </li>
            <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(page.page - (3 - cpage))">
              {{page.page - (3 - cpage)}}
            </li>
          </ul>
          <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
          <span @click="paging(page.totalPage)">尾页</span>
        </div>
      </div>
    </div>
    <div class="loading" v-if="isLoading">
      <img src="@/assets/images/loading.gif" alt="">
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/assets/components/Header'
import Footer from '@/assets/components/Footer'
import Menu from '@/assets/components/Menu'
import url from '@/assets/public/url'
import axios from "axios";
export default {
  name: 'Notice',
  components: {
    Header,
    Footer,
    Menu
  },
  data () {
    return {
      pageTitle: '',
      page: {
        page: 1,
        rows: 10,
        categoryId: '',
        totalPage: 1
      },
      newsList: [],
      newsUrl: url.signUrl,
      isLoading: false
    }
  },
  methods: {
    paging: function (page) {
      this.page.page = page
      this.getList()
    },
    getList: function () {
      var self = this
      self.isLoading = true
      axios.get(self.newsUrl + 'app/contentrelease/listpage', {
        params: self.page
      }).then(function (res) {
        self.isLoading = false
        self.newsList = res.data.rows
        self.page.page = res.data.page
        self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
      })
    },
  },
  mounted: function () {
    this.pageTitle = this.$route.query.pageTitle
    this.page.categoryId = this.$route.query.id
    this.getList()
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  background rgba(255,255,255,0.6)
  padding 30px
  border-radius 10px
  box-shadow 0 0 17px #DEDEDE
.location
  width 1200px
  margin 15px auto
  font-size 18px
  color #333
  a
    color #333
.pager
  text-align center
  font-size 0
  margin-bottom 15px
  span
    display inline-block
    padding 0 15px
    line-height 30px
    color #333
    font-size 14px
    margin 0 5px
    vertical-align middle
    cursor pointer
    border 1px solid #CCCCCC
  ul
    display inline-block
    overflow hidden
    vertical-align middle
    li
      width 30px
      line-height 30px
      float left
      margin-right 10px
      cursor pointer
      text-align center
      font-size 14px
      color #333
      border 1px solid #CCCCCC
      &.active
        color: #0d6ec0
        border 1px solid #0d6ec0
        box-sizing border-box
      &:last-child
        margin 0
.main
  width 1200px
  margin 0 auto 15px
  overflow hidden
  .left
    float left
    width 250px
    a
      display block
      margin-bottom 5px
      img
        width 100%
  .right
    float right
    width 940px
    padding 0 10px
    box-sizing border-box
    border 1px solid #f1f1f1
    .notice-title
      border-bottom 1px solid #f1f1f1
      height 50px
      span
        display inline-block
        line-height 50px
        font-size 24px
        color #0d6ec0
        font-weight bold
        padding 0 10px
        position relative
        &:after
          content ''
          width 100%
          height 2px
          background #e2a30c
          position absolute
          bottom 0
          left 0
      a
        float right
        font-size 18px
        line-height 50px
        color #0d6ec0
    .main-list
      min-height 500px
      ul
        li
          height 50px
          border-bottom 1px dashed #EEE
          a
            display inline-block
            max-width 75%
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            font-size 18px
            color #333
            line-height 50px
            &:hover
              color #0d6ec0
          span
            float right
            font-size 18px
            color #999
            line-height 50px
</style>
