<template>
    <div class="row">
        <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
        <div class="col-12" v-if="questions.length > 0">
            <feedback-form-component :questions="questions" :token="token"></feedback-form-component>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            token: {
                type: String,
                required: true,
            }
        },
        data(){
            return {
                section: 'feedbackCustomerSection',
                questions: []
            }
        },
        computed: {
            pendingQueue () {
                return this.$store.getters.isInCompleteQueue(this.section);
            }
        },
        watch: {
            pendingQueue(inComplete){
                if(inComplete){
                    this.fetchQuetions();
                }
            }
        },
        created(){
            this.$store.dispatch('updateListQueue', {'name': this.section});
        },
        methods: {
            fetchQuetions(){
                this.parameters = {}
                this.parameters.token = this.token;
                this.submit(route('api.feedback.list.question'), 'post', this.section, false, false);
                // var filters = {'questionnaire_set_id': 1};
                // this.submit(route('api.helpmenu.list.question', this.id) + '?filters=' + JSON.stringify(filters), 'get', this.section, false, false);
            },
            successHandler(response){
                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                this.questions = response.payload.data;
            },
            errorHandler(error, status){
                if(status == 404){
                    window.location.href = this.route('error.404');
                }
            }
        }
    }
</script>
