<template>
    <div>
        <b-row class="match-height">
            <b-col md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'checkin', params: { 'activity_id': this.$route.params.activity_id } }">報到頁面</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'draw', params: { 'activity_id': this.$route.params.activity_id } }">抽獎頁面</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'claim', params: { 'activity_id': this.$route.params.activity_id } }">兌獎頁面</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col v-if="this.userData.role == 'Admin'" md="6" :lg="lg">
                <b-card no-body border-variant="info" class="text-center">
                    <b-card-body>
                        <b-button variant="success"
                            :to="{ name: 'activityUpdate', params: { 'activity_id': this.$route.params.activity_id } }">編輯活動</b-button>
                    </b-card-body>
                </b-card>
            </b-col>
        </b-row>
    </div>
</template>

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

export default {
    components: {
        BCard,
        BCardBody,
        BCardText,
        BLink,
        BButton,
        BButtonGroup,
        BRow,
        BCol,
    },
    directives: {
        Ripple,
    },
    data() {
        return {
            userData: getUserData(),
            lg: 0,
        }
    },
    created() {
        this.userData.role == 'User' ? this.lg = 4 : this.lg = 3;
    }
}
</script>

<style>
.redirect-back {
    position: fixed;
    bottom: 5%;
    right: 30px;
    z-index: 99;
}
</style>
