<template>
    <teleport to=".scene-designer .tasks" v-if="active">
        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{task: true, selected}" 
            v-show="visible && parent.visible && parent.__parent.visible">
            <line :x1="vd.x1" :y1="vd.y1" :x2="parent.vd.x1" :y2="parent.vd.y1"></line>
            <svg-icon :src="`/asset/thumb/0.webp`" :x="vd.x1" :y="vd.y1" :size="22"></svg-icon>
        </g>
    </teleport>
    <v-card v-if="selected">
        <v-form class="py-4">
            <v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
        </v-form>
        <!-- <asset-selector @select="modelValue.id = $event" type="Task">
            <template v-slot:activator="props">
                <v-btn v-bind="props" prepend-icon="mdi-panorama-outline">Choose game object</v-btn>
            </template>
        </asset-selector> -->
    </v-card>
</template>

<script>
import SvgIcon from './SvgIcon.vue';
import Utils from '@/lib/utils';

export default {
  emits:['target'],
  components: { SvgIcon },
    data(){
        return {
            active: false
        }
    },
    mounted(){
        this.active = true;
    },
    props:{
        //context: Object,
        modelValue: Object,
        vd: Object,
        selected: Boolean, 
        cid:String, 
        visible: Boolean,
        parent: Object
    },
    steps: [['x1', 'y1']],
    name: 'task',
    modifiers: ['x1', 'y1'],
    methods:{
        intersect(v){
            return Utils.intersectLineRect(this.vd, v);
        }
    }
}
</script>