@include("assessments.assessments")
<template id="select-assessment">
    <span>
        <v-dialog v-model="dialog">

            <v-btn  outline small
                    slot="activator"
                    :loading="loading">
                <span v-if="assessment && assessment.id">Change</span>
                <span v-else>Add</span>
            </v-btn>

            <assessments  :event="eventListener" :modal="true" :select="true"/>

        </v-dialog>
        <v-dialog v-model="edit_dialog" >
            <v-btn  v-if="assessment && assessment.id" color="primary" outline small
                    slot="activator"
                    :loading="loading">
                <span>Edit</span>
            </v-btn>
            <v-card>
                <v-card-title
                    class="grey lighten-4 title"
                >
                    <span v-if="assessment && assessment.id">@{{ assessment.name }}</span>
                    <v-spacer></v-spacer>
                    <v-btn small icon @click="edit_dialog=false">
                        <v-icon small>close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-container grid-list-sm class="pa-4">
                    <assessment-form v-if="assessment && assessment.id"  :assessment="assessment" :event="eventListener"/>
                </v-container>

            </v-card>
        </v-dialog>
        <select-question  v-if="assessment && assessment.id" :event="eventListener" :assessment="assessment"/>
    </span>
</template>

<script>
    const SelectAssessment = {
        template: "#select-assessment",
        components:{Assessments,AssessmentForm,SelectQuestion},
        props: {
            assessment:Object,

            width: {
                type: String,
                default: ""
            },
            required: {
                type: Boolean,
                default: false
            },
            icon: {
                type: Boolean,
                default: false
            },
            btn: {
                type: Boolean,
                default: false
            },
            multiple: {
                type: Boolean, // not yet possible because of data
                default: false
            },
            event: {
                type: Function,
                default: function (event, data) {
                }
            },
        },
        data() {
            return {
                loading: false,
                dialog:false,
                edit_dialog:false,
                questions_dialog:false,
            };
        },
        watch: {
        },
        mounted() {
            console.log("select assess",this.assassment)
        },

        methods: {
           eventListener(event, data){
               switch (event) {
                   case "assessment":
                       this.assessment = data;
                       (this.event)(event,data);
                       break;
                   case "assessment_selected":
                       this.assessment = data;
                       (this.event)(event,data);
                       break;
                   case "close":
                       this.dialog = false;
                       break;
                   default:
                       (this.event)(event,data);
                       console.log("select asssessment");
                       break;

               }
           }
        }
    }
</script>