<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <template v-if="cd > 0">
        <!-- @click="$jParams('newsDetails',{id:info.id,type:getType})" -->
        <router-link id="news" v-for="(info,index) in bgData.info" :key="index" :to="{path:'/newsDetails',query:{id:info.id}}" target="_blank">
          <div class="news-box">
            <img :src="info.cover ? info.cover : 'moren'" />
            <section>
              <h3>{{info.title}}</h3>
              <aside>
                <span>来源:{{info.author}}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>发布时间:{{info.created_at}}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>浏览量:{{info.view}}</span>
              </aside>
              <p>{{info.content}}</p>
            </section>
          </div>
        </router-link>
      </template>

      <template v-else>
          <span>没有内容了呦</span>
      </template>

      <!-- 分页按钮 -->
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :pager-count="5"
          background
          layout="prev, pager, next"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
import HeaderNav from '../../components/HeaderNav'
import FooterNav from '../../components/FooterNav'

export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data () {
    return {
      moren: require('../../../static/img/default.jpg'),
      index_num: 0,
      pageSize: 1, /** 每页的条数 */
      currentPage: 1, /** 当前页数 */
      totalCount: 1, /** 总页数 */
      bgData: [],
      getType: null,
      cd: Number
    }
  },
  computed: {},
  watch: {},
  methods: {
    getData () {
      let _this = this
      this.$http({
        method: 'get',
        url: 'v1/article/list',
        params: {
          page: _this.currentPage,
          type: _this.getType
        }
      }).then(res => {
        if (res.data.data.code === 200) {
          _this.bgData = res.data.data.data
          _this.cd = _this.bgData.info.length
          _this.totalCount = _this.bgData.allPage
        } else {
          _this.$message.error('请求数据有问题！')
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getPackData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getData()
      this.getPackData()
    },
    getPackData () { }
  },
  created () {
    this.getType = this.$route.params.type
    this.currentPage = Number(localStorage.getItem('pagination')) || 1
    this.getType = this.getType || Number(localStorage.getItem('getType'))
    this.handleCurrentChange(this.currentPage)
  },
  mounted () { },
  beforeUpdate () {
    localStorage.setItem('pagination', this.currentPage)
    localStorage.setItem('getType', this.getType)
  },
  beforeDestroy () {
    // localStorage.clear()
    localStorage.setItem('pagination', this.currentPage)
    localStorage.setItem('getType', this.getType)
  },
  destroyed () {
    localStorage.setItem('pagination', 1)
    localStorage.setItem('getType', this.getType)
  }
}
</script>

<style lang='scss' scoped>
.wrapper {
  min-width: 1280px;
  box-sizing: border-box;
  position: relative;

  #box {
    width: 1200px;
    background-color: #ffffff;
    margin: 40px auto 80px;
    box-sizing: border-box;
    padding: 21px 30px 100px 11px;

    .news-box {
      width: 1159px;
      height: 255px;
      padding: 14px 7px 40px 19px;
      box-sizing: border-box;
      border-bottom: 1px solid #e6e6e6;
      margin-bottom: 26px;

      img {
        width: 290px;
        height: 200px;
        border-radius: 10px;
      }

      display: flex;
      justify-content: space-between;
      align-items: center;

      section {
        width: 813px;
        height: 96%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        h3 {
          font-family: "MicrosoftYaHei";
          font-size: 22px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        aside {
          // width: 434px;
          height: 17px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #999999;
        }

        p {
          width: 813px;
          height: 100px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 36px;
          letter-spacing: 0px;
          color: #666666;
          overflow: hidden;
          -o-text-overflow: clip;
          text-overflow: clip;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          word-wrap: break-word;
          white-space: normal;
        }
      }
    }

    .page {
      margin-top: 60px;
      height: 36px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      /deep/ .el-pagination.is-background .el-pager li {
        color: #333 !important;
      }

      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #e60012;
        color: #fff !important;
      }

      /deep/ .el-icon.el-icon-arrow-left::before {
        content: "上一页";
        font-family: "MicrosoftYaHei";
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #666;
      }

      /deep/ .el-pagination .btn-prev {
        width: 80px;
      }

      /deep/ .el-pagination .btn-next {
        width: 80px;
      }

      /deep/ .el-icon.el-icon-arrow-right::before {
        content: "下一页";
        font-family: "MicrosoftYaHei";
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #666;
      }
    }
  }
}
</style>
