<script setup>

const esgData = computed(() => esgRes.value.data);

const page = ref(1)
const pageSize = ref(10)

// 取得新聞資料
const { data: esgRes } = await useMyFetch('/social/getEsgList', "POST", {
  page: page.value,
  pageSize: pageSize.value,
})

const handlePageChange = async (npage,npageSize) => {
  page.value = npage
  pageSize.value = npageSize

  esgRes.value = await useRequest('/social/getEsgList', "POST", {
    page: page.value,
    pageSize: pageSize.value,
  })
}

</script>

<template>
  <div class="toolbar">
    <div class="tTitle">{{ $t('Social.esg') }}</div>
  </div>
  <div class="content">
    <div>
      <NuxtLinkLocale :to="'/social/esg/detail/' + item.id" class="item" v-for="(item, index) in esgData.list" :key="index">
        <div class="title ellipsis">{{ item.title }}</div>
        <div class="date">{{ item.create_time }}</div>
      </NuxtLinkLocale>
    </div>
    <div class="pagination-block">
        <el-pagination layout="->, prev, pager, next" :total="esgData.total" 
          @change="handlePageChange"
          />
    </div>
  </div>
</template>

<style lang="less">
.pagination-block {
  margin-bottom: 16px;
}
</style>
