<template>
  <BasePage>
    <div class="news">

      <div class="newsbox" v-for="i in pagelist" @click="$navigate(`newsdetail?id=${i.id}`)">
        <div class="listleft">
          <span>
            {{ i.title }}
          </span>
          <p>
            {{ i.date }}
          </p>
        </div>
        <img v-if="i.img" :src="i.img" alt="">
      </div>

      <van-pagination v-model="currentPage" :total-items="newslist.length" items-per-page="5" mode="simple" />

    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'News',
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      newslist: [
        {
          id: 1,
          title: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工',
          contect: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工......',
          date: '2025/05/011',
          img: '',
        },
        {
          id: 2,
          title: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工',
          contect: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工......',
          date: '2025/05/011',
          img: '',
        },
        {
          id: 3,
          title: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工',
          contect: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工......',
          date: '2025/05/011',
          img: '',
        },
        {
          id: 4,
          title: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工',
          contect: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工......',
          date: '2025/05/011',
          img: '',
        },
        {
          id: 5,
          title: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工',
          contect: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工......',
          date: '2025/05/011',
          img: '',
        },
        {
          id: 6,
          title: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工',
          contect: '万同金山湖中心项目正式开工9月2日，万同金山湖中心项目正式开工......',
          date: '2025/05/011',
          img: '',
        },
      ]
    }
  },
  methods: {
  },
  computed: {
    pagelist() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.newslist.slice(start, end);
    }
  }
}
</script>
