<template>
    <div v-if="modelValue.go">
        <v-text-field hide-details density="compact" v-model="modelValue.q" class="pb-2" label="Question" icon-color="blue" prepend-icon="mdi-chat-question-outline"></v-text-field>
        <v-text-field hide-details density="compact" v-model="modelValue.a[0]" class="pb-2" label="Correct answer" icon-color="success" prepend-icon="mdi-check"></v-text-field>
        <v-text-field v-for="i in 4" :key="i" hide-details density="compact" v-model="modelValue.a[i]" 
            v-show="modelValue.a[i-1]" class="pb-2" :label="`Wrong answer #${i}`" icon-color="error" 
            prepend-icon="mdi-close"></v-text-field>
        <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
        <div class="text-caption text-center">{{ modelValue.title }}</div>
    </div>
    <asset-selector @select="assignTexture" :type="['Texture']">
        <template v-slot:activator="props">
            <v-btn v-bind="props" prepend-icon="mdi-cube-outline" color="deep-orange-darken-4" block>Choose object</v-btn>
        </template>
    </asset-selector>
</template>

<script>

export default {
    data(){
        return {
            active: false
        }
    },
    mounted(){
        this.active = true;
    },
    props:{
        modelValue: Object
    },
    methods:{
        assignTexture(e){
            this.modelValue.go = e.id;
            this.modelValue.title = e.name
            this.modelValue.a = [];
        }
    }
}
</script>