<script setup>

const activityList = computed(() => res.value.data);

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

// 取得活動資料
const { data: res } = await useMyFetch('/social/getActivityList', "POST", {
  page: page.value,
  pageSize: pageSize.value,
})

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

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

</script>

<template>
  <div class="toolbar">
    <div class="tTitle">{{ $t('Social.activity')}}</div>
  </div>
  <div class="content">
    <div>
      <div class="row">
        <div class="col-12 col-lg-6 col-xl-4" v-for="(item, index) in activityList.list" :key="index">
          <NuxtLinkLocale class="card" :to="'/social/activity/detail/' + item.id">
            <div class="card-body">
              <div class="imgCnt lg"><img :src="'https://prodio.zltest.com.tw' + item.imageList[0].url" :alt="item.title">
              </div>
            </div>
            <div class="card-footer">
              <div class="clip">
                <div class="title ellipsis">{{ item.title }}</div>
                <div class="date ellipsis">{{ item.create_time }}</div>
              </div>
            </div>
          </NuxtLinkLocale>
        </div>
      </div>
      <div class="pagination-block">
        <el-pagination layout="->, prev, pager, next" :total="activityList.total" 
          @change="handlePageChange"/>
      </div>
    </div>
  </div>
</template>

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