<template>
    <b-row v-if="$route.meta.breadcrumb || $route.meta.pageTitle" class="content-header">

        <!-- Content Left -->
        <b-col class="content-header-left mb-2" cols="12" md="9">
            <b-row class="breadcrumbs-top">
                <b-col cols="12">
                    <h1>{{ activity_name }}</h1>
                    <h2 class="content-header-title float-left pr-1 mb-0">
                        {{ $route.meta.pageTitle }}
                    </h2>
                    <div class="breadcrumb-wrapper">
                        <b-breadcrumb>
                            <b-breadcrumb-item to="/">
                                <feather-icon icon="HomeIcon" size="16" class="align-text-top" />
                            </b-breadcrumb-item>
                            <b-breadcrumb-item v-for="item in $route.meta.breadcrumb" :key="item.text"
                                :active="item.active" :to="item.to">
                                {{ t(item.text) }}
                            </b-breadcrumb-item>
                        </b-breadcrumb>
                    </div>
                </b-col>
            </b-row>
        </b-col>

        <!-- Content Right -->
        <b-col class="content-header-right text-md-right d-md-block d-none mb-1" md="3" cols="12">
            <b-dropdown v-if="($can('upload', 'blog') && this.$route.name.includes('blog-detail'))" variant="link"
                no-caret toggle-class="p-0" right>

                <template #button-content>
                    <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary" class="btn-icon">
                        <feather-icon icon="PenToolIcon" />
                        <span class="align-middle ml-50">管理貼文</span>
                    </b-button>
                </template>

                <b-dropdown-item>
                    <feather-icon icon="EditIcon" size="16" />
                    <span class="align-middle ml-50">編輯貼文</span>
                </b-dropdown-item>

                <b-dropdown-item href="#">
                    <feather-icon icon="Trash2Icon" size="16" />
                    <span class="align-middle ml-50">刪除貼文</span>
                </b-dropdown-item>
            </b-dropdown>

            <b-button v-if="this.userData.role == 'Admin' && this.$route.name == 'activityList'" variant="success"
                :to="{ name: 'activityStore' }">新增活動</b-button>

            <b-dropdown v-if="$can('mange', this.$route.name)" variant="link" no-caret toggle-class="p-0" right>

                <template #button-content>
                    <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" variant="primary" class="btn-icon">
                        <feather-icon icon="SettingsIcon" />
                    </b-button>
                </template>

                <b-dropdown-item href="#">
                    <feather-icon icon="CheckSquareIcon" size="16" />
                    <span class="align-middle ml-50">{{ t('Todo') }}</span>
                </b-dropdown-item>

                <b-dropdown-item href="#">
                    <feather-icon icon="MessageSquareIcon" size="16" />
                    <span class="align-middle ml-50">{{ t('Chat') }}</span>
                </b-dropdown-item>

                <b-dropdown-item href="#">
                    <feather-icon icon="MailIcon" size="16" />
                    <span class="align-middle ml-50">{{ t('Email') }}</span>
                </b-dropdown-item>

                <b-dropdown-item href="#">
                    <feather-icon icon="CalendarIcon" size="16" />
                    <span class="align-middle ml-50">{{ t('Calendar') }}</span>
                </b-dropdown-item>
            </b-dropdown>

        </b-col>
    </b-row>
</template>

<script>
import {
    BBreadcrumb, BBreadcrumbItem, BRow, BCol, BDropdown, BDropdownItem, BButton,
} from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
import { useUtils as useI18nUtils } from '@core/libs/i18n'
import { getUserData } from '@/auth/utils'
import useJwt from '@/auth/jwt/useJwt'

export default {
    setup() {
        const { t } = useI18nUtils()

        return {
            // i18n
            t,
        }

    },
    directives: {
        Ripple,
    },
    data() {
        return {
            userData: getUserData(),
            activity_name: "",
        }
    },
    components: {
        BBreadcrumb,
        BBreadcrumbItem,
        BRow,
        BCol,
        BDropdown,
        BDropdownItem,
        BButton,
    },
    created() {
        this.activityName(this.$route.params.activity_id)
    },
    computed: {
       
    },
    methods: {
        activityName(activity_id) {
            useJwt.postData('/api/activity/show', { activity_id: activity_id }).then(response => {
                this.activity_name = response.data.activity_name;
            }).catch(error => {
                console.log("error: " + error);
            });
        },
    },
    watch: {
        '$route.params.activity_id': function (newValue) {
            this.activityName(newValue)

        }
    }
}
</script>
