<template>
  <div class="news clear">
    <div class="container">
      <!-- 标题 title -->
      <BigTitleComVue :bigTitle="titleInfo.title"
        :subTitle="titleInfo.subTitle" />
      <!-- 分割线 Devider -->
      <LineComVue />
    </div>

    <div class="container news-content">
      <NewsComVue flag="news" v-for="newsInfo in dataList" :key="newsInfo.id" :data="newsInfo" />
    </div>

    <div class="container pagination">
      <PaginationComVue :page="page" @changePage="changePage" :total="total" :per="per" :dataList="dataList" />
    </div>
  </div>
</template>

<script setup>
import BigTitleComVue from '../components/BigTitleCom.vue';
import LineComVue from '../components/LineCom.vue';
import NewsComVue from '../components/NewsCom.vue';
import PaginationComVue from '../components/PaginationCom.vue';
import { newsData } from '../assets/datas/Datas';

import { onMounted, ref } from 'vue';
import {getNewsApi} from "../api/manage.js";
import useTitleInfo from "../utils/useTitleInfo.js";


const emit = defineEmits(['backTop'])
const titleInfo = useTitleInfo()
// 数据总数 Total databases count
let total = ref(0);
// 页码 page number
let page = ref(1);
// 每页显示数量  displays the number per page
let per = ref(30);

// 数据列表
let dataList = ref([]);

// 获取数据
const getData = () => {

  getNewsApi({page: page.value, limit: per.value}).then(({data})=>{
    if (data) {
      total.value = data.total;
      page.value = data.current_page;
      per.value = data.per_page;
      dataList.value = data.data;
      emit('backTop');
    }

  })
  // total.value = 18;
  // 获取数据渲染

  // dataList.value = newsData.slice((page.value - 1) * per.value, page.value * per.value);


}

// 换页 changePage
const changePage = (data) => {
  page.value = data
  getData()
}

// 监听页面宽度变化
onMounted(() => {
  function changeSize() {
    const pageSize = window.innerWidth;
    if (pageSize >= 1440) {
      per.value = 30;
    } else if (pageSize > 430 && pageSize < 1440) {
      per.value = 20;
    } else if (pageSize <= 430) {
      per.value = 10;
    }
  }
  changeSize()
  window.onresize = changeSize

  getData()
})

</script>

<style lang="scss" scoped>
.news {
  max-width: 1000px;
  min-height: 100vh;
  margin: 0 auto;

  .news-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      margin: 0px;
      padding: 20px 28px !important;
    }

    @media screen and (min-width:0Px) and (max-width: 431Px) {
      width: 100%;
      margin: 0;
      margin-top: -30px;
      padding-bottom: 0px !important;
    }
  }

  .pagination {
    float: right;
    margin: 20px 0px 20px;

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      padding-top: 0 !important;
      margin: 0px 0px 36px !important;
    }

    @media screen and (min-width:0Px) and (max-width: 431Px) {
      padding-top: 0px !important;
      margin: 0 0 20px !important;
    }
  }
}
</style>
