<template>
    <b-row class="match-height">
        <b-col md="6" lg="4" v-for="(activity, index) in activities" :key="index">
            <b-card no-body border-variant="info" class="text-center">
                <b-card-body>
                    <b-card-title>{{ activity.activity_name }}</b-card-title>
                    <b-card-text>地點： {{ activity.place }}</b-card-text>
                    <b-card-text>時間： {{ activity.date }}</b-card-text>
                    <b-button variant="success"
                        :to="{ name: 'activityPage', params: { 'activity_id': activity.id } }">進入活動頁面</b-button>
                </b-card-body>
            </b-card>
        </b-col>
    </b-row>
</template>

<script>
import { BCard, BCardText, BCardBody, BCardTitle, BLink, BButton, BButtonGroup, BRow, BCol } from 'bootstrap-vue'
import useJwt from '@/auth/jwt/useJwt'
import { getUserData } from '@/auth/utils'

export default {
    components: {
        BCard,
        BCardText,
        BCardBody,
        BCardTitle,
        BLink,
        BButton,
        BButtonGroup,
        BRow,
        BCol,
    },
    data() {
        return {
            userData: getUserData(),
            activities: [],
        }
    },
    created() {
        useJwt.postData('/api/activity/list', null).then(response => {
            this.activities = response.data;
        }).catch(error => {
            console.log("error: " + error);
        });
    },
    methods: {

    }
}
</script>

<style>

</style>
