<template>
    <LoadingComponent :props="loading" />

    <div class="db-card">
        <div class="db-card-header">
            <h3 class="db-card-title">{{ $t("label.faq") }}</h3>
        </div>
        <div class="db-card-body">
            <div class="row">
                <div class="col-12">
                    <h3 class="text-lg font-medium capitalize mb-2 text-paragraph">
                        {{ faq.question }}
                    </h3>
                    <label class="db-badge" :class="statusClass(faq.status)">
                        {{ enums.statusEnumArray[faq.status] }}
                    </label>
                    <p class="db-light-text mt-3">
                        {{ faq.answer }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LoadingComponent from "../../components/LoadingComponent.vue";
import statusEnum from "../../../../enums/modules/statusEnum";
import appService from "../../../../services/appService";
import { useFaqStore } from "../../../../stores/faq";

export default {
    name: "FaqShowComponent",
    components: {
        LoadingComponent
    },
    data() {
        return {
            loading: {
                isActive: false
            },
            enums: {
                statusEnum: statusEnum,
                statusEnumArray: {
                    [statusEnum.ACTIVE]: this.$t("label.active"),
                    [statusEnum.INACTIVE]: this.$t("label.inactive")
                }
            },
            useFaqStore: useFaqStore(),
        };
    },
    computed: {
        faq: function () {
            return this.useFaqStore.show;
        }
    },
    mounted() {
        this.loading.isActive = true;
        this.useFaqStore.fetchShow(this.$route.params.id).then((res) => {
            this.loading.isActive = false;
        }).catch((error) => {
            this.loading.isActive = false;
        });
    },
    methods: {
        statusClass: function (status) {
            return appService.statusClass(status);
        }
    }
};
</script>