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

      <div class=" MediaCard">
        <MediaCom v-for="item in dataList" :key="item.id" :data="item" />
      </div>
      <!-- 分页 -->
      <div class="pagination ">
        <PaginationComVue :page="page" @changePage="changePage" :total="total" :per="per" />
      </div>
    </div>
  </div>
</template>

<script setup>
import MediaCom from "../components/MediaCom.vue";
import BigTitleComVue from "../components/BigTitleCom.vue";
import LineComVue from "../components/LineCom.vue";
import PaginationComVue from '../components/PaginationCom.vue'
import { MediaData } from "../assets/datas/Datas";
import { onMounted, ref } from 'vue';
import {getMediaApi} from "../api/manage.js";
import useTitleInfo from "../utils/useTitleInfo.js";

const emit = defineEmits(['backTop'])

const titleInfo = useTitleInfo()
// 数据列表
const dataList = ref([])
// 数据总数 Total databases count
let total = ref(0);
// 页码 page number
let page = ref(1);
// 每页显示数量  displays the number per page
let per = ref(10);

const changePage = (data) => {
  page.value = data
}

// 监听页面变化
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()
})

// 获取数据
const getData = () => {
  getMediaApi({page: page.value, limit: per.value}).then(({data})=>{
    if (data) {
      dataList.value = data.data
      total.value = data.total;
      page.value = data.current_page;
      per.value = data.per_page;
      emit('backTop');
    }

  })
  // 获取数据渲染
  // dataList.value = MediaData.slice((page.value - 1) * per.value, page.value * per.value);

}


</script>

<style lang="scss" scoped>
.MediaCard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

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

  @media screen and (min-width: 0Px) and (max-width: 431Px) {
    width: 100%;
    margin: 0;
    margin-top: 30px !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>
