<template>
    <div v-if="modelValue.go">
        <v-number-input density="compact" :precision="null" :label="l.particleWidth" v-model="modelValue.x"></v-number-input>
        <v-number-input density="compact" :precision="null" :label="l.particleHeight" v-model="modelValue.y"></v-number-input>

        <v-number-input density="compact" :precision="null" :label="l.areaWidth" v-model="modelValue.w"></v-number-input>
        <v-number-input density="compact" :precision="null" :label="l.areaLength" v-model="modelValue.h"></v-number-input>

        <v-number-input density="compact" :label="l.elementsCount" v-model="modelValue.count"></v-number-input>

        <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-video-box" color="deep-orange-darken-4" block>{{ l.chooseImage }}</v-btn>
        </template>
    </asset-selector>
</template>

<script>
//Grass.positions(1000,50,50), '/static/textures/grass01.png', 1, .5
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.x = 1;
            this.modelValue.y = 1;
            this.modelValue.count = 1000;
            this.modelValue.w = 50;
            this.modelValue.h = 50;
            this.modelValue.exclude = true;
        }
    },
    __noPoints: true
}
</script>