<template>
  <div class="obscure">
    <div class="content">
      <h1>新闻类别</h1>
      <ul>
        <li v-for="(item, index) in DataList" :key="id" @click="Jump(item.id)">
          <div class="pic">
            <img v-if="item.photoUrl !== null" :src="item.photoUrl">
            <img v-if="item.photoUrl === null" src="../assets/image/xinwen.jpg">
          </div>
          <div class="newcont">
            <h5>{{item.title}}</h5>
            <p>{{item.newsAbstract}}</p>
          </div>
        </li>
      </ul>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="pagesize"
          background
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script type="text/javascript">
import headerNav from '@/components/header';
import footerNav from '@/components/footer';
export default {
  data() {
    return {
      current: 1,
      pagesize: 10,
      // 总共有多少条数据
      total: 0,
      DataList: [],
      keyword: ''
    };
  },
  components: {
    headerNav,
    footerNav
  },
  created() {
    this.keyword = sessionStorage.getItem('title');
    this.loadData();
  },
  methods: {
    async loadData() {
      const response = await this.$http.get(`biz/newsArticles?&title=${this.keyword}&current=${this.current}&size=${this.pagesize}`);
      if (response.data.code === 1) {
        this.DataList = response.data.responseData.records;
        this.total = response.data.responseData.total;
        sessionStorage.clear();
      }
    },
    //跳转
    Jump(id){
      window.open('/newsDetails/'+ id);
    },
    // 分页方法
    handleSizeChange(val) {
      this.pagesize = val;
      this.loadData();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadData();
      console.log(`当前页: ${val}`);
    },
  }
};
</script>

<style type="text/css">
.obscure {

}
.obscure .content {
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}
.obscure .content h1 {
  text-align: center;
}
.obscure  li {
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #ccc;
  cursor:pointer;
}
.obscure  li .pic {
  overflow: hidden;
  width: 150px;
  height: 100px;
  float: left;
}
.obscure  li .pic img {
  width: 100%;
  height: 100%;
}
.obscure  li .newcont {
  overflow: hidden;
  padding-left: 10px;
  float: left;
}
.obscure  li .newcont h5 {
  font-size: 18px;
  padding-top: 5px;
}
.obscure  li .newcont p {
  font-size: 12px;
  padding-top: 5px;
}

</style>
