<template>
    <slot name="activator" v-bind="activatorProps" @click="dialog = !dialog"></slot>
    <v-dialog transition="dialog-bottom-transition" fullscreen v-model="dialog">
        <v-container>
            <v-row>
                <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
                    <v-img :src="`/asset/thumb/${v.asset?.thumb}`" @click="select(v.id)"></v-img>
                    <div class="d-flex">
                        <span class="flex-grow-1">{{ v.name }}</span>
                        <v-icon color="primary" size="x-large" class="position-absolute top-0 left-0 ma-6">mdi-{{ $p.objectTypes.find(t=>t.value == v.type).icon }}</v-icon>
                        <!-- <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/game-objects/${v.id}`" color="primary"></v-btn> -->
                    </div>
                </v-col>
            </v-row>
        </v-container>
    </v-dialog>
</template>

<script>

export default {
    props:[
        'modelValue', 'type'
    ],
    emits:['select'],
    data(){
        return {
            items: [],
            activatorProps:{},
            dialog: false
        }
    },

    mounted(){
        console.log(this.activatorProps, this.cls)
    },
    
    async created(){
        this.items = (await this.$api.gameObject.search({
            type: { $in: this.$p.objectTypes.filter(t=>t.type == this.type || !this.type).map(t=>t.value) }
        })).data.data
    },

    methods:{
        select(id){
            this.$emit('select', id);
            this.dialog = false;
        }
    }
}
</script>