<script setup>
const route=useRoute();

const activityData = computed(() => res.value.data);
// 取得活動資料
const { data: res } = await useMyFetch('/social/getActivity', "GET", {id: route.params.id})

onMounted(() => {
  Fancybox.bind("[data-fancybox]");
});

</script>

<template>
  <div>
    <div class="main social">
      <section class="section">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="toolbar">
                <div class="tTitle">{{ $t('Social.activity')}}</div>
              </div>		
              <div class="content">
                <div class="block">
                    <div class="bName mb-4">{{ activityData.title }}</div>
                    <div class="row">
                        <div class="col-12 col-md-6 col-lg-4 col-xl-3" v-for="(item,index) in activityData.imageList" :key="index">
                            <a :href="item.url" class="card" data-fancybox="gallery" data-caption="Caption #1">
                                <div class="card-body">
                                    <div class="imgCnt lg"><img :src="item.url" alt=""></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <a class="backBtn" @click="$router.back()" >back</a>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
      
  </div>
</template>

<style lang="less">

</style>
