<template>
    <div>
      <Header></Header>
      <div class="main">
        <Menu></Menu>
        <div class="right">
          <div class="main-list">
            <ul>
              <router-link :to="{path: '/detail', query: {contentId: news.contentId}}" v-for="(news,idx) in noticeList" tag="li" :key="idx">
                <div class="img">
                  <img :src="newsUrl + 'route/file/download/true/' + news.coverPhotos" alt="" v-if="news.coverPhotos">
                  <img src="@/assets/images/default-news.jpg" alt="" v-else>
                </div>
                <div class="info">
                  <h3>{{ news.title }}</h3>
                  <p>{{ news.summary }}</p>
                  <span>{{ news.publishDate }}</span>
                </div>
              </router-link>
            </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 {
          page: {
            page: 1,
            rows: 10,
            totalPage: 10,
            categoryId: '87a51bb1-451b-4b49-903b-4d847ba9c730'
          },
          noticeList: [],
          newsUrl: url.signUrl,
          isLoading: false
        }
    },
    methods: {
      paging: function (page) {
        this.page.page = page
        this.getNotice()
      },
      getNotice: function () {
        var self = this
        self.isLoading = true
        axios.get(self.newsUrl + 'app/contentrelease/listpage', {
          params: self.page
        }).then(function (res) {
          for (let i = 0; i < res.data.rows.length; i++) {
            res.data.rows[i].coverPhotos = res.data.rows[i].coverPhotos.split(',')[0]
          }
          self.isLoading = false
          self.noticeList = res.data.rows
          self.page.page = res.data.page
          self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
        })
      },
    },
    mounted: function () {
      this.getNotice()
    }
}
</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
.right
  width 100%
  padding 0 10px
  box-sizing border-box
  .main-list
    min-height 500px
    ul
      li
        overflow hidden
        padding 20px
        box-shadow 0 0 10px #EEE
        border-radius 3px
        margin-bottom 25px
        cursor pointer
        &:hover
          h3
            color #0d6ec0
        h3
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
          font-size 18px
          color #333
          margin-bottom 10px
        p
          font-size 14px
          color #999
          height 50px
          line-height 25px
          display -webkit-box
          overflow hidden
          -webkit-line-clamp 2
          -webkit-box-orient vertical
          margin-bottom 10px
        span
          font-size 14px
          color #4184dd
        .img
          width 255px
          border-right 1px dashed #dcdcdc
          padding-right 60px
          box-sizing border-box
          float left
          img
            width 100%
            height 120px
        .info
          float right
          width 840px
</style>
